Home > インドネシアのITサービス > Ajax関数によるGET通信とPOST通信

Ajax関数によるGET通信とPOST通信

2015/11/14

Javascript

ブラウザとWEBサーバー間のデータ通信であるHTTPプロトコルはOSI参照モデルのセッション層に属しており、ブラウザ上のHTMLフォームに入力したデータをサーバーに引き継ぐGETメソッドとPOSTメソッドもHTTPプロトコルに定義されています。

WEBサーバーはUTF-8N形式でエンコードしてブラウザに返すため、Windowsで作成したShift-JIS形式の文章をサーバーにアップロードして、ブラウザからサーバーにページ要求した場合、サーバーがUTF-8Nでエンコードしたときに文字化けが発生します。

フォーム部品のinputタグのtype属性の値にはtext(テキストボックス)やsubmit(送信ボタン)があり、これらの最初と最後を囲って入力値を送信するのがformタグで、action属性に処理ファイル名、type属性に送信方法（POSTかGET）を指定すると「HTTPプロトコルのPOSTメソッドを用いてmail等のフィールド名のコントロールに格納された値をtarget.phpに渡してね」と意味づけできます。

ジャカルタ

インドネシアのITサービス

インターネット技術の急速な発展と普及により、優秀なIT人材を輩出することで知られるジャカルタのビヌス大学（BINUS）やバンドゥンのバンドゥン工科大学、インドネシアコンピューター大学（UNIKOM）の学生の多くがインターネット・WEB業界やソフトウェア業界を志望するようです。

続きを見る

クライアントとサーバー間の通信

ネットワーク通信構造を7階層のプロトコルに分けたのがOSI参照モデルなんですが、クライアント(Webブラウザ)とWebサーバとがデータを送受信するのに使われるのがHTTPプロトコル。OSI参照モデルではセッション層に属しています。

  • 7. アプリケーション層（HTTP,FTP,DNS)
  • 6. プレゼンテーション層（HTTP,FTP,DNS)
  • 5. セッション層（HTTP,FTP,DNS)
  • 4. トランスポート層（TCP）
  • 3. ネットワーク層（IPルーティング）
  • 2. データリンク層（Ethernet）
  • 1. 物理層（UTPケーブル, ネットワークアダプタ）

HTMLフォームにデータを入力させて、ブラウザからデータをサーバーのファイルに引き継ぐ場合に使うのがGETメソッドかPOSTメソッドで、これらは全部HTTPプロトコルの中に定義されています。

クライアントPCで作成するPHPやHTMLファイルは、Windows上で文字コードに1対1で変換されて保存されます。このときUTF-8Nでエンコード（符号化）することにより、サーバーがクライアントに表示する際のエンコードが正しくUTF-8Nで行われ、クライアントPCでのデコード（復号化）も同じくUTF-8Nで行われます。

以下はアップロードしたファイルの文字コードとサーバーのエンコードが異なることによる文字化けの例。

  1. PCで文章を書いて自動的にShift-JISでエンコード化され保存
  2. クライアントからサーバーにページアップロード
  3. クライアントからサーバーにページ要求
  4. サーバーはクライアントに文章をUTF-8Nでエンコードして表示
  5. 文字化け

jQueryの導入

jQueryはDOM（Document Object Model）を操作するためにJavaScriptを元に設計されたJavaScriptの拡張ライブラリですが、導入するには以下の方法があります。

  1. CDN（Content Delivery Network）をオンラインで使う（テーマ）
    jQuery本体非圧縮版 : http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js
    jQuery本体圧縮版 : http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
    jQuery UI非圧縮版 : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js
    jQuery UI圧縮版 : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
  2. 自サーバーに配置（WordPress本体）
    wp-includes/js/jquery/jquery.js

ブラウザの役割は、ユーザーが要求したURLのリソースをサーバーに要求して、ブラウザウィンドウに表示（レンダリング）することですが、内部では以下の2つを行なっています。

  1. HTMLを読み込むことでDOMを生成
  2. JavaScriptやjQueryがプログラムからDOMにアクセスできるようにNodeインターフェイスを提供

nodeインターフェイスを通してアクセスできるDOMの最上位オブジェクト（エレメント）は、html開始タグ＜html＞とhtml終了タグ＜／html＞から生成されるdocumentオブジェクトです。

Javascript

PHP・JavaScript・VBの書き方の比較整理

プログラムのコードは変数、値（リテラル）、式、制御文の4つから構成され、制御文の書き方には順次処理、分岐処理、繰り返し処理の3種類があります。

続きを見る

JavaScriptとjQueryの実行タイミング

ブラウザがHTMLページの読み込み時に処理を実行させる方法は主に3つあります。

  1. bodyタグのonload属性に関数指定
  2. JavaScriptのwindowオブジェクトに対してonloadでイベントを発生
  3. jQueryでDOM構築直後に処理を実行させる。

bodyタグを読み込んだ瞬間に、onload属性に指定したJavaScript関数を実行させるタイミングは、JavaScriptのwindowオブジェクトに対して関数onloadを呼び出すwindow.onloadと余り変わらないようです。

HTMLタグ内のonload属性に関数指定する場合

<html>
<head>
<script type="text/javascript" src=".js/hello.js">
</script>
</head>
    //loadHello関数呼び出し（関数にカッコが必要）
    <body onLoad="loadHello()">
    </body>
</html>

[hello.js]
function loadHello(){
  alert("Hello!");
}

JavaScriptのwindowオブジェクトに対してonloadでイベントを発生させる場合

<html>
<head>
<script type="text/javascript" src=".js/hello.js">
</script>
</head>
    <body>
    </body>
</html>

[hello.js]
function loadHello(){
  alert("Hello!");
}
//loadHello関数オブジェクトを代入（関数にカッコ必要なし）
window.onload=loadHello;

jQueryで関数指定する場合

一方でjQueryは、セレクタ（処理対象となるDOM要素を指定するための記法）に対してメソッド（処理）をドットで繋げていく言語であり、基本形は

  • ドル記号（”セレクタ”）.メソッド（パラメータ）；

であり、DOMが構築された直後に実行されるので速いです。

<script>
//DOM構築後に実行する範囲の指定方法
1. $(document).ready(function($){
2. $(document).ready(function(){
3. jQuery(function($){
4. jQuery(function(){
5. $(function(){
6. $(function($){
    //body閉じタグの直前なら、DOM読み込み済みなので範囲の指定は不要
     $("yama").css('color', 'red');

});
</script>

DOM構築後に実行する部分を中カッコ{～}内に記述しますが、その中括弧を囲む部分の書き方はいろいろあります。

例えば$(document).ready(function($){～});は「document構築準備が整ってからfunction内部を実行しろ」という意味になります。

また$（ドルマーク）はjQuery関数そのもののエイリアスなので、$(function(){～});とjQuery(function(){～});は同じ意味になります。

HTTPプロトコルのGETとPOST

PHPのデータ受け渡しのでは、HTMLフォームにデータを入力させて、ブラウザからデータをサーバーのファイルに引き継ぐ場合に使うのがGETメソッドかPOSTメソッドで、これらは全部HTTPプロトコルの中に定義されています。

ただ言葉の意味から考えてみるとGETはフォームに入力したデータを元ににサーバーから情報を取得することに重きを置いており、Google検索やWordPressの下書きとして保存などはGETです。

GETメソッドは、URLの後ろに「?」で始まり、「=」で結ばれた名前と値を「&」で連結したクエリ文字列によってデータを引き継ぎます。

一方POSTはフォームのデータを投稿することに重きを置いており、WordPressの新規投稿はPOSTになります。

<form action="target.php" method="post">
    //チェックボックスのキーに配列を使用
    <input type="checkbox" name="hp[]" value="iphone">iPhone</input>
    <input type="checkbox" name="hp[]" value="android">Android</input>
    <input type="checkbox" name="hp[]" value="blackberry">Blackberry</input>

    <input type="submit" name="klik" value="SEND"></input>
</form>
if(isset($_POST['klik'])){
    //hpも配列型変数
    $hp=$_POST['hp'];

    //配列のキーと値を取得
    foreach($hp as $key=>$value){
        print $key."=".$value."<br>";

    }
}

ちなみにURL（Uniform Resource Locator）は、現在ではより広義のURI（Uniform Resource Identifier）と呼ぶほうが適切らしいです。

しかしこの言葉がイマイチ一般に普及しきれていないのは、インターネットユーザーにとって呼び方は何であれ「インターネット上のアドレスを表すもの」という意味が重要なのであって、いまさら変えることに意味がないからかもしれません。

jQueryの$.ajax()関数とコールバック関数

ページのリフレッシュなしで、サーバープログラムにデータを渡して処理結果を受けとることができるAsynchronous（アシンクロナス）な非同期通信ですが、$.ajax()関数の引数としてfunction()というコールバック関数が渡されています。

<form> 
<input type ="button" id ="klik" value ="SEND">
<form>

<script>
$("#klik").on("click", function(){          //id属性klikの要素がclickされると
	$.ajax({
		url : testdata.json,        //testdata.jsonというサーバーにあるファイルを
		type : "GET",               //GETメソッドでサーバーから取得し
		dataType : "json",          //処理結果はjson形式で受信
		success : function(data){   //取得が成功したらtestdata.jsonをコールバック関数のfunctionの引数dataにセット 
			console.log(data.nama+data.zou);  //コンソール表示（コールバック関数functionの処理の中身）
		}
	});
});
</script>

サーバーから取得する元情報も、$.ajax()関数内で引数として渡す書き方も、キーと値で定義していくJSON形式に準拠しています。

JSON（ジェイソン、JavaScript Object Notation）は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONはJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている（Wikiより）。

サーバーから取得するJSONフォーマットのデータ

{
	"nama":"やま",
	"zou":"ぞう"
}

$.ajax()のshorthandメソッドである$.get()と$.post()

非同期通信でユーザービリティを高めるためには、AjaxをJavaScriptでガチで実装するよりjQueryのAjax関数、特にshorthandメソッドを使うと実装が楽です。

$.ajax()関数のshorthandメソッド（ショートカットみたいなもの）が$.load()や$.get()であり、引数の書き方が$.ajax()関数よりも簡素化されています。

<input type="text" name="sei" id="nm">
<input type="button" id="klik" value="send">
<div id="result"></div>

<script>
$('#klik').click(function(){    //id属性klikの要素がclickされたら
    $.get('show.php', {         //GETメソッドでshow.phpに対して
        name:$('#nm').val()     //id属性nmの要素の値を
        }, function(data){      //コールバック関数functionの引数として渡す。
        $('#result').html(data.message + "("+ data.length + ")");   //処理結果はid属性resultにhtml表示
    });
});
</script>

show.php

<?php
$rs=array(
	"message" => $_GET['name'],
	"length" => strlen($_GET['name'])
);

header('Content-Type: application/json; charset=utf-8');
echo json_encode($rs);