《JavaScript權威指南》學習筆記之二十---XMLHttpRequest和AJAX解決方式

標籤：權威指南   headers   safari   and   center   math   屬性   XML   頁面   

一、AJAX概述

        AJAX是Asynchronous JavaScript and XML的縮寫。中文譯作非同步JavaScript和XML。AJAX 不是新的程式設計語言，而是一種使用現有標準的新方法。在不又一次載入頁面的情況下，與server交換資料並更新部分網頁的藝術。

其核心是：client的Javascript可以與webserver進行非同步資料交換。

二、AJAX基礎---XMLHttpRequest對象

       全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用於在後台與server交換資料。這意味著能夠在不又一次載入整個網頁的情況下，對網頁的某部分進行更新。

        1、建立 XMLHttpRequest 對象的文法：

              var obj1 = new XMLHttpRequest();。

              IE5和IE6中。使用ActiveX對象：var obj2 = new ActiveXObject("Micorosoft.XMLHTTP");

              能夠用例如以下方式保持相容：

var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }

       2、XMLHttpRequest 對象的方法和屬性

       XMLHttpRequest 對象的方法和屬性用來向server發送請求和從server擷取響應。

             2.1    發送請求：open()和send()

                       open()方法用於建立一個請求。建立的HTTP請求並未發送，直到調用send()方法才被發送

                        method不區分大寫和小寫。URL能夠是絕對或者相對位址。async默覺得true，意味著並不會馬上返回資料。string參數可選，用於定義發送請求的本文（最好用字串格式，而且使用setRequestHeader()方法定義請求前序的內容內型及編碼方式）。

              2.2    setRequestHeader()：佈建要求前序，將和請求一同發送到服務端

 

//假設須要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來加入 HTTP 頭。//然後在 send() 方法中規定您希望發送的資料：xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");

              2.3    abort():終止請求 。沒有參數。

三、AJAX擷取server響應

        利用XMLHttpRequest對象和屬性擷取server的響應，包含HTTP前序和響應的本文。

        1、xmlObj.getAllResponseHeaders():擷取全部響應的前序，以字串形式返回。每一個HTTP前序名稱和值用冒號分隔。如myheader:myvalue，並以\r\n結束。

       

         2、xmlObj.getResponseHeader(param):擷取響應中某個特定的欄位值。參數param是一個響應的HTPP欄位名。

         3、responseText和responseXML屬性

               均為僅僅讀屬性。用於返回server中響應的本文。

<span style="font-size:14px;">//responseText屬性document.getElementById("myDiv").innerHTML=xmlhttp.responseText;////responseXML屬性xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++)  {  txt=txt + x[i].childNodes[0].nodeValue + "<br />";  }document.getElementById("myDiv").innerHTML=txt;</span>

        4、status和statusText屬性

              均為僅僅讀屬性，用於推斷響應狀態。

status表示響應中的狀態代碼。如404,200等，statusText表示狀態文本資訊。如OK，Not Found。狀態代碼和文本資訊一一相應，常見例如以下：

                 點擊查看完整版。

這兩個屬性僅在send()方法發送資料並接收到server響應完成後才有效。

         5、readyState屬性

               該屬性工作表示HTTP請求的狀態代碼，僅僅讀，返回一個整數，其值和說明例如以下：

               0 描寫敘述一種"未初始化"狀態;此時，已經建立一個xmlhttprequest對象，可是還沒有初始化。 
         1 描寫敘述一種"發送"狀態;此時，代碼已經調用了xmlhttprequest open()方法而且xmlhttprequest已經準備好把一個請求發送到server。 
         2 描寫敘述一種"發送"狀態;此時，已經通過send()方法把一個請求發送到server端，可是還沒有收到一個響應。 
         3 描寫敘述一種"正在接收"狀態;此時，已經接收到http回應標頭部資訊，可是訊息體部分還沒有全然接收結束。

 
         4 描寫敘述一種"已載入"狀態;此時，響應已經被全然接收。

四、onreadystatechange 事件

    readyState 屬性存有 XMLHttpRequest 的狀態資訊。每當 readyState 改變時。就會觸發 onreadystatechange 事件。

onreadystatechange屬效能夠指定一個函數，當狀態改變就調用該函數。

函數常常與readyState/status/statusText屬性確定響應的詳細狀態

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }

五、解決請求被瀏覽器緩衝的問題

    在使用XMLHttpRequest時，要注意的一個問題是載入的內容可能被瀏覽器緩衝。能夠對URL參數作改動避免此問題。

經常用法是加上一個隨機數作為查詢參數。

<span style="color:#000000;">xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);<span style="font-family:SimSun;">//或者:xmlhttp.open("get","url"+(new Date()).getTime(),true);</span> xmlhttp.send();</span>

六、點擊看執行個體

《JavaScript權威指南》學習筆記之二十---XMLHttpRequest和AJAX解決方式