教科書「Ajax 逆引きレファレンス」
第一章「非同期通信処理」についてのまとめ
ここでは prototype.jsなどのライブラリは使わずに、
プレーンのjavascriptの通信方法を行っています。
●サーバと通信を行うのに必要なオブジェクトの作成
ブラウザの種類、バージョンより使用するオブジェクトの
種類が異なる
・XMLHttpRequest Object = new XMLHttpRequest();
I E7以降、FireFox、Safari、Operaで使用される
・ActiveXObject Object =
new ActiveXObject( [ "Msxml2.XMLHTTP" | "Microsoft.XMLHTTP" ] );
IE7より前に対応
ある程度のブラウザに対応できるよう try,catchを使用し、
オブジェクトを作成するとよい
Object = null;
try{
var Object = new XMLHttpRequest();
}catch(e){
try{
Object = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
Object = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
●作成されたオブジェクトを使って実際に通信する
ここからは、XMLHttpRequest ActiveXObjectに
関係なく、共通したやり方
・Object.onreadystatechange
ブラウザからリクエストを送信、帰ってきたレスポンス
を受け取ったときの処理を行う
・Object.open( ["get"|"post"], URL, [true|false] );
指定したURLにコネクションを確立する
引数1 postかgetの指定
引数2 URL, このHTMLファイルから相対指定のファイルも可能
引数3 非同期通信を行うか 非同期 true 同期 false
getの場合 クエリ文字列をURLに指定する
例 sample.php?xxxx=val1&yyyyy=val2
postの場合 付加データはsend()を使用して送る
例 Object.send( "xxxxx=val1&yyyyy=val2");
・Object.send()
指定したURLに送信を行う。
●サーバからの応答とステータスの種類
Object.readyState
現在 サーバとの通信状況がどのように
なっているかを示す
0 open()が呼ばれていない (uninitialize)
1 open()が呼ばれたがsend()が呼ばれていない (loading)
2 HTTPレスポンスを受け取った (loaded)
3 データの一部を受け取った (interactive)
4 すべてのデータの読み込みが完了した (complete)
Object.status
サーバからの応答コードを示す
200 リクエストは成功 (OK)
401 認証が必要で、認証がされていないためエラー
(Unauthorized)
404 対照データがない (Not Found)
500 サーバエラー (Internal Server Error)
Object.statusText
サーバからの応答テキストを示す
通常に受信が成功すれば readyStateが4、statusが200になる
●サーバからデータを受け取るには
・Object.responseText
サーバからテキストデータを読み込むのに使用する
・Object.responseXML
サーバからXMLデータを読み込むのに使用する
●そのほかに役立つ関数 Objectは既出の3つのオブジェクト
・通信処理を中断する Object.abort();
・タイムアウト処理を行う
タイムアウトを始めるポイントにおく
[タイマ-IDの変数] = setTiemout( "arg1" , arg2 );
arg1: タイムアウト後に行うメソッド
arg2: タイムアウトを起こす時間(ミリ秒)
タイムアウトを解除する(正常に処理が終わったとこにおく)
clearTimeout( [タイマーIDの変数] );
・サーバから取得するデータのMIME形式を指定する
サーバと通信処理を行うところにおく onreadystatechngeの前など
Object.overrideMIMEType( 'arg1' );
arg1: MIME形式を指定する 例 text/html text/xml text/plane
・取得するデータのヘッダをすべて読み込む
Object.getAllRespnseHeader()
ヘッダの文字情報を返す
・取得するデータのヘッダを個別に指定して読み込む
Object.getResponseHeader( "arg1" );
このメソッドは、サーバからのレスポンスが正常に行われたあと
記述できる
arg1: 取得したいヘッダの項目名を指定する
Content-Length Content-Type Keep-Alive など
・リクエストヘッダを書き換える
Object.setRequestHeader( "arg1" ,"arg2" );
open()メソッドの直後に指定する
arg1 : ヘッダの項目名
Content-Length Content-Type Keep-Alive
arg2 ; 項目に設定する値
●最後に気づいた点
・ サーバからのデータを読み込む
Object.responseText Object.responseXML
のつづりを間違うと undefined が返される
・ postをつかってサーバに送信する場合
赤線の部分を追加する (本書にはこの記述がない)
xmlhttp.open("post", "q005Save.php", true);
xmlhttp.setRequestHeader
("Content-Type" , "application/x-www-form-urlencoded");
xmlhttp.send("textdata=" + encodeURI(savetext));