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

想要學習的Ajax內容都在這個教程阮一峰javascript--XMLHttpRequest 對象
應該注意的點

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

AJAX 就是用 JS 發請求

響應的第四部分是字符串，可以用 JSON 語法表示一個對象，也可以用 JSON 語法表示一個數組，還可以用 XML 語法，還可以用 HTML 語法，還可以用 CSS 語法，還可以用 JS 語法，還可以用我自創的語法

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

使用form發送請求,查看請求的內容

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

那有沒有什么方式可以實現

get、post、put、delete 請求都行

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

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

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

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

使用 XMLHttpRequest 發請求

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

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

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

.

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

創建 XMLHttpRequest 實例
發出 HTTP 請求
接收服務器傳回的數據
更新網頁數據

概括起來，就是一句話，**AJAX 通過原生的XMLHttpRequest對象發出 HTTP
請求，得到服務器返回的數據后，再進行處理。現在，服務器返回的都是 JSON** 格式的數據，XML 格式已經過時了，但是 AJAX
這個名字已經成了一個通用名詞，字面含義已經消失了。

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

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()
  }

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

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

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

我們請求一個以xml格式解析的字符串,然后看看響應是什么
服務器端代碼

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.參數分別為方法和路徑
    request.send();//發送請求
})

index.html

    點我
    

當點擊點我按鈕時,查看發送的請求和收到的響應:

我們將request打印出來,看看結構:
console.log(request)

XMLHttpRequest.readyState

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

var xhr = new XMLHttpRequest();

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

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

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

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

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

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

打印一句話只用了1ms

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

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

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

結果為:

readyState在這個過程中從1變為4
readyState各個值的含義

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

01234這四個狀態是逐個經過的
我們只需要記住4,4代表請求已經把響應下載完畢了

XMLHttpRequest.onreadystatechange = callback;

當 readyState 的值改變的時候，callback 函數會被調用。

例子:

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測試
把監聽函數往上寫,這樣就不會錯過每一個readyState的變化

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

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

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

但是xml結構不方便,需要使用DOMapi去獲取數據.現在使用json

什么是json:
json是一門數據格式化語言,用來表示數據
https://www.json.org/
軌道圖

js與json的區別:

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

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

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

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

http響應第四部分永遠是字符串,知識寫的這個字符串剛好符合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.參數分別為方法和路徑
    request.send();//發送請求
//這四句一定要記住
})