技術の犬小屋

Webプログラミングを餌に生きる犬のメモ帳

仕事でjQueryを使っている。jQueryによるAjaxの使い方を覚えたのでメモしておく。
 

Ajaxとは

Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態である。
 

jQueryによるAjaxの使い方

Ajaxを使うときの大まかな流れ

jQueryでAjaxを使うときは以下のような流れで利用する。

  1. DOMでHTMLから要素を取得する。
  2. 取得したHTML要素に対してイベントを登録する。
  3. ユーザのアクションに応じてイベントが実行される。
  4. イベントの実行をトリガーにしてAjaxにより、通信・処理を行う。

 

簡単な例
$('#button1').click(function(){
  $.ajax({
    url: "ajax-test.html",
    dataType: "html",
    cache: false,
  }).done(function(data, textStatus) {
    // 成功したとき
    // data にサーバーから返された html が入る
  }).fail(function(xhr, textStatus, errorThrown) {
    // エラー処理
  });
});

 
$とは、jQueryという文字列の略記法である。すなわち、$記号を書くことによってjQueryへの命令を行うことが出来る。
 
('#button1')によってDOM操作を行い、Javascriptの呼び出し元のHTMLからid="button1"が指定されている要素を取得している。
 
.clickによってイベントの登録を行い、id="button1"の要素がクリックされた際にメソッド(function(){…})の呼び出しを行う。
 
メソッド内に記述されたAjaxの処理によって、サーバー上のajax-test.htmlの内容が取得され、data変数に格納される。
 
ajax-test.htmlの取得に成功した場合には、メソッドチェーンとして記述されたdone(function(data, textStatus) {…})が呼び出される。
 
ajax-test.htmlの取得に失敗した場合には、メソッドチェーンとして記述されたfail(function(xhr, textStatus, errorThrown) {…})が呼び出される。
 
メソッド内に記述されたAjaxの処理では、以下の3つのプロパティを指定している。この他にも多くのプロパティが用意されているので、詳しくはリファレンスを参照してほしい。

  1. url
  2. リクエストを送信するURLを指定する。初期値は、現在のページのURLとなる。例えば、今回はajax-test.htmlというファイルの内容を取得したいので、このように指定している。

  3. dataType
  4. サーバーから返されるデータの型を指定する。初期値はxml,json,script,htmlからjQueryがMIME typeを元に判別する。

  5. cache
  6. キャッシュを有効にするか否かをtrueもしくは、falseで指定する。初期値はtrue、ただし、dataTypeが’script’または’jsonp’の場合は、falseとなる。

 
 
以上
 
 
参考
Ajaxとは 【 Asynchronous JavaScript + XML 】 – 意味/解説/説明/定義 : IT用語辞典
Ajax – jQuery 入門
jQuery.ajax() | jQuery API Documentation

MacVimでノーマルモード時は日本語入力を無効にしたい arrow-right
Next post

arrow-left Gruntの使い方
Previous post