作成 2010.01.05
更新 2011.11.18
更新 2011.11.18
Ajax の本体
XMLHttpObject
いわゆる Ajax の本体です。受信したテキストは responseText で取得できます。
なお、Internet Explorer は同じ URL を取得しようとすると2回目以降はキャッシュから取得するため、毎回違う URL にする必要があります。
function createXMLHttpRequest(){
var XMLHttpObject = null;
try{
XMLHttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
return XMLHttpObject;
}
メソッドとプロパティ
| メソッドとプロパティ | 機能 |
| open(METHOD, page [, async_frag [, user_name [, password] ] ]) | リクエストメソッドとページを指定します。async_frag には、true または false を指定します。true は応答を待たず、false は応答を待って処理を継続します。 |
| send(post_body) | 実際に発信します。POSTメソッドの場合は post_body に入れます。 |
| abort() | 現在実行中のリクエストを中止します。 |
| onreadystatechange(function) | 通信中の状態が変わった時にどのような処理をするか設定します。 通常、受信したときの処理を設定します。このメソッド名はすべて小文字で記述してください。 |
| setRequestHeader(field_name, field_body) | リクエストヘッダーを追加したり変更したりします。 |
| getResponseHeader(field_name) | fileld_name のレスポンスヘッダーを取得します。 |
| getAllResponseHeaders() | レスポンスヘッダーをすべて取得します。 |
| readyState | 通信の状態を取得します。文字列による比較も可能なようですが未確認です。詳細は readyState を参照してください。 |
| responseText | 受信したデータをテキスト形式で取得します。 |
| responseXML | XML DOM形式で取得します。 |
| status | HTTP のステータスコードを取得します。 |
| statusText | HTTP のステータスコードを文字列形式で取得します。 |
readyState
| 状態 | 値 | 説明 |
| uninitialized | 0 | オブジェクトはデータでイニシャライズされていない。 |
| loading | 1 | オブジェクトはデータをロード中である。 |
| loaded | 2 | オブジェクトのデータの読み込みが完了しています。 |
| interactive | 3 | オブジェクトはデータをロード中であっても、操作可能である。 |
| complete | 4 | コントロールは完全にロードされた。 |
使い方
GET リクエスト
var sct = (new Date()).getTime();
var httpobj = createXMLHttpRequest();
httpobj.open("GET", "test.php?sct=" + sct, true);
httpobj.onreadystatechange = function(){
if(httpobj.readyState == 4){
var textdata = httpobj.responseText;
}
};
httpobj.send(null);
POST リクエスト
リクエストヘッダーを追加する点と、send メソッドに送信データを入れる点がキモです。
var sct = (new Date()).getTime();
var p1 = "post1"
var p2 = "post2"
var p3 = "post3"
var httpobj = createXMLHttpRequest();
httpobj.open("POST", "test.php?ct=" + sct, true);
httpobj.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded; charset=UTF-8');
httpobj.onreadystatechange = function(){
if(httpobj.readyState == 4){
var textdata = httpobj.responseText;
}
};
httpobj.send("p1=" + encodeURIComponent(p1)
+ "&p2=" + encodeURIComponent(p2)
+ "&p3=" + encodeURIComponent(p3));
タグ: JavaScript