HTML 5 XMLHttpRequest使用

XMLHttpRequestはAjaxのコアであり、XMLHttpRequestオブジェクトのプロパティとメソッドを呼び出すことでクライアントとブラウザ間でデータの非同期転送を実現し、ページのリフレッシュなし効果を実現します.
XMLHttpRequestオブジェクトの一般的なプロパティ:
onreadystatechange:readystateプロパティ値が変更されたときのイベント処理ハンドル(書き込みのみ)を指定します.
readyState:現在のリクエストのステータスを返します(読み取り専用).
responseText:対応する情報を文字列として返す(読み取り専用);
 
XMLHttpRequestオブジェクトの一般的な方法:
 
Open():新しいHTTPリクエストを作成し、このリクエストの方法、URL、検証情報(ユーザー名/パスワード)を作成します.
send():HTTPサーバにリクエストを送信し、応答を受信します.
XMLHttpRequestオブジェクトの使用には、次の4つのステップが必要です.
 
(1)XMLHttpRequestオブジェクトの初期化
(2)応答処理関数の指定
(3)HTTPリクエストの送信
(4)サーバから返される情報の処理
 
一、XMLHttpRequestオブジェクトの初期化
XMLHttpRequestオブジェクトを使用する前に、XMLHttpRequestオブジェクトをインスタンス化する必要があります.このインスタンス化プロセスの実装は、ブラウザごとに異なるため、XMLttpRequestオブジェクトを異なるブラウザでインスタンス化する方法も異なります.
マイクロソフトIEブラウザ向け:

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

 
他のブラウザ:

var xmlhttp=new XMLHttpRequest();

したがって、この2つのインスタンス化XMLHttpRequestの形式を統合すると、次のようなインスタンス化された共通の方法を抽出することができます.

//   XMLHttpRequest    
function createXMLHttpRequest(){  
    if(window.XMLHttpRequest){  
        xmlHttp = new XMLHttpRequest();   
    }else if(window.ActiveXObject){  
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
    }  
}  

二、指定応答処理関数
次に、サーバが情報を返すときのクライアントの処理方法を指定します.XMLHttpRequestオブジェクトのonreadystatechangeプロパティに対応する処理関数名を割り当てるだけです.たとえば、

xmlHttp.onreadystatechange = callBack;  

説明する必要があるのは、この関数名には括弧を付けず、パラメータを持たないことです.JavaScriptインスタント定義関数を使用して、次のような応答関数を定義することもできます.

xmlHttp.onreadystatechange = function(){  
         // Do something...  
}  

.HTTPリクエストの送信
レスポンス処理関数を指定すると、サーバにHTTPリクエストを送信できます.これはXMLHttpRequestオブジェクトのopen()メソッドとsend()メソッドを呼び出す必要があります.

xmlHttp.open("get/Post","URL",true/false);  
xmlHttp.send(null);  

Open()メソッドの詳細

//XMLHttpRequest   open()      
void open(string method, string URL , boolean asynch, string username, string password);  

Open()メソッドは、要求を初期化する純粋なスクリプトメソッドであるサーバへの呼び出しが確立されることを示します.
必要なパラメータは2つ、オプションのパラメータは3つあります.methodはサーバに情報を送信する方法を表し、GetまたはPostであってもよい.URLは、呼び出されたサーバリソースのURLを表す.asynchはブール値で、この呼び出し時に非同期か同期かを示し、デフォルトはtrueです.usernameとpasswordでは、特定のユーザー名とパスワードを指定できます.一般的に使用するときは、最初の3つのパラメータだけを取ればいいです.
Send()メソッドの詳細

//XMLHttpRequest   send()      
void send(content);  

send()メソッドは、特にサーバに要求を送信する.リクエストが非同期として宣言されると、このメソッドはすぐに返されます.そうしないと、応答が受信されるまで待機します.パラメータ
content
オプションで、DOMオブジェクトのインスタンス、入力ストリーム、または列を指定できます.入力されたコンテンツはリクエストボディの一部として送信されます.
四、処理サーバーから返された情報
第2部ではXMLHttpRequestに応答処理関数を指定し,応答処理関数はXMLHttpRequestオブジェクトのreadyState属性値の変化をチェックし,readyState値が4の場合,代表サーバがすべての情報を返信した場合,処理情報を開始しページ内容を更新することができる.

function callBack(){
        if(xmlHttp.readyState==4){
	if(xmlHttp.status==200){
	        //do something with xmlHttp.responseText;
	        xmlHttp.responseText;
	}	
        }
}

3.1 readyState属性の詳細
readyStateプロパティは、要求のステータスを表すために使用されます.5つの値があります.それぞれ:
「0」:オブジェクトが確立されているが、まだ初期化されていない(open()メソッドが呼び出されていない)ことを示します.
「1」:ロード中であり、オブジェクトが確立され、send()メソッドが呼び出されていないことを示します.
「2」:要求が送信されたことを示し、send()メソッドが呼び出されたことを示す.
「3」:要求処理中であることを示す.
「4」:要求が完了したこと、すなわちデータ受信が完了したことを示す.
status、statusTextプロパティの詳細:
status:現在のリクエストのHTTPステータスコード(読み取り専用)を返します.
statusText:現在のリクエストのレスポンスラインのステータスを返します(読み取り専用).
responseText、responseXML属性の詳細
responseTextプロパティは、サーバのテキスト応答を表し、その処理結果は文字列で返されます.
responseXMLプロパティは、サーバ応答を表し、その結果をXML Documentオブジェクトにフォーマットします.
上記の4つのステップは、XMLHttpRequestオブジェクトのAjaxプログラムでの実行サイクル、すなわち応答関数の初期化、指定、要求の送信、応答の処理です.
次に、この例の
完全なコード
:

var xmlHttp;

function AjaxFunction(){
        createXMLHttpRequest();
        if(xmlHttp!=null){
	xmlHttp.onreadystatechange = callBack;
	xmlHttp.open("get/Post","URL",true/false);
	xmlHttp.send(null);
        }	
}	

//   XMLHttpRequest  
function createXMLHttpRequest(){
        if(window.XMLHttpRequest){
	xmlHttp = new XMLHttpRequest();	
        }else if(window.ActiveXObject){
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
}

//      
function callBack(){
        if(xmlHttp.readyState==4){
                if(xmlHttp.status==200){
	        //do something with xmlHttp.responseText;
	        xmlHttp.responseText;
                }	
        }
}