今回は、jQueryでWebサーバーとデータ送受信を行う「Ajax」について、サンプルコードを交え基本的な所を詳しく記載していこうと思います。
Ajaxを利用するとWebページのユーザビリティの向上に役立つことと思います。標準のJavaScriptでAjaxを組み込みにはかなりの知識が必要ですが、jQueryではAjaxを比較的簡単に扱える機能が提供されています。
実際のWeb制作現場では、jQueryでAjaxを利用して、ブログのrssフィードを取得して、別のページに表示する際などの使用すると便利です。
という事で、それでは今回はッ、
上記について記載していこうと思います…。
Ajaxとは、WebブラウザとWebサーバーの間で、HTTP通信を利用した情報のやり取りをおこない、Webブラウザをリロードさせること無くコンテンツの更新が行える仕組みです。
標準のJavaScriptでAjaxを実装すると、クロスブラウザ対策などが必要になるためスクリプトが複雑になりがちです。しかし、jQueryは、Webブラウザの違いを全て吸収し、複雑なAjaxの処理を簡素化したメソッドを提供しているのでAjaxが扱いやすくなります。
jQueryでは、Ajaxを利用するためのメソッドがいくつかありますが、そのなかでも$.ajax()メソッドが基本となります。Webサーバーへのリクエスト送信からデータの取得までを$.ajax()メソッドで実行することができます。
オプションは下記のようにJSON形式で記述します。
| $.ajax({ |
| url:"sample.html", |
| success: function(data){ |
| $("div#sample").html(data); |
| } |
| }); |
オプションが長い場合は、下記のように一度変数に格納しておくことも可能です。
| ver options = { |
| type: "GET", |
| url:"sample.php", |
| data: {"post_code":"372-0852"}, |
| dataType: "text", |
| async: true, |
| error: function(xhr,status,errorThrown){ |
| alert("次のエラーが発生しました："+errorThrown.message); |
| }, |
| success: function(data,status){ |
| if(status == "success"){ |
| $("div#address").html(" "+data+" "); |
| } |
| } |
| }; |
| $.ajax(options); |
$.ajax()メソッドで利用可能なオプションは下記になります。
| オプション | 値 / 説明 |
|---|---|
| type | "GET"または"POST" |
| ・HTTP通信の種類を設定する。何の設定もしなければ"GET"になる。 | |
| ・"PUT"と"DELETE"を指定することもできるが、対応していないブラウザもある。 | |
| url | リクエスト送信先のURL |
| ・原則としてほかのドメイン内のURLは設定できない。 | |
| data | { プロパティ:値 } |
| ・リクエスト送信先URLへ送信するデータ。「プロパティ：値,プロパティ：値」のようにカンマ区切りで複数送信可能。 | |
| dataType | "text","html","xml","script","json","jsonp"のいずれか |
| ・リクエスト送信先URLから返されるデータ形式。何を設定するかは、Webサーバー側のプログラムの内容に依存。指定しない場合は、jQueryが自動的に判断。 | |
| <応答データ形式の内容> | |
| "text"：テキストデータ | |
| "html"：HTMLデータ | |
| "xml"：jQuerで処理可能なXMLデータ | |
| "script"：返されたデータをJavaScriptとして処理 | |
| "json"：返されたデータをJSONとして処理 | |
| "jsonp"：JSONPを介して返されたデータをJSONとして処理 | |
| async | trueまたはfalse |
| ・非同期通信をするか否かの設定。何もしなければtrue（非同期通信）となる。false（同期通信）に設定した場合は、リクエスト送信をおこなったあとサーバーからデータを受け取るまで、ブラウザをロックする。 | |
| success | function(返されたデータ,リクエスト結果,XMLHttpRequestオブジェクト){//通信完了時の処理を記述} |
| ・通信が完了した際に呼び出されるメソッド | |
| <[リクエスト結果]の内容> | |
| "success"：成功 | |
| "error"：失敗 | |
| "notmodifind"：更新されていない | |
| "timeout"：タイムアウト | |
| "parsererror"：返されたデータのパースエラー | |
| error | function(XMLHttpRequestオブジェクト,リクエスト結果,errorThrownオブジェクト){ //エラー発生時の処理の記述} |
| ・通信上のエラーが発生した際に呼び出されるメソッド |
$.ajax()メソッドは汎用的なメソッドですが、下記一覧のような、記述方法がより簡素化された、特定の処理の実をおこなうメソッドもあります。ただし、いずれもHTTP通信エラー発生時の処理を記述することができません。必要な場合は、$.ajax()メソッドを利用することをおすすめします。
| メソッド名 | 処理の内容 |
|---|---|
| $(セレクタ).load() | データを読みこみHTML要素へ追加する |
| $.get() | GETメソッドによりデータを読みこむ |
| $.post() | POSTメソッドによりデータを読みこむ |
| $.getJSON() | JOSN形式のデータを読みこむ |
| $.getScript() | JavaScriptファイルを読みこみ、実行する |
.load()メソッドはデータを読みこみHTML要素へ追加します。
リクエスト送信先URLの実態がHTMLの場合、対象URLと合わせて取得したいデータが記述されている要素（セレクタ）を指定することができます。
この例では、「/news/index.html」に記述されているid名「news」の内容を、id名「topics」の中に追加しています。
GETメソッドによりデータを読みこみます。
POSTメソッドでデータを読みこむ場合は、$.post()メソッドを利用します。記述方法は$.get()メソッドと同じになります。
| $.get("sample.php", |
| {"familyName":"姓","givenName":"名"}, |
| function(data,staus){ |
| $("#userid").html("会員番号「"+ data +"」です。"); |
| } |
| ); |
上記サンプルでは、氏名（"familyName"と"givenName"）をもとに会員番号を取得し、その内容を「#userid」を持つ要素の内容に設定しています。
「sample.php」は、氏名を渡すと会員番号をテキストで返すスクリプトを想定しています。
JSON形式のデータを読みこみます。
| $.getJSON("sample.php", |
| {"userid": 10105}, |
| function(data,staus){ |
| alert("登録されているアドレスは、"+ data.mail_address +"です。"); |
| } |
| ); |
Webサーバーから、ユーザー番号（userid）をもとにメールアドレスを取得し、その内容をアラートウィンドウで表示します。 「sample.php」は、会員番号を渡すと会員情報をJSON形式で返すスクリプトを想定しています。
JSONは、JavaScriptの記述をベースにしたデータ記述方式で、ActionScriptやPHPなどでも利用できるため、JSONを利用することで、多言語プログラムとのデータ連携が容易になります。
JavaScriptファイルを読みこみ、その直後に実行します。
| $.getScript("/js/sample.js",function(data,staus){ |
| alert("sample.jsの内容を実行しました。"); |
| }); |
第一パラメータで渡した「/js/sample.js」の内容を読みこみ、その直後にその内容が処理されます。 「/js/sample.js」の内容をテキストとして読みこみたい場合は、$.ajax()メソッドや$.get()メソッドを利用します。
Ajaxを利用する際には、JavaScriptライブラリの利用の有無にかかわらず、いくつかの注意点があります。次の2項目には注意が必要です。
Webサーバーからテキスト形式でデータを受信する場合は、HTMLの文字コードにかかわらず、受信するテキストデータの文字コードにはUTF-8を設定します。UTF-8以外の文字コードを利用すると、Webブラウザで受信したデータを表示する際に、日本語などのマルチバイト文字で文字化けが発生します。
また、英数字や記号といったアスキー文字以外の文字を利用すると、UTF-8でも文字化けするブラウザがあるので、なるべくURLをエンコードした状態で送受信をおこなうことをおすすめします。
Ajaxでアクセスできるリソースは、同一ドメイン内に限られています。これはセキュリティに配慮したもので、悪意のあるスクリプトによって、クッキーの情報などが盗まれないようにするためです。クロスドメインを実現するには、サーバーサイドのプログラムで対応するか、jQueryのプラグイン「Cross-domain ajax」を利用することになります。
といことで今回は、jQueryでWebサーバーとデータ送受信を行う「Ajax」について、サンプルコードを交え基本的な所を詳しく記載しました。
「Ajax」jQuery初心者の方には、多少ハードルが高く難しいことと思います。しかし、実際に使用することができると、同じドメイン内であれば使用することができますので、冒頭で記載したRSSフィードなども使用することが可能になります。随時更新をおこなうブログのフィードなどを利用して、色々な所に表示することができるので、ぜひとも覚えておいた方が良いスキルだと思います。
とりあえず、今回はここまで...。
お仕事のご依頼は下記より...、それではまた次回...。
