今回は、jQueryのAjaxとAjaxリクエストについての最初の表にあるAjax Requests の分類の中で ふたつめの表のメソッドajax( options )について、 ajax( options ) のオプションリストの中から、いくつかを紹介します。

ajax( options )は前回説明した通り、HTTP通信でページを読み込みむ、jQueryにおける低レベルのAjax実装です。( $.getや $.postなどその他のメソッドのベースとなっています)

jQueryの取得などについては下記リンクをご参照ください。

ajax( options ) のasync

第1引数で渡すoptionsは、これまでに紹介した、たとえば、 animate( params ) メソッドの引数paramsなどと同様に、オブジェクトリテラルで、たとえば、{url:"http://example.com/",async:true} などのように、プロパティ名と値のペアを「:」で区切り、「,」で接続したオブジェクトとして渡します。

今回から、この引数optionsのプロパティを順に確認していきますが、まず最初は、asyncです。asyncは、Ajaxの非同期リクエストのフラグです。asyncプロパティを省略するか、または、trueで非同期、falseで同期となります。

非同期async:trueでAjaxリクエストを出すと、サーバーのレスポンスを待たずに、すぐに次の処理を実行できます。 同期async:falseならサーバーのレスポンスを待ってから次の処理を実行します。

では、下記ふたつのサンプルボタンを押してみてください。

【同期sync】
【非同期async】
 


ボタンクリックで、サーバーに置いてあるファイルを$.ajaxメソッドで読み込み、その中身「--Data from Server.--」を表示すると同時に、$.ajaxメソッドの直後の行で文字「$.ajax直後の行」を出力するという動作を、同期・非同期で比較します。

そこで、上記のふたつのサンプルボタンを押すと、結果は次の動作になります。

【同期sync】では、最初に「--Data from Server.--」(サーバーからのデータ)が表示されてから「$.ajax直後の行」が表示されます。

【非同期async】では、最初に「$.ajax直後の行」が表示されてから、「--Data from Server.--」が表示されます。

つまり、【非同期async】では、サーバーからのデータの到着を待たずに次の行が実行され、【同期sync】では、到着するまで動作をロックして待ち、到着後に次の行が実行されるというわけです。

ソースを見てみましょう。
<div>
  <p>
  <button id="sync">sync</button>
  <button id="async">async</button>
  </p>
  <div id="su1">【同期sync】</div>
  <div id="su2">【非同期async】</div>
  <div id="msg"></div>
</div>

<script type="text/javascript">
 jQuery(function($){

   var url="./test1.txt";

   $("#sync")
     .click(function () {

       $.ajax({
         async:false,
         url: url,
         success: function(msg,textStatus){  
           $("#su1").append(msg);
         }
       });

       $("#su1").append("$.ajax直後の行");

     });

   $("#async")
     .click(function () {

       $.ajax({
         async:true,
         url: url,
         success: function(msg,textStatus){
           $("#su2").append(msg);
         }
       });

       $("#su2").append("$.ajax直後の行");

     });


 });</script>
ソースを簡単に説明してみます。

jQuery(function($){コード})は、ページ読み込み後、DOM準備完了したらコード部分を実行します。

var url="./test1.txt";は、Ajaxで読み込むファイルのURL。

$("#sync").click(function () {コード})は、ID名がsyncの要素クリックでコード部分が実行されますが、ここで、同期$("#sync").clickと非同期$("#async").clickのふたつのブロックを用意しています。

そのclickの中で(つまり要素がクリックされると)、 $.ajax(引数)メソッドで引数のオプションに従ったAjaxリクエストが実行されます。

そして、この引数内の、asyncプロパティが今回試している同期false・非同期trueの設定部分です。

この$.ajaxメソッドの直後の行の $("#su1").append("$.ajax直後の行"); は、文字列「$.ajax直後の行」をID名su1の要素へ追記しますが、この行の実行について、サーバーからの実行待ちをするかどうかが、今回のサンプルのポイントというわけです。

ちなみに、引数内のurlとsuccessは後日再度取り上げますが、urlはAjaxのリクエスト先URLで、successはレスポンス取得後に実行されるコールバック関数です。


では、次ページではoptions.beforeSend を試します。