jQuery Ajax を試してみる

jQuery は本当に便利なライブラリで、Ajax によるやりとりも簡単に行うことができます。XMLHttpRequest などブラウザが提供するオブジェクト使ってページ遷移のない、Ajax アプリケーションを実装するのは大変ですが、jQuery の ajax を使えばブラウザを意識しないですみます。

簡単な例

単純にHTMLページを読み込むなら

 

$('#something').load('page.html');

 

とやれば、HTMLをロードして表示できますし、HTTP GET/POST メソッドによってパラメータを渡す必要があるならば、$.get() や $.post() 関数も用意されています。さらに $.ajax() 関数を使えば送信結果を受け取るデータの種類の指定や、error, success, beforesend, complete といったコールバック関数で、それぞれに応じた処理を行うことができます。

 

$.ajax({
    url: "foo.php",
    data: "para1=xxx&para2=yyy",
    datatype: "xml",
    success: function(xml) {
        // 取得した xml データで何かする
    }
});

 

導入

まずは、インストールです。HTTP サーバーのアクセスできる場所へ jQuery を展開します。 CentOS の Apache のデフォルト設定を例に説明します。

ドキュメント ルート(/var/www/html/) の下に “lib/jquery/js” フォルダを作成します。

 

# mkdir /var/www/html/lib/jquery/js

 

jQuery ライブラリを http://jquery.com/ からダウンロードしてきます。

  1. 「Download (jQuery); 」ボタンをクリック
  2. jquery-1.8.3.min.js が表示されますので、これをファイルに保存し、前述の lib/jquery/js フォルダへ保存します。

 

- lib
  - jquery
    - js/
      jquery-1.8.3.min.js

 

JQuery を使用する Web ページの HEAD 部分に以下のライブラリを記述します。

 

<script type="text/javascript" src="lib/jquery/js/jquery-1.8.3.min.js"></script>

 

実装

郵便番号住所変換サービス」を使用した ajax のサンプルを作成してみます。

サービスの仕様は以下のとおりです:

リクエストURL: http://www.northwind.mydns.jp/samples/yubin/
HTTP メソッド: GET
アクション: getaddress
パラメータ:
zipcode: 郵便番号を指定。3桁以上の半角数字。
ハイフンは含みません。
option: 住所の分割オプション。
0: 分割なし (デフォルト)
2: 都道府県と住所の2分割
3: 都道府県、市区郡、町村域の3分割
format: 取得する住所データの形式。
csv: CSV形式 (デフォルト)
xml: XML形式
json: JSON形式
encode: 取得する住所データのエンコード。
sjis: Shift-JIS
utf8: UTF-8 (デフォルト)

例えば、http://www.northwind.mydns.jp/samples/yubin/getaddress/110001/3/csv/utf8 をクリックするとカンマ区切りの住所データがブラウザ内に表示されます。

郵便番号住所変換サンプル」や「郵便番号住所変換サンプル(地図連動)」 は入力した郵便番号をPOSTして、サーバー上で処理してページを送信してますが、同様のことをページ遷移をしないで実装できます。

この実装例では、フォーム上の「検索」ボタンがクリックされたときに、郵便番号と住所形式を上記 Web サービスにパラメータとして渡し、取得に成功したらテキストエリア (#result) に値をセットします。(下記サンプルのコードの赤字の部分)

 

$(function(){
  // 検索ボタンがクリックされた時のイベント
  $('#search').click(function(){
      // 入力された郵便番号を取得して、妥当かどうかの検査
      var zipcode = document.zipsearch.zipcode.value;
      
      if (zipcode.match(/^d{3}-?d{4}$/) ||
          zipcode.match(/^d{3}$/)) {
          var zip = document.zipsearch.elements['zipcode'].value;
          zip = zip.replace("-", "");

      // オプションの住所形式の判定
          var opt = 0;
          for (i = 0; i < document.zipsearch.opt.length; i++) {
              if (document.zipsearch.opt[i].checked) {
                  opt = document.zipsearch.opt[i].value;
                  break; // exit for.
              }
          }

          // ajax で送信、受信が成功した場合は受信結果を表示
          $.ajax({
            type: "GET",
            url: "http://www.northwind.mydns.jp/samples/yubin/getaddress/"
                 + zip + "/" + opt,
            dataType: "text",
            success: function (res) {
                $('#result').text(res);
            },
            error: function(xhr, exception) {
                if (xhr.status === 0) {
                    alert('接続なし.n ネットワークを確認してください.');
                } else if (xhr.status == 404) {
                    alert('要求したページが見つかりません. [404]');
                } else if (xhr.status == 500) {
                    alert('内部サーバー エラー [500].');
                } else if (exception === 'parsererror') {
                    alert('要求した JSON の解析に失敗.');
                } else if (exception === 'timeout') {
                    alert('タイムアウト.');
                } else if (exception === 'abort') {
                    alert('Ajax 要求が異常終了しました.');
                } else {
                   alert('予期しないエラー.n' + xhr.responseText);
                }
            }
          });
      } else {
          alert("郵便番号を3桁以上を入力してください。(例;123-1234, 1231234 または 123)");
          return false;
      }
      return true;
  });
});

 

動作確認

こちらで実際に確認できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です