用原生js的方式發起網絡請求

用原生js發起網絡請求：

首先要明確的是，什么是XMLHttpRequest？

(XMLHttpRequest)簡稱xhr，是瀏覽器提供的javascript對象，我們可以通過與這個對象，請求服務器上面的數據資源，不管是jQuery的Ajax函數還是別的框架，都是基於xhr，進行封裝出來的；

 

 

使用xhr發起GET請求

步驟：

1.創建xhr對象；

2.調用xhr.open()函數；

3.調用xhr.send()函數；

4.監聽xhr.onreadystatechange事件；

 1 // 創建XHR對象
 2         var xhr = new XMLHttpRequest();
 3 // 調用open函數
 4         xhr.open("GET",
 5 "http://www.liulongbin.top:3006/api/getbooks")
 6 // 調用send函數,發起請求    
 7         xhr.send()
 8 // 監聽onreadystatechange事件
 9         xhr.onreadystatechange = function () {
10 //判斷服務器返回的狀態信息是否全等於4且http響應狀態碼是否等於200；
11         if (xhr.readyState === 4 && xhr.status === 200) {
12                 //打印JSON字符串形式的服務器響應數據；
13                 console.log(xhr.responseText);
14                    //檢測數據類型返回string
15                 console.log(typeof xhr.responseText);
16             }
17         }

xhr.readyState：狀態信息。而且狀態也是不可逆的；

0：請求未初始化，還沒有調用 open()。

1：請求已經建立，但是還沒有發送，還沒有調用 send()。

2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。

3：請求在處理中；通常響應中已有部分數據可用了，沒有全部完成。

4：響應已完成；您可以獲取並使用服務器的響應了。

xhr.status：HTTP響應狀態碼;

[信息響應]( `100`– `199`)；
[成功響應]( `200`– `299`)；
[重定向消息]( `300`– `399`)；
[客戶端錯誤響應]( `400`– `499`)；
[服務器錯誤響應]( `500`- `599`)；

使用xhr發起帶參數的get請求；

只需要在調用xhr.open期間，為url地址指定參數就可以了；

xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1")

這種在URL地址后面拼接的參數，叫做查詢字符串；

GET請求攜帶參數的本質：

無論使用$.ajax(),還是使用$.get(),又或者直接使用xhr對象發起的get請求，當需要攜帶參數的時候，本質上，都是直接將參數以查詢字符串的形式，追加到URL的后面，發送到服務器的；

$.get('url',{name:'ss',age:20},function(){})
//等價於
$.get('url?name=ss&age=20',function(){})

$.ajax({method:'GET',url:'url',data:{name:'ss',age:20},success:function(){}})
//等價於        
$.ajax({method:'GET',url:'url?name=ss&age=20',success:function(){}})

使用xhr............

創建xhr對象

調用xhr.open()函數

設置Content-Type屬性（固定的寫法）

調用xhr.send()函數，指定發送的數據；

監聽xhr.onreadystatechange事 1 // 1. 創建 xhr 對象

 2         var xhr = new XMLHttpRequest();
 3         // 2. 調用 open 函數
 4         xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook");
 5         // 3. 設置 Content-Type 屬性（固定寫法）
 6         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 7         // 4. 調用 send 函數
 8         xhr.send(`bookname=yyds&author=yyds&publisher=yyds`);
 9         // 5. 監聽事件
10         xhr.onreadystatechange = function () {
11             if (xhr.readyState === 4 && xhr.status === 200) {
12                 console.log(xhr.responseText);
13                 console.log(typeof xhr.responseText);
14                　　 　//JSON.parse方法可以把服務器返回過來的JSON字符串數據轉化為對象的形式；
15                     var result = JSON.parse(xhr.responseText)
16                     //控制台打印轉化的完成的對象；
17                     console.log(result)
18                     //打印對象，以數組的形式返回
19                     console.log(result.data)
20                　　 //相反JSON.stringify()方法，可以把對象轉化為JSON字符串數據的形式
21                     var json=JSON.stringify(result)
　　　　　　　　　　　　　　console.log(json)
22             }
23         }

把數據對象 轉換為 字符串的過程，叫做序列化，例如：調用 JSON.stringify() 函數的操作，叫做 JSON 序列化。

把字符串 轉換為 數據對象的過程，叫做反序列化，例如：調用 JSON.parse() 函數的操作，叫做 JSON 反序列化。