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

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と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のデータ受け渡しについて以下のように書いたことがあります(「PHPによるHTMLフォームからのデータの受け取り方」から)。

  • 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);