AJAX基礎（二）——XMLHttpRequest對象

時間 2019-11-08

原文原文鏈接

在Ajax應用程序中，XmlHttpRequest對象負責將用戶信息以異步通訊地發送到服務器端，並接收服務器返回的響應信息和數據。javascript

XMLHttpRequest簡介html

XMLHttpRequest能夠提供不從新加載頁面的狀況下更新網頁，在頁面加載後在客戶端向服務器請求數據，在頁面加載後在服務器端接受數據，在後臺向客戶端發送數據。XMLHttpRequest 對象提供了對 HTTP 協議的徹底的訪問，包括作出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 能夠同步或異步返回 Web 服務器的響應，而且能以文本或者一個 DOM 文檔形式返回內容。儘管名爲 XMLHttpRequest，它並不限於和 XML 文檔一塊兒使用：它能夠接收任何形式的文本文檔。XMLHttpRequest 對象是名爲 AJAX 的 Web 應用程序架構的一項關鍵功能。java

XMLHttpRequest和Javascript數據庫

Javascript自己並未具有向服務器發送請求的能力，要麼使用window.open()方法從新打開一個頁面向服務器提交請求，要麼使用XMLHttpRequest對象發送請求。不一樣的是，前者是普通的即同步交互模式，然後者是異步交互方式。數組

XMLHttpRequest提供了一系列的屬性和方法，來向服務器發送異步的http請求；在服務器處理用戶請求的過程當中，XMLHttpRequest經過屬性的狀態值來實時反映http請求所處的狀態，並根據這些狀態指示Javascript作相應的處理；當服務器順利完成響應用戶行爲的動做、並將響應數據返回時，XMLHttpRequest提供的response系列方法，能夠將這些響應數據以文本、XML Document對象、Ado Stream對象或者unsigned byte數組的方式組裝起來，提供給Javascript處理。瀏覽器

XMLHttpRequest的五步使用法：緩存

一、創建XMLHttpRequest對象服務器

二、註冊回調函數架構

三、使用open方法社會自和服務器端交互的基本信息app

四、設置發送的數據，開始和服務器端交互

五、在回調函數中判斷交互是否結束，響應是否正確，並根據須要過去服務器端返回的數據，更新頁面內容

下面咱們以用戶名確認來實現XMLHttpRequest的五步使用法：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript">

             var xmlhttp;

            function submit(){

                //1.建立XHLHttpRequest對象

                if(window.XMLHttpRequest){

                    //alert("IE7，IE8 ,FireFox。Mozillar、Safari，Opera");

                    //IE7，IE8 ,FireFox。Mozillar、Safari，Opera

                     xmlhttp=new XMLHttpRequest();

                    if(xmlhttp.overrideMimeType){

                        xmlhttp.overrideMimeType("text/xml");

                        

                    }

                }else if(window.ActiveXObject){

                    //IE6,IE6.5 IE5

                    alert("IE6,IE6.5 IE5");

                    var activexName= ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',

                        'MSXML2.XMLHTTP.4.0','msxml2.xmlhttp.3.0','MSXML2.XMLHTTP.2.0',

                        'MSXML2.XMLHTTP.1.0'];

                    for(var i=0; i<activexName.length;i++){

                        try{

                            xmlhttp=new ActiveXObject(activexName[i]);

                            break;

                        }catch(e){

                            

                        }

                    }

                 }

                 if(xmlhttp==undefined||xmlhttp==null){

                     alert("當前瀏覽器不支持穿件XMLHttpRequest對象，請更換瀏覽器");

                     return;

                 }

                 //alert(xmlhttp);

                 //2.註冊回調方法

                 xmlhttp.onreadystatechange=callback;

            

                 //錯誤的寫法callback();

                 

                 //記憶一個固定用法，獲取文本框中用戶輸入的內容

                 var userName=document.getElementById("UserName").value;

                 /*

                  //GET方式交互

                 //設置和服務器端交互的相應參數

                 xmlhttp.open("GET","AjaxServer?name="+userName,true);

                 

                 //4.設置向服務器端發送的數據，啓動和服務器端的交互

                 xmlhttp.send(null);

                 */

                //POST方式交互

                //3.設置和服務器端交互的相應參數

                xmlhttp.open("POST","AjaxServer",true);

                

                //POST方式交互所須要增長的代碼

                xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                

                //4.設置向服務器端發送的數據，啓動和服務器端的交互

                xmlhttp.send("name="+userName);

                 

            }

            function callback(){

                //5.判斷和服務器端的交互是否完成，還有判斷服務器端是否正確返回了數據

                     

                if(xmlhttp.readyState==4){

                    //表示和服務器端的交互已經完成

//服務器返回的http狀態碼

//200表示「成功」，404表示「未找到」。500表示「服務器內容部錯誤」

                    //alert(xmlhttp.status);

                    if(xmlhttp.status==200){

                        //表示服務器端的響應代碼是200，正確的返回了數據

                        //純文本數據的接受方法

                        var message=xmlhttp.responseText;

                        //XML數據對應的DOM對象的接受方法

                        //使用前提是，服務器端須要設置content-type爲text/xml

                        //var domXml=xmlhttp.responseXML;

                        alert("bb");

                        //記憶想div標籤填充文本內容的方法

                        var div=document.getElementById("message");

                        div.innerHTML=message;

                       

                    }

                }

            }

        </script>

    </head>

    <body>

        <input type="text" id="UserName"/>

        <input type="button" value="校驗用戶名" onclick="submit()"/>

        <br/>

        <div id="message"></div>

    </body>

</html>

XMLHttpRequest的詳細屬性和方法

方法和屬性

描述

Open（String method,String url,Boolean ansynch,String username,String password）

1. 指定和服務器端交互的HTTP方法，URL地址及其餘請求信息。

2. 其中method表示HTTP請求方法。支持全部HTTP的方法，通常使用「GET」，「POST」url表示請求的服務器的地址，Asynch表示是否採起異步方式，true表示異步，false表示同步，後兩個參數能夠不指定，usrename和password分別表示用戶名和密碼，提供http認證機制須要的用戶名和密碼

Send(content)

1. 向服務器發出請求，若是採用異步方式，該方法會當即返回

2. Content能夠不指定或者指定爲null表示不發送數據，其內容可使DOM對象，輸入流或是字符串

GET 仍是 POST？

與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用。

然而，在如下狀況中，請使用 POST 請求：

沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

setRequestHeader(String header,String value)	設置HTTP請求中的指定頭部header的值爲value。次方法需在open方法之後調用
getAllReponseHeader()	1. 返回包含HTTP的全部響應頭包括Content-Length，Date，URI等內容 2. 返回值是一個字符串，包含全部頭信息，其中每個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔
GetResponseHeader(String header)	返回HTTP響應頭中指定的鍵名header對應的值
Abort()	中止當前http請求，對應的XMLHttpRequest對象會復位到未初始化的狀態
responseText	服務器響應的文本內容
ResponseXML	服務器響應的XML內容對應的DOM對象
Status	服務器返回的http狀態碼 200表示「成功」，404表示「未找到」。500表示「服務器內容部錯誤
statusText	服務器返回狀態碼的文本信息
readyState	表示XMLHttpRequest對象的狀態 0=未初始化。對象已建立，未調用open 1=open方法成功調用之後。Send方法未調用 2=send方法已經調用，還沒有開始接受數據 3=正在接受數據。Http響應頭信息已經接受，響應數據還沒有接受完成。 4=完成。響應數據接受完成
Onreadystatechage	請求狀態改變的時間觸發器（readyState變化時會調用這個屬性上註冊的javascript函數）