摘要：也在年發(fā)布了它的國(guó)際標(biāo)準(zhǔn)。能夠返回具體數(shù)字代表看上面的文檔，表示服務(wù)器返回的數(shù)據(jù)已經(jīng)完全接收，或者本次接收已經(jīng)失敗。請(qǐng)求結(jié)束，處理服務(wù)器返回的數(shù)據(jù)顯示提示加載中上面代碼中，等于時(shí)，表明腳本發(fā)出的請(qǐng)求已經(jīng)成功。其他情況，都表示請(qǐng)求還在進(jìn)行中。

想要學(xué)習(xí)的Ajax內(nèi)容都在這個(gè)教程阮一峰javascript--XMLHttpRequest 對(duì)象
應(yīng)該注意的點(diǎn)

JS 是一門(mén)語(yǔ)言，JSON 是另一門(mén)語(yǔ)言，JSON 這門(mén)語(yǔ)言抄襲了 JS這門(mén)語(yǔ)言

AJAX 就是用 JS 發(fā)請(qǐng)求

響應(yīng)的第四部分是字符串，可以用 JSON 語(yǔ)法表示一個(gè)對(duì)象，也可以用 JSON 語(yǔ)法表示一個(gè)數(shù)組，還可以用 XML 語(yǔ)法，還可以用 HTML 語(yǔ)法，還可以用 CSS 語(yǔ)法，還可以用 JS 語(yǔ)法，還可以用我自創(chuàng)的語(yǔ)法

用 form 可以發(fā)請(qǐng)求，但是會(huì)刷新頁(yè)面或新開(kāi)頁(yè)面
用 a 可以發(fā) get 請(qǐng)求，但是也會(huì)刷新頁(yè)面或新開(kāi)頁(yè)面
用 img 可以發(fā) get 請(qǐng)求，但是只能以圖片的形式展示
用 link 可以發(fā) get 請(qǐng)求，但是只能以 CSS、favicon 的形式展示
用 script 可以發(fā) get 請(qǐng)求，但是只能以腳本的形式運(yùn)行

使用form發(fā)送請(qǐng)求,查看請(qǐng)求的內(nèi)容

password=123456就是POST請(qǐng)求的第四部分

那有沒(méi)有什么方式可以實(shí)現(xiàn)

get、post、put、delete 請(qǐng)求都行

想以什么形式展示就以什么形式展示

IE 5 率先在 JS 中引入 ActiveX 對(duì)象（API），使得 JS 可以直接發(fā)起 HTTP 請(qǐng)求(想用getpost都可以,想以什么形式展示就以什么形式展示)。
隨后 Mozilla、 Safari、 Opera 也跟進(jìn)（抄襲）了，取名 XMLHttpRequest(全局對(duì)象)，并被納入 W3C 規(guī)范

XMLHttpRequest使得瀏覽器有了和軟件一樣的體驗(yàn),不局限于看文章和刷新

Jesse James Garrett 講如下技術(shù)取名叫做 AJAX：異步的 JavaScript 和 XML

使用 XMLHttpRequest 發(fā)請(qǐng)求

服務(wù)器返回 XML 格式的字符串(因?yàn)楫?dāng)時(shí)XML在當(dāng)時(shí)是流行的數(shù)據(jù)傳輸格式,后來(lái)用json)

JS 解析 XML，并更新局部頁(yè)面

2005年2月，AJAX 這個(gè)詞第一次正式提出，它是 Asynchronous JavaScript and XML 的縮寫(xiě)，指的是通過(guò) JavaScript 的異步通信，從服務(wù)器獲取 XML 文檔從中提取數(shù)據(jù)，再更新當(dāng)前網(wǎng)頁(yè)的對(duì)應(yīng)部分，而不用刷新整個(gè)網(wǎng)頁(yè)。后來(lái)，AJAX 這個(gè)詞就成為 JavaScript 腳本發(fā)起 HTTP 通信的代名詞，也就是說(shuō)，只要用腳本發(fā)起通信，就可以叫做 AJAX 通信。W3C 也在2006年發(fā)布了它的國(guó)際標(biāo)準(zhǔn)。

.

具體來(lái)說(shuō)，AJAX 包括以下幾個(gè)步驟。

創(chuàng)建 XMLHttpRequest 實(shí)例
發(fā)出 HTTP 請(qǐng)求
接收服務(wù)器傳回的數(shù)據(jù)
更新網(wǎng)頁(yè)數(shù)據(jù)

概括起來(lái)，就是一句話(huà)，**AJAX 通過(guò)原生的XMLHttpRequest對(duì)象發(fā)出 HTTP
請(qǐng)求，得到服務(wù)器返回的數(shù)據(jù)后，再進(jìn)行處理?，F(xiàn)在，服務(wù)器返回的都是 JSON** 格式的數(shù)據(jù)，XML 格式已經(jīng)過(guò)時(shí)了，但是 AJAX
這個(gè)名字已經(jīng)成了一個(gè)通用名詞，字面含義已經(jīng)消失了。

所有代碼都在這里
每一次大的更新可以查看commit
服務(wù)器端代碼:

if(path === "/"){
    response.statusCode = 200
    let string = fs.readFileSync("./index.html") 
    response.setHeader("Content-Type", "text/html;charset=utf-8")
    response.write(string)
    response.end()
  }

對(duì)于響應(yīng)來(lái)說(shuō),第四部分始終都是字符串,因?yàn)?b>response.write(string)返回的是字符串,我們給瀏覽器返回了符合html格式的字符串.
然后再設(shè)置響應(yīng)頭中的Content-Type,response.setHeader("Content-Type", "text/html;charset=utf-8"),即要求瀏覽器以HTML的語(yǔ)法解析這段字符串!,所以我們可以設(shè)置瀏覽器使用的解析方法為json,也可設(shè)置為xml.所以JSON 是一門(mén)語(yǔ)言!!

http請(qǐng)求的路徑都是絕對(duì)路徑.所以都是以/開(kāi)頭

所有代碼都在這里
查看commit既有每次迭代的代碼

我們請(qǐng)求一個(gè)以xml格式解析的字符串,然后看看響應(yīng)是什么
服務(wù)器端代碼

else if (path === "/xxx") {
    response.statusCode = 200
    response.setHeader("Content-Type", "text/xml;charset=utf-8")
    response.write(`
    
      Tove
      Jani
      Reminder
      Don"t forget me this weekend!
    
    `)
    response.end()
  }

main.js

let myButton = document.getElementById("myButton");
myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.open("GET","/xxx")//配置request.參數(shù)分別為方法和路徑
    request.send();//發(fā)送請(qǐng)求
})

index.html

    點(diǎn)我
    

當(dāng)點(diǎn)擊點(diǎn)我按鈕時(shí),查看發(fā)送的請(qǐng)求和收到的響應(yīng):

我們將request打印出來(lái),看看結(jié)構(gòu):
console.log(request)

XMLHttpRequest.readyState

XMLHttpRequest.readyState返回一個(gè)整數(shù)，表示實(shí)例對(duì)象的當(dāng)前狀態(tài)。該屬性只讀。
能夠返回0,1,2,3,4,具體數(shù)字代表看上面的文檔.
4，表示服務(wù)器返回的數(shù)據(jù)已經(jīng)完全接收，或者本次接收已經(jīng)失敗。
通信過(guò)程中，每當(dāng)實(shí)例對(duì)象發(fā)生狀態(tài)變化，它的readyState屬性的值就會(huì)改變。這個(gè)值每一次變化，都會(huì)觸發(fā)readyStateChange事件。

var xhr = new XMLHttpRequest();

if (xhr.readyState === 4) {
  // 請(qǐng)求結(jié)束，處理服務(wù)器返回的數(shù)據(jù)
} else {
  // 顯示提示“加載中……”
}

上面代碼中，xhr.readyState等于4時(shí)，表明腳本發(fā)出的 HTTP 請(qǐng)求已經(jīng)成功。其他情況，都表示 HTTP 請(qǐng)求還在進(jìn)行中。

下面我們從時(shí)間角度看看這個(gè)過(guò)程

當(dāng)我們發(fā)送一個(gè)/xxx請(qǐng)求,使用的時(shí)間為9ms,9毫秒實(shí)際上很長(zhǎng),我們看一看在代碼中9毫秒可以干什么
在控制臺(tái)執(zhí)行

console.time(); 
var a=1 ;  
console.timeEnd();

返回結(jié)果為default: 0.008056640625ms,聲明一個(gè)變量只用了0.008ms

打印一句話(huà)只用了1ms

所以9ms對(duì)于瀏覽器來(lái)說(shuō),對(duì)于代碼來(lái)說(shuō)是很長(zhǎng)的,可以做很多事情.

接下來(lái)看看readyState屬性在一次請(qǐng)求中的變化過(guò)程

let request = new XMLHttpRequest();
    request.open("GET","/xxx")
    request.send();
    setInterval(()=>{//在發(fā)送請(qǐng)求的過(guò)程中,每一毫秒問(wèn)一下
        console.log(request.readyState);
    },1)

結(jié)果為:

readyState在這個(gè)過(guò)程中從1變?yōu)?
readyState各個(gè)值的含義

剛剛只顯示了1和4的原因是因?yàn)?,3太快,比一毫秒還快

01234這四個(gè)狀態(tài)是逐個(gè)經(jīng)過(guò)的
我們只需要記住4,4代表請(qǐng)求已經(jīng)把響應(yīng)下載完畢了

XMLHttpRequest.onreadystatechange = callback;

當(dāng) readyState 的值改變的時(shí)候，callback 函數(shù)會(huì)被調(diào)用。

例子:

var xhr= new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}
xhr.send();

XMLHttpRequest.DONE就是4

onreadystatechange測(cè)試
把監(jiān)聽(tīng)函數(shù)往上寫(xiě),這樣就不會(huì)錯(cuò)過(guò)每一個(gè)readyState的變化

myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.onreadystatechange = ()=>{//把監(jiān)聽(tīng)函數(shù)往上寫(xiě),這樣就不會(huì)錯(cuò)過(guò)每一個(gè)readyState的變化
        console.log(request.readyState);
    }
    request.open("GET","/xxx")//配置request.參數(shù)分別為方法和路徑
    request.send();//發(fā)送請(qǐng)求
    // console.log(request)
})

打印結(jié)果為1,2,3,4
4代表請(qǐng)求已經(jīng)把響應(yīng)下載完畢了,但是請(qǐng)求成功和失敗還要看status狀態(tài)碼是大于200小于300還是大于400

 request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("請(qǐng)求和響應(yīng)都完畢了");
            if ( request.status>=200&&request.status<=400){
                console.log("說(shuō)明請(qǐng)求成功");
                console.log(request.responseText);//打印響應(yīng)的第四部分,字符串
            }else if(request.status>=400){
                console.log("響應(yīng)失敗");
            }
        } 
    }

但是xml結(jié)構(gòu)不方便,需要使用DOMapi去獲取數(shù)據(jù).現(xiàn)在使用json

什么是json:
json是一門(mén)數(shù)據(jù)格式化語(yǔ)言,用來(lái)表示數(shù)據(jù)
https://www.json.org/
軌道圖

js與json的區(qū)別:

以下都是合法的json語(yǔ)法:

"hi"
null
["a","b"]
{"name":"馬濤濤","isBoy":true}
下面不符合!
{"x":"y"}
必須雙引號(hào)

接下來(lái)我們返回一個(gè)符合json語(yǔ)法的字符串

else if (path === "/xxx") {
    response.statusCode = 200
    response.setHeader("Content-Type", "text/xml;charset=utf-8")
    response.write(`
    {
      "note":{
        "from":"mataotao",
        "to":"ni",
        "bool":true,
        "arr":["a",1,2,3],
        "num":3
      }
    }
    `)
    response.end()

使用window.JSON這個(gè)API,把符合json語(yǔ)法的字符串轉(zhuǎn)化為js對(duì)應(yīng)的值
這個(gè)API就像window.document.getElementById一樣,是瀏覽器提供的api
修改一下main.js將json轉(zhuǎn)化為

if ( request.status>=200&&request.status<=400){
                console.log("說(shuō)明請(qǐng)求成功");
                console.log(request.responseText);
                console.log( typeof request.responseText);//string

                let string = request.responseText;
                //把符合json語(yǔ)法的字符串轉(zhuǎn)化為js對(duì)應(yīng)的值
                let object2 = window.JSON.parse(string);
                console.log( typeof object2)
                console.log(object2)
            }

這樣我們就可以用object.note.from取到"mataotao"這個(gè)字符串

http響應(yīng)第四部分永遠(yuǎn)是字符串,知識(shí)寫(xiě)的這個(gè)字符串剛好符合json對(duì)象的語(yǔ)法

一般面試大概率會(huì)問(wèn)這個(gè)問(wèn)題,寫(xiě)不對(duì)一定過(guò)不了面試

下面四句代碼一定要記住:

myButton.addEventListener("click",(e)=>{
//這四句一定要記住
    let request = new XMLHttpRequest();
    request.onreadystatechange = ()=>{
    if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
    console.log(request.responseText)
  }
    }
    request.open("GET","/xxx")//配置request.參數(shù)分別為方法和路徑
    request.send();//發(fā)送請(qǐng)求
//這四句一定要記住
})