Ajax異步請求(一)

不困於情，不亂於心，不畏未來，不念過去。

　　　　　　　　　　　　----致本身

目錄：

1、Ajax基礎知識回顧

1.Ajax簡介

2.Ajax工做原理

3.方法詳解

4.GET請求

5.POST請求

**********************1、Ajax基礎知識回顧**************************

===================1.Ajax簡介===========================

Asynchrous JavaScript And XML 異步的JavaScript和XML，是驅動新一代web站點的關鍵技術。與xml的關係是能夠讀取和返回xml文件。

優勢：在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。

===================2.Ajax工做原理=========================

(1)客戶端瀏覽器建立一個XMLHttpRequest對象向服務器發送請求

(2)服務器接收請求，建立一個response對象併發送一些數據返回給瀏覽器

(3)瀏覽器接收數據使用JavaScript更新頁面內容

Ajax是基於現有的Internet標準，使用XMLHttpRequest對象異步的與服務器交換數據。

全部現代瀏覽器都支持XMLHttpRequest對象。xmlhttp = new XMLHttpRequest();

針對IE五、6：XMLHttpRequest xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

獲取XMLHttpRequest：

 

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

 

===================3.方法詳解============================

如需將請求發送到服務器，則使用XMLHttpRequest對象的send()和open()方法。

xmlhttp.open(method,url,async);

xmlhttp.send();

method:請求類型，POST或者GET

url:文件在服務器的位置

async:true異步，false同步

send(string):將請求發送到服務器.string只使用於post請求，向服務器發送的請求數據。

注：若是是POST請求則須要設置請求頭，setRequestHeader();

屬性：

onreadystatechange() 存儲函數，每當readyState改變時就會觸發該函數

readyState 存有XMLHttpRequest狀態，從0-4

status   200："OK"  404未找到頁面

responseText:獲取字符串形式的響應數據

responseXML：獲取xml格式的響應數據

===================4.GET請求===========================

GET請求簡單速度快且在絕大部分狀況下均可以使用

xmlhttp.open("GET","/user/demo.txt",true);

xmlhttp.send();

使用get請求時應該特別注意，像如上方式獲得的多是緩存的結果，爲了不這種狀況建議向URL中添加一個惟一的ID

xmlhttp.open("GET","/user/demo.text?t="+Math.random(),true);

===================5.POST請求==========================

 建議在如下狀況下使用POST請求

1.沒法用緩存文件

2.向服務器發送大量數據<post沒有數據限制>

3.發送包含未知字符串的用戶輸入時，post穩定可靠。

xmlhttp.open("POST","/user/demo.text",true);

須要向HTTP表單那樣post數據時可使用setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send();

注：setRequestHeader(header,value);

header:規定頭的名稱

value:規定頭的值

當使用async = true時，請規定在響應時處於onreadystatechange事件中的就緒狀態的執行函數

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
 //do something;   
}
}

 最後總結一下，使用Ajax異步請求時步驟：

1.建立對象(一般狀況下，爲了兼容全部瀏覽器會向上面獲取XMLHttpRequest代碼那樣寫)

2.設置open()方法和setRequestHeader()方法參數。將請求方法，請求地址，請求類型放到open中，若是是post請求則須要設置setRequestHeader()。

3.發送執行，send()方法纔是真正與服務器交互執行

4.獲取結果,使用它的函數onreadystatechange.