ajax詳解及例子

首先建立瀏覽器物件(因瀏覽器的不同，可使用ActiveXObject和XMLHttpRequest判斷當前所使用的瀏覽器)
 var xmlHttp;
 if(window.ActiveXObject) {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }else if(window.XMLHttpRequest){
    xmlHttp=new XMLHttpRequest();
 }
當readyState屬性改變時呼叫函式
   xmlHttp.onreadystatechange=FunctionName; //FunctionName不要帶寫成FunctionName().
在這個函式中。首先要檢查請求的狀態。XMLHttpRequest 提供了readyState屬性來對伺服器響應進行判斷(readyState的取值如下).
接著，函式會檢查HTTP伺服器響應的狀態值(對應的HTTP的狀態如下).
   if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
          alert("OK");
        }
    }
建立一個新的HTTP請求,並指定此請求的方法、URL以及驗證資訊.
   xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
    引數:
        bstrMethod：資料傳送方式，GET | POST(大小寫不敏感).
        bstrUrl:請求的URL.
        varAsync:指定此請求是否為非同步方式,預設為true.
        bstrUser:如果伺服器需要驗證，此處指定使用者名稱(可省略).
        bstrPassword:驗證密碼(可省略).

最後傳送請求到http伺服器並接收回應,
此方法的同步或非同步方式取決於open方法中的bAsync引數，如果bAsync == False，此方法將會等待請求完成或者超時時才會返回，如果bAsync == True，此方法將立即返回。

responseStream
以Ado Stream物件的形式返回響應資訊
responseText
將響應資訊作為字串返回
responseXML
將響應資訊格式化為Xml Document物件並返回
responseBody
返回某一格式的伺服器響應資料

readyState的取值：
  0 (未初始化)
  1 (正在裝載)
  2 (裝載完畢)
  3 (互動中)
  4 (完成)
對應的HTTP的狀態：
100 Continue
101 Switching protocols
200 OK
201 Created
202 Accepted
203 Non-Authoritative Information
204 No Content
205 Reset Content
206 Partial Content
300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Suitable
417 Expectation Failed
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported

例子:
 
var xmlHttp;
function getName(){
    var url = document.getElementById('txtUrl');
    createHttpRequest();
    xmlHttp.onreadystatechange=state_change;
    xmlHttp.open("GET",url.value,true);
    xmlHttp.send(null);
}

function createHttpRequest(){
    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }
}
function state_change(){
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
          var resXml=xmlHttp.responseXML;
         ...//處理XML.
        }
    }
}

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-462837/，如需轉載，請註明出處，否則將追究法律責任。