AJAXの簡易サンプルです。
解説
var httpRequest;
//I.E.の場合
if(window.ActiveXObject){
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
if(!httpRequest && window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
}
httpRequest.open('GET', './test.xml');
//ヘッダーを追加する。
httpRequest.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
//受信後の処理
httpRequest.onreadystatechange = function(){
//HTTPレスポンスが200 OKの場合のみ処理
if(httpRequest.readyState==4 && httpRequest.status == 200){
//指定したHTTPヘッダーを取得
//alert(httpRequest.getResponseHeader("Content-Type"));
//HTTPヘッダーを全部取得
//alert(httpRequest.getAllResponseHeaders());
//HTTPボディ内容をテキストとして表示
alert(httpRequest.responseText);
}
}
//リクエスト送信
httpRequest.send(null);
流れとしては、
1.HTTPRequestオブジェクト生成
2.open
3.送信前の設定(ヘッダーなど)
4.送信後のイベントハンドラ
5.send
・HTTPRequestオブジェクト生成
I.E.とその他ブラウザとクラスが異なります。
I.E. ：new ActiveXObject("Microsoft.XMLHTTP")
そのた：new XMLHttpRequest()
2.open
HTTPメソッドタイプ(GET,POST,HEAD)とURLを指定してオープンします。
httpRequest.open(method, url, sync);
3つめの引数は｢非同期で実行するか否か？」を設定します。通常はtrueで問題ない。
というのもfalseにした場合、ユーザビリティが低下します。
3.送信前の設定(ヘッダーなど)
HTTPヘッダーぐらいだと思います。
注意）open前に設定するとExceptionが発生します。
httpRequest.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
サーバーからのレスポンスのMIMEタイプを設定することができる。
overrideMimeType('text/xml');
※ただし、I.E.は未対応
やはりサーバー側でマイムタイプを設定しておいたほうがよい。
4.送信後のイベントハンドラ
送信前に定義しておきます。
httpRequest.onreadystatechange = function(){}
※とりあえず覚えておくメソッド、プロパティ
・.readyState
HTTPRequestオブジェクトの状態を表します。以下の通り
|
初期化されていない |
0 |
|
send()で通信データが送られていない |
1 |
|
send()は実行したがデータが来ない |
2 |
|
データ受信中 |
3 |
|
すべてのデータを受信 |
4 |
・.status、.statusText
HTTPレスポンスステータスを取得します。
statusTextはステータスを文字列説明
・.getResponseHeader("Content-Type")
引数で指定したHTTPレスポンスヘッダーを取得する。
・.getAllResponseHeaders()
HTTPレスポンスヘッダー全体を取得
・.responseText
HTTPレスポンスボディをテキストで取得
・responseXML
HTTPレスポンスボディ部をXMLで取得
5.send
HTTPリクエストを送信します。
httpRequest.send(null);
引数にHTTPボディを記載可能です。
'test1=hoge&test2=hoge2'
※補足
send時のパラメータは自力で作成する必要があります。値にはURIエンコードをかけましょう。
var value = encodeURIComponent(oldValue);
※補足2
AJAXでクッキーの内容を変更して、送信しても変更されないです。
JQueryでできるという話を聞きましたが未調査
PR
