什么是Ajax?
ajax是一種技術(shù)方案拇泛,但并不是一種新技術(shù)车伞。它依賴的是現(xiàn)有的CSS/HTML/Javascript蝌以,而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對(duì)象,是這個(gè)對(duì)象使得瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)。 實(shí)現(xiàn)在頁面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互
如何實(shí)現(xiàn)Ajax?
- XMLHttpRequest對(duì)象
- fetch
XMLHttpRequest的用法赏寇、屬性
1.創(chuàng)建XHR對(duì)象
var xhr = new XMLHttpRequest();
2.xhr.open()
接受三個(gè)參數(shù)
- 1.要發(fā)送的請(qǐng)求的類型("get"、"post"),
- 請(qǐng)求的URL
- 是否異步發(fā)送請(qǐng)求的布爾值
3.xhr.send()
接受一個(gè)參數(shù)
- 1.請(qǐng)求主體發(fā)送的數(shù)據(jù)价认,不需要?jiǎng)t傳入(null)
4.xhr.responseText:作為響應(yīng)主體被返回的文本
5.xhr.responseXML:如果響應(yīng)的內(nèi)容類型是"text/html"或"application/xml",這個(gè)屬性中將保存包含著響應(yīng)數(shù)據(jù)的XML DOM文檔
6.xhr.status:響應(yīng)的HTTP狀態(tài)
7.xhr.statusText:HTTP狀態(tài)的說明
8.xhr.readyState:請(qǐng)求/響應(yīng)過程的當(dāng)前活動(dòng)階段
- 0:未初始化嗅定。尚未調(diào)用open()方法。
- 1:?jiǎn)?dòng)用踩。已經(jīng)調(diào)用open()方法渠退,但尚未調(diào)用send()方法。
- 2:發(fā)送脐彩。已經(jīng)調(diào)用send()方法碎乃,但尚未接收到響應(yīng)。
- 3:接收惠奸。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)梅誓。
- 4:完成。已經(jīng)接收到全部數(shù)據(jù)佛南,而且已經(jīng)可以在客戶端使用梗掰。
說明:可以把xhr.readyState屬性和TCP/IP的三次握手類比一下,1,2表示第一次嗅回,3表示第二次及穗,4表示第三次。只要readyState屬性變一次绵载,就會(huì)觸發(fā)一次readyState事件埂陆。還要強(qiáng)調(diào)一點(diǎn)的是必須在調(diào)用open()之前指定onreadystatechage事件處理程序才能確保跨瀏覽器兼容性娃豹。
9.xhr.abort():取消異步請(qǐng)求焚虱,在接收響應(yīng)之前使用
10.xhr.setRequestHeader():設(shè)置自定義的請(qǐng)求頭部信息。
在調(diào)用open()方法之后懂版,send()方法之前使用著摔。
11.xhr.timeout:表示請(qǐng)求在等待響應(yīng)多少毫秒之后就終止。
12.xhr.overrideMimeType():用于重寫響應(yīng)的MIME類型定续。
比如服務(wù)器返回的MIME類型時(shí)text/plain,但數(shù)據(jù)實(shí)際包含的是XML,根據(jù)MIME類型禾锤,即使數(shù)據(jù)是XML私股,responseXML屬性仍然是null,通過調(diào)用該方法,可以保證把響應(yīng)當(dāng)作XML而非純文本使用恩掷。調(diào)用方法必須在send()之前使用
var xhr = new XMLHttpReququest()
xhr.open("get","text.php",true)
xhr.overrideMimeType("text/html")
xhr.send(null)