JavascriptのAjaxについての基本まとめ

  • 56
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Ajaxを実装するためのステップ

まずjQueryを使わず生のjavascriptでajaxを実装する。
今回はサーバサイドスクリプトにphpを使用する。

html
<form name="fm">
<label>名前:
<input type="text" name="name" size="15" /></label>
<input type="button" name="submit" value="送信" onclick="asyncSend()" />
</form>
<div id="result"></div>
php
<?php
sleep(3);
print('こんにちは、'.$_REQUEST['name'].'さん!');

上のようなhtmlで送信ボタンをクリックしたら応答メッセージをresultに非同期で表示する。
関数asyncSend内に次の処理を記述していく。

1.XMLHttpRequestオブジェクトを生成する

var req = new XMLHttpRequest();

IE7未満では別の書き方をするのでサポートする場合はクロスブラウザ対応が必要。

2.サーバ応答時の処理を定義する

XMLHttpRequestオブジェクトはreadyState/statusプロパティで通信の状態や応答ステータスを確認できる。
これらが変化したタイミングでコールバック関数を起動するようにする。
コールバック関数はonreadystatechangedプロパティで設定する。

req.onreadystatechange = function() {
  var result = document.getElementById('result');
  if (req.readyState == 4) { // 通信の完了時
    if (req.status == 200) { // 通信の成功時
      result.innerHTML = req.responseText;
    }
  }else{
    result.innerHTML = "通信中..."
  }
}

通信が完了する前は通信中...と表示し、通信の成功時にXMLHttpRequestオブジェクトの受け取ったプレーンテキストをhtml内に記述する。
statusが200でなかったらエラーメッセージなどもここで記述できる。

3.サーバに要求データ(リクエスト)を送信する

リクエストを送信するには、まずopenメソッドでリクエストを初期化する。

req.open('GET', 'helloAjax.php?name=' + encodeURIComponent(document.fm.name.value), true);
req.send(null);

openメソッドは次のような書式
XMLHttpRequestオブジェクト.open(HTTPメソッド, URL, 非同期モードで通信するか, ユーザー名, パスワード)
ユーザー名とパスワードは認証が必要なページのみ指定。

  • HTTPメソッドは数百バイト以内ならGET、それ以上大きいならPOST
  • URLの末尾に?キー名=値&の形式で情報を追加
  • 異なるドメインには送信できない。URLは相対パスで指定

最後にsendメソッドでリクエストを送信。
- openメソッドでPOSTにした場合は引数にリクエスト内容を指定
- openメソッドでGETにした場合はnull

POSTメソッドの場合

req.open('POST', 'helloAjax.php', true);
req.setRequestHeader('content-type',
  'application/x-www-form-urlencoded;charset=UTF-8');
req.send('name=' + encodeURIComponent(document.fm.name.value));

ContentTypeヘッダとしてapplication/x-www-form-urlencoded;charset=UTF-8を指定する。
またsendメソッドの引数にリクエスト内容を指定する。

レスポンスとしてjsonを受け取る場合

var data = eval('(' + req.responseText + ')');;

サーバサイドjson化したデータをresponseTextメソッドで受け取り、eval関数でコードとして変数に格納する。
この変数からDOMを操作して表示する。

jQueryでAjaxを記述

$('#btnsend').click(function(){
  $('#result').html('通信中...');
  // Ajax通信を開始
  $.ajax({
    url: 'yahooJson.php',
    type: 'GET',
    dataType: 'json',
    // フォーム要素の内容をハッシュ形式に変換
    data: $('form').serializeArray(),
    timeout: 5000,
    success: function(data){
      // 通信成功時の処理を記述
    },
    error: function(){
      // 通信失敗時の処理を記述
    }
  })
})

$.ajaxメソッドにより、ステータスの状態で分岐してコールバック関数を記述するのではなく、オブジェクトリテラル形式で指定できるようになる。
また、クロスブラウザ問題も気にする必要がない。

Ajax関連の便利なメソッド

  • $.get:HTTP GET通信
  • $.post:HTTP POST通信
  • $.getJSON:JSONデータの取得
  • $.getScript:スクリプトの取得

細かなオプションは指定できないが、それぞれの目的に特化してシンプルに実装できる。