Ajaxの操作は、カーネル/ Ajax.jsファイルにあるAjaxクラスを通じて実装されます。
Ajaxクラスは、基本的なルーチン操作を処理します。
-XmlHttpRequestリクエストの作成
-要求データ内の特殊文字の変換
-サーバーへのリクエストの作成と送信
-サーバーからの応答を受け入れる
より便利な作業のために、クラスも使用されます：
-XML-XMLでの作業を容易にします
-FormsInterface-HTMLフォームを操作するため。
フォームとFormsInterface
簡単なHTMLフォームを作成してみましょう。 たとえば、これをフィードバックフォームとします。
< form id ="feedback" method ="post" onsubmit ="return send(this)" >
< fieldset >
< ul >
< li >
< label for ="name" > Name: </ label >
< input id ="name" name ="name" />
</ li >
< li >
< label for ="email" > Email: </ label >
< input id ="email" name ="email" />
</ li >
< li >
< label for ="message" > Message: </ label >
< textarea id ="message" name ="message" cols ="40" rows ="8" ></ textarea >
</ li >
</ ul >
< button type ="submit" > Submit </ button >
</ fieldset >
</ form >
* This source code was highlighted with Source Code Highlighter .
onsubmitイベントでは、フォームはsend関数を呼び出し、引数として自身への参照を渡します。 送信機能では、動作します。 まず、フォームからデータを取得する必要があります。 DOM拡張FormsInterfaceは、フォームからデータを取得するための便利なメソッド：formを提供します。 getData （）、ここでformはフォーム自体です。 getData （）メソッドは、フォームからデータを連想配列として返します。
function send(form) {
var data = form.getData();
// data = {'name': 'Alice', 'email': 'alice@example.com', message: 'Hello world!'}
return false ;
}
* This source code was highlighted with Source Code Highlighter .
AjaxとXML
Ajaxクラスを使用するには、接続する必要があります。
include( 'mohawk.kernel.Ajax' );
* This source code was highlighted with Source Code Highlighter .
フォームデータを送信するには、Ajaxリクエストを作成する必要があります。
var request = new Ajax( 'test.xml' , Ajax.METHOD_POST);
* This source code was highlighted with Source Code Highlighter .
Ajaxクラスのコンストラクターは引数を取ります。リクエストが送信されるアドレスとHTTPメソッドです。 メソッドが指定されていない場合、リクエストはGETメソッドによって送信されます。 クラスを通じて、通常のGETおよびPOSTリクエストだけでなく、PUT、DELETE、HEAD、OPTIONSも送信できます。 後者の場合、対応するX-Request-Methodヘッダーを送信して、POSTを介してリクエストをエミュレートすることができます。 つまり、たとえば、PUTリクエストはPOST経由で送信されますが、ヘッダーはX-Request-Method：PUTになります。 これは、何らかの理由でGETおよびPOST以外の要求を送信できない場合に必要です（たとえば、KerioファイアウォールはHTTP DELETEメソッドをブロックします）。
したがって、リクエストを送信するには、 request.send （data）メソッドを呼び出す必要があります。このメソッドは、送信されたデータを連想配列として引数として受け取ります。 例：
request.send({ 'a' : 1, 'b' : 2}); // a=1&b=2
* This source code was highlighted with Source Code Highlighter .
ajaxリクエストを送信関数に追加します。
function send(form) {
var request = new Ajax( 'test.xml' , Ajax.METHOD_POST);
var data = form.getData();
request.send(data);
return false ;
}
* This source code was highlighted with Source Code Highlighter .
send （）関数が呼び出されると、フォームデータがサーバーに送信されます。 ただし、サーバーがこのデータを正常に受信したことを確認する必要があり、より複雑なアプリケーションでは、サーバーからの応答を受け入れる必要もあります。 これを行うには、サーバーから応答を受信したときに呼び出されるハンドラー関数を定義します。 ハンドラーはrequest.responseHandlerプロパティを介して設定されます。
function send(form) {
var request = new Ajax( 'test.xml' , Ajax.METHOD_POST);
request.responseHandler = function (request) {
alert( 'Tada!' );
}
var data = form.getData();
request.send(data);
return false ;
}
* This source code was highlighted with Source Code Highlighter .
test.xmlファイルを作成して、サーバーをエミュレートします。 サーバーがすべてがうまくいったことを私たちに伝え、メッセージDoneを表示するとします：
<? xml version ="1.0" encoding ="UTF-8" ? >
< data >
< status > ok </ status >
< message > Done </ message >
</ data >
* This source code was highlighted with Source Code Highlighter .
フォームをテストすると、送信後にアラートボックス「Tada！」が発行されます。
ハンドラーを複雑にしましょう。 サーバーの応答、つまりステータスとメッセージを取得したいのです。 設定したrequest.responseHandler関数では、引数にajaxリクエストへのリンクrequestが渡されます。 サーバー応答を受信した後、要求オブジェクトにはrequest.dataプロパティがあり、サーバーからのデータが含まれます。 XMLオブジェクトは自動的にXML応答を解析し、その結果、 request.dataにはサーバー応答の連想配列があります：{'status'： 'ok'、 'message'： 'Done！'}
function send(form) {
var request = new Ajax( 'test.xml' , Ajax.METHOD_POST);
request.responseHandler = function (request) {
var response = request.data;
alert( 'Status: ' + response.status + ', message: ' + response.message);
}
var data = form.getData();
request.send(data);
return false ;
}
* This source code was highlighted with Source Code Highlighter .
ジョンソン
多くの開発者はXMLよりもJSONを好みます。 たとえば、サーバーの応答は次の形式（ test.js ）になります。
{
status: 'ok' ,
message: 'Done!'
}
* This source code was highlighted with Source Code Highlighter .
JSONデータを受け入れるには、次の2行のみを変更する必要があります。
function send(form) {
// test.xml test.js
var request = new Ajax( 'test.js' , Ajax.METHOD_POST);
// - 'json'
request.type = Ajax.TYPE_JSON;
request.responseHandler = function (request) {
alert( 'Tada!' );
}
var data = form.getData();
request.send(data);
return false ;
}
* This source code was highlighted with Source Code Highlighter .
例からわかるように、Ajaxクラスを使用すると、送受信されるデータの形式から完全に抽象化できます。 アプリケーションのロジックを変更せずにXMLとJSONを使用できます。
Ajaxリクエストのデバッグ
Ajaxを使用してアプリケーションを開発する場合、クエリをデバッグする必要がよくあります。 何がどこに行き、そこから何が来たかを見る必要があります。 Firefoxにはこれらの目的のためのすばらしいファイアウォールがあり、OperaにはWeb開発者向けの組み込みコンソールがあります。 Chrome 2のベータ版はAjaxリクエストを表示できるようです。 しかし、IEでは、通常どおり、デバッグで問題が発生します。
Mohawkデバッグコンソールを使用して、Ajaxがサーバーから送信したリクエストとレスポンスを確認できます。 コンソールは非常に簡単に接続されます：
include( 'mohawk.UI.Console' );
var Console = new Mohawk.UI.Console();
Console.regKey();
document .addLoader( function () {
Console.append();
});
* This source code was highlighted with Source Code Highlighter .
コンソールログの例：
Ajax query sent to: test.xml
Data:
name:Alice
email:alice@emaxmple.cmo
message:Hello world!
Query: name=Alice&email=alice@emaxmple.cmo&message=Hello world!
Ajax query received from: test.xml
Data:
<?xml version="1.0" encoding="UTF-8"?>
<data>
<status>ok</status>
<message>Done</message>
</data>
コンソール操作とサンプルフォームを表示する
例付きのMohawkをダウンロードする
Mohawkの紹介とJSテンプレートについても読むことができます。