Ajax (Asynchronous JavaScript + XML) の基本的な手法を jQuery で実現する方法を学んでください。この記事では Ajax の基本的な処理として、リクエストを実行して、成功およびエラーのレスポンスを処理し、結果を構文解析する方法を、JSON (JavaScript Object Notation)、XML、HTML、および動的 PHP のデータ・セットそれぞれの場合で説明します。

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock は、1996年から契約 Web 開発者および設計者として、SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software、Fire Mountain Gems などの企業のプロジェクトを手掛けてきました。著書には『Ajax for Web Application Developers』(Sams)、『The ActionScript Migration Guide』(New Riders) があります。また、コラムニストおよびライターとしても、Peachpit.com、InformIT.com、Practical Web Design magazine などの数々の Web サイトや設計関連の雑誌で活躍しています。彼は、フォームと関数の融合を専門とする Web 設計およびソフトウェア開発会社、www.studiosedition.com の創始者でもあります。



2010年 9月 21日

Ajax が Web アプリケーションを拡張する素晴らしい手段であることに疑いの余地はありません。

けれども必要なコードを作成するのに、従来の開発手法よりも時間がかかる可能性があります。それは、動的なサーバー・サイドのデータ・セットを操作するコードの場合は尚更のことです。幸い jQuery の出現により、今や簡単かつ確実な方法で JavaScript と Ajax のコードを作成できるようになっています。jQuery で揃えている Ajax 関数を使用すれば、作成しなければならないコードは減ります。さらに、jQuery ではほとんどの状況に対処できるようにメソッドおよびイベント・ハンドラーが追加されているため、Ajax 開発が今までより遥かに簡単になります。

jQuery で作成しなければならないコードは、複雑な関数を開発しているとしても必要最小限で済むため、開発の時間は大幅に短縮されます。このことから、開発に厳しい期限が設定されている場合でも、Web サイトまたはアプリケーションの開発に Ajax を使用するという選択肢は、ますます現実的なものとなっています。

jQuery に馴染みがない方のために説明しておくと、jQuery は基本的に、JavaScript 開発を楽にするための JavaScript ライブラリーです。jQuery は作成する必要のあるコードを少なくします。それは、通常であればカスタム関数やオブジェクトを作成しなければならないような機能の多くが組み込まれているためです。jQuery ライブラリーの詳細およびダウンロードについては、「参考文献」に記載されているリンクにアクセスしてください。また、この記事のサンプル・コードを見るとわかるように、jQuery ライブラリーの最新バージョンは直接コードに組み込むことができます。この記事では、読者が JavaScript でのコーディングについて理解していることを前提とします。

従来の JavaScript による Ajax と jQuery による Ajax との比較

以前は、Ajax でリクエストを作成し、そのレスポンスを処理するには、冗長な JavaScript コードが大量に必要でした。以下は、リクエストを作成してレスポンスを処理するために必要だった作業です。

  • 使用しているブラウザーに基づいて、XMLHTTPRequest または ActiveXObject のどちらを使用するのかを判断します。
  • レスポンスを受け取るためのコールバック・イベントを設定します。
  • リクエストを開きます。
  • リクエストを送信します。
  • コールバックがトリガーされた時点で、readyState をチェックして、レスポンス・オブジェクトがアクセス可能な状態になっているかどうかを判断します。

リスト 1 に記載する JavaScript コードは、従来の Ajax リクエストを JavaScript 言語で作成する場合の典型的な例です。

リスト 1. 従来の Ajax リクエスト
<script type="text/javascript">
if(window.XMLHttpRequest) {
     request = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
     request = new ActiveXObject("MSXML2.XMLHTTP");
}

request.onreadystatechange = onResponse;
request.open("GET", “url for request”, true);
request.send(null);

function checkReadyState(obj) {
     if(obj.readyState == 0) { // Sending Request }
     if(obj.readyState == 1) { // Loading Response }
     if(obj.readyState == 2) { // Response Loaded }
     if(obj.readyState == 3) { // Response Ready }
     if(obj.readyState == 4) {
          if(obj.status == 200) {
               return true;
          }
          else if(obj.status == 404) {
               // File not found
          }
          else {
               // There was a problem retrieving the XML
          }
     }
}

function onResponse() {
     if(checkReadyState(request)) {
          // Handle the response with one of the following properties
          //alert(request.responseXML);
          //alert(request.responseText);
     }
}
</script>

表面下で jQuery が提供する関数は、従来の JavaScript コードと同じです。けれども jQuery が非常に優れているところは、このようなコードのほとんどを作成する手間を省いてくれるところです。従来の JavaScript コードは作成するのが難しいというわけではありません。問題なのは作成する量で、正直なところ若干煩わしい作業になりがちです。jQuery で同じコードをいかに簡単に作成できるかがわかれば、さらに煩わしいものに感じられるでしょう。リスト 2 に、jQuery による簡潔な Ajax リクエストを記載します。このコードの内容はリスト 1 と同様です。

リスト 2. jQuery による簡潔な Ajax リクエスト
<script type="text/javascript">
$.ajax({
     url: 'data/content.xml',
     success: function(xml) {
          // Parse the response
     }
});
</script>

ご覧のとおり、かなりの違いです。しかも、jQuery ではリクエストを行う度にこのコードをまるごと作成し直す必要はないので、さらに簡潔なコードになる可能性もあります。ajaxSetup というメソッドは、Ajax リクエストにデフォルトの設定値を適用するために使える優れたソリューションです。例えば POSTGET などのデフォルトのリクエスト・タイプを設定したい場合など、同じ URL に対して多数のリクエストを行う場合には、特にこのメソッドが重宝します。jQuery ライブラリーが組み込まれていれば、デフォルトの設定を適用するのは簡単です。一例として、リスト 3 のサンプル・コードを見てください。

リスト 3. ajaxSetup を使用したデフォルトの Ajax 値の設定
<script type="text/javascript">
$.ajaxSetup({
     url: 'url for request',
});
</script>

このサンプル・コードではリクエストにデフォルトの url を設定しているので、Ajax 呼び出しを作成する度に、url パラメーターを含める必要はありません。含めたとしても、そのパラメーターによってデフォルトの設定が上書きされるだけです。デフォルトとして設定できるパラメーターはいくつもあります。以下は、その一部です。

  • async
  • beforeSend
  • cache
  • contentType
  • data
  • dataFilter
  • dataType
  • global

すべてのパラメーターとその詳細については、「参考文献」に記載されているリンクにアクセスしてください。

jQuery には、リクエストのあらゆる段階を可能な限り制御できるようにする Ajax イベントもさまざまに用意されています。それらのイベントを使用すれば、リクエストを送信する前にデータを変更したり、リクエストの成功/失敗を判断したり、ローカルまたはグローバル・レベルでリクエストをモニターしたりすることができます。

  • リクエストが送信される前にトリガーされるイベント:
    • ajaxStart (グローバル)
    • beforeSend (ローカル。追加のヘッダーなどを設定して、XMLHTTPRequest を変更することができます)
    • ajaxSend (グローバル)
  • リクエストが成功した場合にトリガーされるイベント:
    • success (ローカル)
    • ajaxSuccess (グローバル)
  • リクエストが失敗した場合にトリガーされるイベント:
    • error (ローカル)
    • ajaxError (グローバル)
  • 成功したかどうかに関わらず、リクエストの送信が完了するとトリガーされるイベント:
    • complete (ローカル)
    • ajaxComplete (グローバル)
  • 処理が完了していないリクエストがなくなった時点でトリガーされるイベント:
    • ajaxStop (グローバル)

リクエストで XML を要求してレスポンスを処理する場合

従来の JavaScript による Ajax リクエストと jQuery による Ajax リクエストの基本的な違いを理解できたところで、次は一歩先に踏み込んで、リクエストで実際の XML ファイルを要求する作業に取り掛かります。この例のリクエストで要求する XML ファイル (リスト 4 を参照) には、この記事に対応する headerdescriptionsourceUrl の各要素があります。これらの要素を使って、タイトル、説明、そしてダウンロード可能なソースコードへのハイパーリンクを表示する単純な HTML ページをレンダリングします。

リスト 4. Ajax リクエストで jQuery を使用して取得するサンプル XML
<?xml version="1.0" encoding="UTF-8"?>
<content>
     <header>Improving Ajax Development with jQuery</header>
     <description>It's no surprise that Ajax is a great way to enhance a web 
     application. However, sometimes the code that needs to be written can take more 
     time than traditional development techniques, especially when you're interacting 
     with dynamic server-side data sets. Luckily, with the introduction of jQuery there's 
     now a quicker and more robust way to write JavaScript and Ajax. The suite of Ajax 
     functionality available through jQuery makes Ajax development much easier than the 
     past by allowing you to write less code and by lending additional methods and event 
     handlers to cover any situation. The amount of code that needs to be written with 
     jQuery is very minimal, even when developing complex functionality, so development 
     is a lot faster. With these tools Ajax is becoming a more viable option when 
     developing a website or application, even on a tight deadline.</description>
     <sourceUrl>
     http://articles.studiosedition.com/ibm/improving_ajax/ImprovingAjaxDevWithJQuery.zip
     </sourceUrl>
</content>

この XML をリクエストで取得して構文解析するために最初に必要となるのは、jQuery ライブラリーを組み込むことです。理想を言えば、カスタム・コード用の別個の JavaScript ファイルを組み込みたいところですが、この記事ではサンプル HTML に JavaScript コードを組み込みます。すべてのページ要素が完全にロードされて JavaScript 言語で使用できることを確実にするには、ページのロードが完了した時点で Ajax リクエストを実行しなければなりません。そのために使用できるのは、jQuery の単純なイベントである ready です。このイベントを document オブジェクトに適用してください。こうすることで、ready イベントがトリガーされると対応する関数が呼び出され、それによって Ajax リクエストを開始するというプロセスになります。この記事の他の例でも、このプロセスを使用してページ内のすべての要素に確実にアクセスできるようにします。

ページの準備が完了したら、jQuery を使用して Ajax リクエストを作成します。リスト 5 を見るとわかるように、このリクエストは前のセクションに記載したリクエストと似ていますが、今回は成功レスポンスとエラー・レスポンスの処理を行っています。

リスト 5. Ajax リクエストで jQuery を使用して XML を要求し、レスポンスを構文解析する
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Improving Ajax Development with jQuery</title>
     <script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
     </script>
     <script type="text/javascript">
     $(document).ready(function(){
     $.ajax({
          url: 'data/content.xml',
          success: function(xml) {
          var header = description = sourceUrl = '';
          var content = xml.getElementsByTagName('content');
          for(var i=0; i<content.length; i++) {
               for(var j=0; j<content[i].childNodes.length; j++) {
                    switch(content[i].childNodes[j].nodeName) {
                    case 'header':
                         header = content[i].childNodes[j].firstChild.data;
                         break;
                    case 'description':
                         description = content[i].childNodes[j].firstChild.data;
                         break;
                    case 'sourceUrl':
                         sourceUrl = content[i].childNodes[j].firstChild.data;
                         break;
                    default:
                         //
                    }
               }
          }
     $("body").append('<h1>'+header+'</h1>');
     $("body").append('<p>'+description+'</p>');
     $("body").append('<a href="'+sourceUrl+'">Download the source</a>');
     },
     error: function(xhr, status, err) {

         // Handle errors
     }
     });
     });
     </script>
</head>

<body>
</body>
</html>

success イベントが受け取る引数には、datatextStatus、および XMLHttpRequest の 3 つがありますが、この記事で使用するのは、data だけです。上記の例では、このパラメーターに xml という名前を付けているので、XML データがレスポンスとして返されるということを簡単に判断することができます。先のリストに記載した XML ファイルから、レスポンスには headerdescriptionsourceUrl が要素として含まれていることを想定できることがわかります。そこで、ファイル内の子要素を繰り返し処理し、この 3 つの要素の値をそれぞれに対応する変数に割り当てます。すべての変数に値が割り当てられたら、各変数を HTML ページの本体に追加し、基本フォーマットを適用します。これで、データは HTML としてレンダリングされます。リクエストが失敗した場合には、error イベントがトリガーされます。ここでは使用していませんが、このイベントによって、XMLHttpRequesttextStatuserrorThrown という 3 つのパラメーターが提供されます。XMLHttpRequest パラメーターは実際のオブジェクト、textStatus は発生したエラーのタイプを説明するストリング、そして errorThrown パラメーターはオプションの例外オブジェクトです。


リクエストで JSON を要求してレスポンスを処理する場合

JSON でのプロセスは、XML をリクエストする場合と同様です。主な違いは、dataType パラメーターを該当する値に設定するところ、データを構文解析するところ、そして Ajax リクエストの処理を簡潔に表現した (通常の jQuery Ajax リクエストの代わりに使用できる) メソッドを追加するところにあります。このセクションでは、この 3 つの違いをすべて説明します。

リスト 6 に記載するサンプル JSON ファイルには、リスト 4 の XML ファイルと同じデータが含まれています。最終目的は、このデータを使用して同じ HTML ファイルをレンダリングすることです。覚えておく必要がある重要な点は、必ず JSON を RFC に厳密に準拠したものにすることです。不正な形式の JSON は拒否されて構文解析エラーがスローされます。

リスト 6. サンプル・リクエストで取得する JSON コード
{"content":
     {
     "header": "Improving Ajax Development with jQuery",
     "description": "It's no surprise that Ajax is a great way to enhance a web 
     application. However, sometimes the code that needs to be written can take more 
     time than traditional development techniques, especially when you're interacting 
     with dynamic server-side data sets. Luckily, with the introduction of jQuery there's 
     now a quicker and more robust way to write JavaScript and Ajax. The suite of Ajax 
     functions available through jQuery makes Ajax development much easier than the 
     past by allowing you to write less code and by lending additional methods and event 
     handlers to cover any situation. The amount of code that needs to be written with 
     jQuery is very minimal, even when developing complex functions, so development 
     is a lot faster. With these tools Ajax is becoming a more viable option when 
     developing a website or application, even on a tight deadline.",
     "sourceUrl": 
"http://articles.studiosedition.com/ibm/improving_ajax/ImprovingAjaxDevWithJQuery.zip"
     }
}

リクエストを作成して JSON レスポンスを構文解析するには、XML での例と同じように HTML をセットアップする必要があります。つまり、jQuery ライブラリーを組み込み、それから ready イベントにカスタム・コードを含めるということです。リスト 7 の Ajax リクエストでは、新しく dataType パラメーターが使用されていることがおわかりかと思います。このパラメーターを使用することで、JSON レスポンスを要求していることをjQuery に知らせ、簡単に構文解析できる JavaScript オブジェクトが返されるようにします。jQuery が裏で使用するのは parseJSON 関数です。この関数は整形式 JSON ストリングを引数に取り、構文解析した結果の JavaScript オブジェクトを返します。つまり、jQuery は JSON データをリクエストで要求し、受け取った JSON データを JavaScript オブジェクトに変換し、その JavaScript オブジェクトをレスポンスとして返すので、必要となる操作は唯一、オブジェクトにアクセスすることだけです。このプロセスによって、カスタム関数と追加のコードを作成する手間が省かれます。

リスト 7. Ajax リクエストで jQuery を使用して JSON を要求し、レスポンスを構文解析する
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Improving Ajax Development with jQuery</title>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $.ajax({
          url: 'data/content.js',
          dataType: 'json',
          success: function(js) {
          $("body").append('<h1>'+ js.content.header+'</h1>');
          $("body").append('<p>'+ js.content.description+'</p>');
          $("body").append('<a href="'+ js.content.sourceUrl+'">Download the source</a>');
     },
     error: function(xhr, status, err) {
          // Handle errors
     }
     });
});
</script>
</head>

<body>
</body>
</html>

JSON を JavaScript オブジェクトに変換してから構文解析するという処理は、JavaScript オブジェクトのプロパティーと関数にドット表記を用いてアクセスする処理と同様です。リスト 8 の success イベントの data パラメーターには、リクエストの対象が JavaScript オブジェクトであることが容易にわかるように js という名前が付いています。js オブジェクトは JSON ファイルと同様の構造をしているため、content オブジェクトにアクセスできれば、content オブジェクトに含まれる headerdescriptionsourceUrl にアクセスすることができます。HTML をレンダリングするには XML の例と同じく、この 3 つの要素に単純なマークアップを適用して HTML ページの <body> 要素に追加します。

別の方法として、リクエストで JSON を要求する処理を簡潔に表現した getJSON というメソッドを使用することもできます。このメソッドは、GET メソッドを使ってサーバーから JSON データをロードします。リスト 8 に、上記の JSON を要求するリクエストを、getJSON メソッドを使用して実行する場合のコードを示します。

リスト 8. リクエストで getJSON を使用して JSON データを要求し、レスポンスを構文解析する
<script type="text/javascript">
$(document).ready(function(){
	$.getJSON('data/content.js', function(js) {
	$("body").append('<h1>'+ js.content.header+'</h1>');
    $("body").append('<p>'+ js.content.description+'</p>');
$("body").append('<a href="'+ js.content.sourceUrl+'">Download the source</a>');
	});
});
</script>

リクエストで HTML を要求してレスポンスを処理する場合

リクエストで要求する最後の静的データ・セットは HTML です。リスト 9 に、これまでの例で生成した HTML を記載します。

リスト 9. Ajax リクエストで jQuery を使用して取得するサンプル HTML
<h1>Improving Ajax Development with jQuery</h1>
<p>It's no surprise that Ajax is a great way to enhance a web application. 
However, sometimes the code that needs to be written can take more time than traditional 
development techniques, especially when you're interacting with dynamic server-side data 
sets. Luckily, with the introduction of jQuery there's now a quicker and more robust way 
to write JavaScript and Ajax. The suite of Ajax functions available through jQuery 
makes Ajax development much easier than the past by allowing you to write less code and 
by lending additional methods and event handlers to cover any situation. The amount of 
code that needs to be written with jQuery is very minimal, even when developing complex 
functions, so development is a lot faster. With these tools Ajax is becoming a more 
viable option when developing a website or application, even on a tight deadline.</p>
<a href="http://articles.studiosedition.com/ibm/
    improving_ajax/ImprovingAjaxDevWithJQuery.zip">
Download the source
</a>

HTML の場合、構文解析をしなくてもよいため、おそらく最も扱いやすいレスポンス・タイプでしょう。HTML を要求するリクエストをセットアップするには、これまでの例と同じように jQuery ライブラリーを組み込み、ready イベント内にカスタム JavaScript コードを追加するところから始めます。JSON の例と同じく、リスト 10 のコードでも dataType パラメーターを使用していますが、今回は値が html に設定されています。これで jQuery は、前の例でのように XML やJavaScript オブジェクトを返すのではなく、単なるテキストとして HTML を返すことになります。この関数は、単なるテキストを返す responseText プロパティーを使用した従来の JavaScript による Ajax リクエストと似ています。HTML でもう 1 つ便利な点は、スクリプト・タグが HTML 結果セットに含まれている場合には、HTML ページに追加される際にそのスクリプト・タグが評価されることです。したがって HTML データがページに追加された後に実行される JavaScript コードを追加で用意することができます。

success イベントと error イベントを適用している点、そして data パラメーターには実際のデータ型に応じた名前 (この例では html) を付けて、簡単に識別できるようにしている点は、これまでの例と変わりありません。けれども HTML データは構文解析する必要がないので、あとはそのまま単純に HTML ページの本体に HTML データを追加すればよいのです。

リスト 10. Ajax リクエストで jQuery を使用して HTML を要求し、レスポンスを構文解析する
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Improving Ajax Development with jQuery</title>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
     $.ajax({
          url: 'data/content.html',
          dataType: 'html',
          success: function(html, status, xhr) {
               $("body").append(html);
          },
          error: function(xhr, status, err) {
               // Handle errors
          }
     });
});
</script>
</head>

<body>
</body>
</html>

データをサーバーに送信する場合

これまでの説明で、さまざまな静的データの処理は習得できたはずなので、今度は動的データの処理を行います。ここで説明する例では、サーバー・サイドの言語として PHP を使用してレスポンスを生成しますが、この類のプロセスを作成するには、どのサーバー・サイドの言語を使用しても構いません。通常、このプロセスは、データベースから特定のパラメーター (ユーザー ID など) に基づいてデータを取得する場合に使用します。この例では、「リクエストで XML を要求してレスポンスを処理する場合」のセクションで使用したような XML データ・セットを単純に返します。ただし PHP の場合、データを返すためには特定のパラメーターが必要です。

リスト 11 が、Ajax を使用したリクエストで要求することになる PHP コードです。最初に、このコードが返すデータのコンテンツ・タイプとして、UTF-8 文字セットを使用する XML が指定されています。XML データを返す要件となっているのは、POSTsecret という名前のパラメーターが指定されていて、その値が ajax であることです。これらの要件が満たされていない場合、PHP はデータを返しません。したがって、リクエストを作成するときには、ajax を値に持つ secretPOST で送信して、確実に XML データ・セットを取得できるようにする必要があります。

リスト 11. Ajax リクエストで要求するサンプル PHP
<?php

header("Content-Type: application/xml; charset=UTF-8");

if(isset($_POST['secret']) && $_POST['secret'] == 'ajax')
{
     echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>
     <content>
     <header>Improving Ajax Development with jQuery</header>
     <description>It's no surprise that Ajax is a great way to enhance a web 
     application. However, sometimes the code that needs to be written can take more 
     time than traditional development techniques, especially when you're interacting 
     with dynamic server-side data sets. Luckily, with the introduction of jQuery there's 
     now a quicker and more robust way to write JavaScript and Ajax. The suite of Ajax 
     functions available through jQuery makes Ajax development much easier than the 
     past by allowing you to write less code and by lending additional methods and event 
     handlers to cover any situation. The amount of code that needs to be written with 
     jQuery is very minimal, even when developing complex functions, so development 
     is a lot faster. With these tools Ajax is becoming a more viable option when 
     developing a website or application, even on a tight deadline.</description>
     <sourceUrl>
     http://articles.studiosedition.com/ibm/improving_ajax/ImprovingAjaxDevWithJQuery.zip
     </sourceUrl>
     </content>";
}

?>

リスト 12 のコードは、urltype、および data パラメーターを除けば、元の XML の例と同様に、jQuery ライブラリーを組み込んでから、ready イベントの処理にカスタム JavaScript コードを含めています。元の XML の例と異なる点は、まず、url パラメーターの値が変更されていて、今回は上記で説明したコードが含まれる PHP ファイルを要求していることです。次に異なる点として、type パラメーターが POST に設定されているため、PHP ファイルはこの正しい HTTP メソッドを使用して送信されたデータを受け取ることになります。そして 3 つ目の異なる点は、data パラメーターが secret=ajax に設定されていることです。これはクエリー・ストリングのフォーマットで、PHP の $_POST 関数によってアクセスすることができます。

リスト 12. Ajax リクエストで jQuery を使用して動的データを要求し、レスポンスを構文解析する
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Improving Ajax Development with jQuery</title>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
     $.ajax({
          url: 'data/content.php',
          type: 'POST',
          data: 'secret=ajax',
          success: function(xml) {
               var header = description = sourceUrl = '';
               var content = xml.getElementsByTagName('content');
               for(var i=0; i<content.length; i++) {
               for(var j=0; j<content[i].childNodes.length; j++) {
               switch(content[i].childNodes[j].nodeName) {
               case 'header':
                    header = content[i].childNodes[j].firstChild.data;
                    break;
               case 'description':
                    description = content[i].childNodes[j].firstChild.data;
                    break;
               case 'sourceUrl':
                    sourceUrl = content[i].childNodes[j].firstChild.data;
                    break;
               default:
                    //
               }
          }
          }
          $("body").append('<h1>'+header+'</h1>');
          $("body").append('<p>'+description+'</p>');
$("body").append('<a href="'+sourceUrl+'">Download the source</a>');
          },
          error: function(xhr, status, err) {
               // Handle errors
          }
     });
});
</script>
</head>

<body>
</body>
</html>

このように、jQuery の data パラメーターはさまざまな可能性を与えてくれます。このサンプル・コードからわかるように、jQuery とサーバー・サイドのプログラミング言語との間では、変数と値を交換するだけでなく、情報をやり取りするのも非常に簡単です。可能性はまさに無限です。しかも jQuery によってさらに簡単に実現することができます。


まとめ

jQuery ライブラリーを使用することで Ajax 開発が遥かに簡単になるとともに、少ないコードで詳細な制御が可能になり、Ajax 開発が改善されることは、容易に理解できるはずです。こうした改善は、大量のコードを作成したり、期限を延長したりせずに、複雑な Ajax 対応アプリケーションを素早く構築するための基礎となります。この記事に記載したサンプル・コードを見ただけでも、jQuery を利用すれば複雑な Ajax の対話をたちどころに作成するのが、いかに手早く簡単に実現できるかが明らかです。それはたとえ複数のプログラミング言語を使用した場合でも言えることです。


ダウンロード

内容ファイル名サイズ
Sample Ajax scripts used in this articleImprovingAjaxDevWithJQuery.zip12KB

参考文献

学ぶために

  • jQuery を使って Ajax 開発を単純化する」(developerWorks、2007年4月) を読んで、jQuery の原理、機能、関数について詳しく学んでください。
  • Ajax resource center で Ajax プログラミングについて詳細を学んでください。
  • jQuery サイトには jQuery ライブラリーに関する情報が豊富に揃っています。
  • ajaxSetup を使用してデフォルト値を設定できるパラメーターの完全なリストを見てください。
  • Web development ゾーンでは、多種多様な Web ベースのソリューションを話題にした記事を揃えています。
  • IBM Technical events and webcasts: developerWorks の Technical events and webcasts で最新情報を入手してください。
  • developerWorks on-demand demos: developerWorks の on-demand demos で、初心者向けの製品のインストールおよびセットアップから熟練開発者向けの高度な関数に至るまで、さまざまに揃ったデモを見てください。

製品や技術を入手するために

  • Google から、jQuery の最新バージョンを直接組み込んでください。
  • IBM 製品の評価版をダウンロードするか、あるいは IBM SOA Sandbox のオンライン試用版で、DB2®、Lotus®、Rational®、Tivoli®、および WebSphere® などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=556064
ArticleTitle=jQuery によって Ajax 開発を改善する
publish-date=09212010