1. 程式人生 > >手動和自動傳送ajax請求

手動和自動傳送ajax請求

自動傳送  ---> 依賴jQuery檔案

例項-->GET請求:

function AjaxSubmit() {
$.ajax({
url:'/data',
type:"GET",
data:{'p':1},
success:function (arg) {

}
})
}

手動傳送 ---> 依賴瀏覽器XML物件(也叫原生ajax)

Ajax主要就是使用 【XmlHttpRequest】物件來完成請求的操作,該物件在主流瀏覽器中均存在(除早起的IE),Ajax首次出現IE5.5中存在(ActiveX控制元件)。

XmlHttpRequest物件的主要方法:

a. void open(String method,String url,Boolen async)
用於建立請求

引數:
method: 請求方式(字串型別),如:POST、GET、DELETE...
url: 要請求的地址(字串型別)
async: 是否非同步(布林型別)

b. void send(String body)
用於傳送請求

引數:
body: 要傳送的資料(字串型別)

c. void setRequestHeader(String header,String value)
用於設定請求頭

引數:
header: 請求頭的key(字串型別)
vlaue: 請求頭的value(字串型別)

d. String getAllResponseHeaders()
獲取所有響應頭

返回值:
響應頭資料(字串型別)

e. String getResponseHeader(String header)
獲取響應頭中指定header的值

引數:
header: 響應頭的key(字串型別)

返回值:
響應頭中指定的header對應的值

f. void abort()
終止請求

 

 

 

XmlHttpRequest物件的主要屬性:

a. Number readyState
狀態值(整數)

詳細:
0-未初始化,尚未呼叫open()方法;
1-啟動,呼叫了open()方法,未呼叫send()方法;
2-傳送,已經呼叫了send()方法,未接收到響應;
3-接收,已經接收到部分響應資料;
4-完成,已經接收到全部響應資料;

b. Function onreadystatechange
當readyState的值改變時自動觸發執行其對應的函式(回撥函式)

c. String responseText
伺服器返回的資料(字串型別)

d. XmlDocument responseXML
伺服器返回的資料(Xml物件)

e. Number states
狀態碼(整數),如:200、404...

f. String statesText
狀態文字(字串),如:OK、NotFound...

 

示列-->GET請求:

function ManageSubmit() {
var xhr = new XMLHttpRequest() ; <!-- #建立一個物件 -->
xhr.open('GET','/data');       <!--#與那個url建立連線-->
xhr.onreadystatechange =function (){
if(xhr.readyState == 4){
                 // 4-完成,已經接收到全部響應資料(往上有說明0-4的各個含義);
console.log(xhr.responseText)
}
};                 <!-- #onreadystatechange狀態改變的時候執行function -->

xhr.send(null);       <!-- #開始傳送,null表示什麼資料都不發 -->
}