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

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

JS 是一門語言，JSON 是另一門語言，JSON 這門語言抄襲了 JS這門語言

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

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

用 form 可以發(fā)請求，但是會刷新頁面或新開頁面
用 a 可以發(fā) get 請求，但是也會刷新頁面或新開頁面
用 img 可以發(fā) get 請求，但是只能以圖片的形式展示
用 link 可以發(fā) get 請求，但是只能以 CSS、favicon 的形式展示
用 script 可以發(fā) get 請求，但是只能以腳本的形式運行

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

password=123456就是POST請求的第四部分

那有沒有什么方式可以實現(xiàn)

get、post、put、delete 請求都行

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

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

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

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

使用 XMLHttpRequest 發(fā)請求

服務(wù)器返回 XML 格式的字符串(因為當(dāng)時XML在當(dāng)時是流行的數(shù)據(jù)傳輸格式,后來用json)

JS 解析 XML，并更新局部頁面

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

.

具體來說，AJAX 包括以下幾個步驟。

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

概括起來，就是一句話，**AJAX 通過原生的XMLHttpRequest對象發(fā)出 HTTP
請求，得到服務(wù)器返回的數(shù)據(jù)后，再進(jìn)行處理?，F(xiàn)在，服務(wù)器返回的都是 JSON** 格式的數(shù)據(jù)，XML 格式已經(jīng)過時了，但是 AJAX
這個名字已經(jīng)成了一個通用名詞，字面含義已經(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()
  }

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

http請求的路徑都是絕對路徑.所以都是以/開頭

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

我們請求一個以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ā)送請求
})

index.html

    點我
    

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

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

XMLHttpRequest.readyState

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

var xhr = new XMLHttpRequest();

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

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

下面我們從時間角度看看這個過程

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

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

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

打印一句話只用了1ms

所以9ms對于瀏覽器來說,對于代碼來說是很長的,可以做很多事情.

接下來看看readyState屬性在一次請求中的變化過程

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

結(jié)果為:

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

剛剛只顯示了1和4的原因是因為2,3太快,比一毫秒還快

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

XMLHttpRequest.onreadystatechange = callback;

當(dāng) readyState 的值改變的時候，callback 函數(shù)會被調(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測試
把監(jiān)聽函數(shù)往上寫,這樣就不會錯過每一個readyState的變化

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

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

 request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("請求和響應(yīng)都完畢了");
            if ( request.status>=200&&request.status<=400){
                console.log("說明請求成功");
                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是一門數(shù)據(jù)格式化語言,用來表示數(shù)據(jù)
https://www.json.org/
軌道圖

js與json的區(qū)別:

以下都是合法的json語法:

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

接下來我們返回一個符合json語法的字符串

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這個API,把符合json語法的字符串轉(zhuǎn)化為js對應(yīng)的值
這個API就像window.document.getElementById一樣,是瀏覽器提供的api
修改一下main.js將json轉(zhuǎn)化為

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

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

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

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

一般面試大概率會問這個問題,寫不對一定過不了面試

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

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ā)送請求
//這四句一定要記住
})