手動和自動傳送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表示什麼資料都不發 -->
}