ajax主要步驟（講解2）

時間 2019-11-08

標籤 ajax 主要步驟講解欄目 Ajax 简体版

原文原文鏈接

爲了方便理解，我給AJAX統一了一個流程，要想實現AJAX，就要按照之後步驟走：javascript

（1）建立XMLHttp對象。（2）設置請求方式。（3）調用回調函數。（4）發送請求。html

下面詳細解釋這4個步驟。java

　　（1）建立XMLHttp對象：XMLHttp對象用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。ajax

　　建立XMLHttp對象的語法是:var xmlHttp=new XMLHttpRequest();若是是IE5或者IE6瀏覽器，則使用ActiveX對象，建立方法是：瀏覽器

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

　　通常咱們手寫AJAX的時候，首先要判斷該瀏覽器是否支持XMLHttpRequest對象，若是支持則建立該對象，若是不支持則建立ActiveX對象。JS代碼以下：服務器

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

（2）設置請求方式：在WEB開發中，請求有兩種形式，一個是get 一個是post，因此在這裏須要設置一下具體使用哪一個請求，XMLHttpRequest對象的open()方法就是來設置請求方式的。異步

　　open()：函數

　　　　功能：規定請求的類型、URL 以及是否異步處理請求。post

　　　　參數：參數1，設置請求類型（GET 或 POST），GET與POST的區別請本身百度一下，這裏不作解釋；

　　　　　　參數2，文件在服務器上的位置；

　　　　　　參數3，是否異步處理請求，是爲true，否爲false。

　　具體的JS代碼實現以下：

xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);

　在上段代碼中，請求的名字是："test.do?method=ajaxTest&&msg="+new Date()，後面有個new Date()，這裏主要是防止緩存問題，若是是不段的更新頁面內容，那麼極可能就會出現點擊按鈕後內容頁不改變，由於若是沒有後面的msg=new Date()那麼咱們每一次發送的請求都是同樣的，這樣極可能就致使了緩存問題。因此須要在請求後面加上msg=new Date()，這樣保障了每次的請求都不同，避免緩存問題。

　　（3）回調函數：

　　若是在上一步中open方法的第三個參數選擇的是true，那麼當前就是異步請求，這個時候須要寫一個回調函數，xmlHttp對象有一個onreadystatechange屬性，這個屬性返回的是一個匿名的方法，因此回調函數就在這裏寫xmlHttp.onreadystatechange=function{},function{}內部就是回調函數的內容。所謂回調函數，就是請求在後臺處理完，再返回到前臺所實現的功能。在這個例子裏，咱們的回調函數要實現的功能就是接收後臺處理後反饋給前臺的數據，而後將這個數據顯示到指定的div上。由於從後臺返回的數據多是錯誤的，因此在回調函數中首先要判斷後臺返回的信息是否正確，若是正確才能夠繼續執行。代碼以下：

if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
    document.getElementById("testid").value=xmlHttp.responseText;//將信息顯示到頁面
 }else{
    alert("AJAX服務器返回錯誤！");
}    
}

　在上面代碼中，xmlHttp.readyState是存有XMLHttpRequest 的狀態。從 0 到 4 發生變化。0: 請求未初始化。1: 服務器鏈接已創建。2: 請求已接收。3: 請求處理中。4: 請求已完成，且響應已就緒。因此這裏咱們判斷只有當xmlHttp.readyState爲4的時候才能夠繼續執行。

　　xmlHttp.status是服務器返回的結果，其中200表明正確。404表明未找到頁面，因此這裏咱們判斷只有當xmlHttp.status等於200的時候才能夠繼續執行。

　　document.getElementById("testid").value=xmlHttp.responseText;這段代碼就是回調函數的核心內容，就是獲取後臺返回的數據，而後將這個數據賦值給id爲testid的div。xmlHttp對象有兩個屬性均可以獲取後臺返回的數據，分別是：responseText和responseXML，其中responseText是用來得到字符串形式的響應數據，responseXML是用來得到 XML 形式的響應數據。至於選擇哪個是取決於後臺給返回的數據的，這個例子裏咱們只是顯示一條字符串數據因此選擇的是responseText。responseXML將會在之後的例子中介紹。

（4）發送請求：發送請求是調用xmlHttp對象的send()方法。代碼以下：

xmlHttp.send();

　綜合以上講解代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>FirstTest.html</title>
     <script language="javascript">
        function onclickAjax(){
            var xmlHttp;
            //1：分瀏覽器建立XMLHttp對象
            if(window.XMLHttpRequest){
                xmlHttp=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
            }
            //2：設置請求類型
            xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);
            /:3：回調函數
            xmlHttp.onreadystatechange=function(){
                if(xmlHttp.readyState==4){
                    if(xmlHttp.status==200){
                        document.getElementById("testid").value=xmlHttp.responseText;
                    }else{
                        alert("AJAX服務器返回錯誤！");
                    }    
                }
            }
            //4：發送請求
            xmlHttp.send();
        }
     </script>
  </head>
  
  <body>
    <input type="button" value="測試" onclick="onclickAjax()">
    <div id="testid">
    </div>
  </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。