(JS)Ajaxローカルリフレッシュ技術

1.Ajax Ajaxとは、すべて「Asynchronous JavaScript and XML」(非同期JavaScriptとXML)と呼ばれ、インタラクティブなWebアプリケーションを作成するWeb開発技術を指す.ユーザー体験を改善するために使用されます.その本質はXMLHttpRequestオブジェクトを用いて非同期のサーバのように要求を送信し、サーバは完全なページではなく一部のデータを返し、jsでページの一部の内容を変更し、ページのローカルリフレッシュを実現することである.2.XMLHttpRequestオブジェクトの取得

function getXhr() {
    var xhr = null;
    if(window.XMLHttpRequest) {
        //IE6      、              
        xhr = new XMLHttpRequest();
    } else {
        //IE6           
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr;
}

3.要求を作成する2つの方法

//get  
    xhr.open("get", "login.do?flag=100", true);
//post  
    xhr.open("post", "login.do", true);
    //      ， post            http 
    //   "application/x-www-from-urlencoden"    ，
    //       ，       multipart/form-data    
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

4.リターン関数の設定ここではXMLHttpRequestオブジェクトの2つのプロパティreadStateとstatus readStateについて説明します.要求のステータス「0」要求は初期化されていません.「1」サーバ接続が確立されています.「2」要求を送信しています.「2」要求は受信されています.「3」要求は完了しています.「処理中です.」「4」要求は完了しています.データ受信成功status:サーバが返すhttp要求応答値(ステータスコード)ここではいくつかの一般的なステータスコードを紹介する:200:要求成功202を示す:要求が受信されたことを示すが、処理が完了していない400:エラーを示す要求404:リソースが見つからないことを示す500:内部サーバエラー5を示す.要求送信要求送信時にXMLHttpRequestオブジェクトを呼び出すsend()メソッドget要求時send()メソッドパラメータが空のpost要求時send(String)メソッドにおける書き込み要求のパラメータ6である.非同期リクエストを送信するには①XMLHttpRequestオブジェクトの取得②リクエストの作成(XMLHttpRequestオブジェクトを呼び出すopenメソッド)③コールバック関数の設定(XMLHttpRequestオブジェクトのonreadystatechangeプロパティに応答関数を設定)主にサーバから返されたデータに基づいてページ内容を変更するために使用される④送信要求(XMLHttpRequestオブジェクトを呼び出すsendメソッド)の簡単な例:

//  XMLHttpRequest    
function getXhr() {
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr;
}
//get    
function send1() {
    var xhr = getXhr();
    xhr.open("get", "login.do?flag=100", true);
    //      
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            //              
            document.getElementById("info1").innerText = result;
        }
    };
    xhr.send();
}
//post    
function send2() {
    var xhr = getXhr();
    xhr.open("post", "login.do", true);
    //     http 
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("info2").innerText = xhr.responseText;
        }
    };
    //    
    xhr.send("flag=200");
}