xhr、XMLHttpRequest使用

XMLHttpRequest

概念：XMLHttpRequest（簡稱 xhr）是瀏覽器提供的 Javascript 對象，通過它，可以請求服務器上的數據資源

    jQuery 中的 Ajax 函數，就是基於 xhr 對象封裝出來的

使用xhr發起GET請求

• 創建 xhr 對象

• 調用 xhr.open() 函數

• 調用 xhr.send() 函數

• 監聽 xhr.onreadystatechange 事件

// 1. 創建 XHR 對象
var xhr = new XMLHttpRequest()
// 2. 調用 open 函數
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
// 3. 調用 send 函數
xhr.send()
// 4. 監聽 onreadystatechange 事件
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
     // 獲取服務器響應的數據
     console.log(xhr.responseText)
   }
}

xhr對象的readyState屬性

XMLHttpRequest 對象的 readyState 屬性，用來表示當前 Ajax 請求所處的狀態

每個 Ajax 請求必然處於以下狀態中的一個：

使用xhr發起帶參數的GET請求

使用 xhr 對象發起帶參數的 GET 請求時，只需在調用 xhr.open 期間，為 URL 地址指定參數即可

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
xhr.send()
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
     console.log(xhr.responseText)
  }
}

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

查詢字符串

概念：查詢字符串（URL 參數）是指在 URL 的末尾加上用於向服務器發送信息的字符串（變量

格式：將英文的 ? 放在URL 的末尾，然后再加上 參數＝值 ，想加上多個參數的話，使用 & 符號進行分隔。以這個形式，可以將想要發送給服務器的數據添加到 URL 中。

GET請求攜帶參數的本質：都是直接將參數以查詢字符串的形式，追加到 URL 地址的后面，發送到服務器的。

 URL編碼與解碼

編碼：URL 地址中，只允許出現英文相關的字母、標點符號、數字，因此，在 URL 地址中不允許出現中文字符。如果 URL 中需要包含中文這樣的字符，則必須對中文字符進行編碼（轉義）

URL編碼原則的通俗理解：使用英文字符去表示非英文字符

對URL進行編碼與解碼

• encodeURI() 編碼的函數

• decodeURI() 解碼的函數

encodeURI('程序員')
decodeURI（'%E9%A9%AC'）
//輸出字符 程序員

瀏覽器會自動對 URL 地址進行編碼操作，因此，大多數情況下，程序員不需要關心 URL 地址的編碼與解碼操作

使用xhr發起POST請求

步驟

• 創建 xhr 對象

• 調用 xhr.open() 函數

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

• 調用 xhr.send() 函數，同時指定要發送的數據

• 監聽 xhr.onreadystatechange 事件

// 1. 創建 xhr 對象
var xhr = new XMLHttpRequest()
// 2. 調用 open 函數
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 設置 Content-Type 屬性（固定寫法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 調用 send 函數
xhr.send('bookname=水滸傳&author=施耐庵&publisher=上海圖書出版社')
// 5. 監聽事件
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}

數據交換格式

概念：服務器端與客戶端之間進行數據傳輸與交換的格式

前端領域，常提及的兩種數據交換格式分別是 XML 和 JSON，其中 XML 用的非常少，以數據交換格式 JSON為主。

 XML

概念：XML 的英文全稱是 EXtensible Markup Language，即可擴展標記語言 ，XML 和 HTML 類似，也是一種標記語言。

XML和HTML的區別

XML 和 HTML 雖然都是標記語言，但是，它們兩者之間沒有任何的關系。

• HTML 被設計用來描述網頁上的內容，是網頁內容的載體

• XML 被設計用來傳輸和存儲數據，是數據的載體

 

 XML的缺點

•  XML 格式臃腫，和數據無關的代碼多，體積大，傳輸效率低

• 在 Javascript 中解析 XML 比較麻煩

JSON

概念：JSON 的英文全稱是 JavaScript Object Notation，即“JavaScript 對象表示法”

簡單來講，JSON 就是 Javascript 對象和數組的字符串表示法，它使用文本表示一個 JS 對象或數組的信息，因此，

JSON 的本質是字符串。

 

 作用：JSON 是一種輕量級的文本數據交換格式，在作用上類似於 XML，專門用於存儲和傳輸數據，但

是 JSON 比 XML 更小、更快、更易解析。

現狀：JSON 是在 2001 年開始被推廣和使用的數據格式，到現今為止，JSON 已經成為了主流的數據交

換格式

JSON的兩種結構

 對象結構

對象結構在 JSON 中表示為 { } 括起來的內容。數據結構為 { key: value, key: value, … } 的鍵值對結構。其中，key 必須是使用英文的雙引號包裹的字符串，value 的數據類型可以是數字、字符串、布爾值、null、數組、對象6種類型。

 

 

 數組結構

數組結構在 JSON 中表示為 [ ] 括起來的內容。數據結構為 [ "java", "javascript", 30, true … ] 。

數組中數據的類型可以是數字、字符串、布爾值、null、數組、對象6種類型。

 

 JSON語法注意事項

① 屬性名必須使用雙引號包裹

② 字符串類型的值必須使用雙引號包裹

③ JSON 中不允許使用單引號表示字符串

④ JSON 中不能寫注釋

⑤ JSON 的最外層必須是對象或數組格式

⑥ 不能使用 undefined 或函數作為 JSON 的值

JSON 的作用：在計算機與網絡之間存儲和傳輸數據。

JSON 的本質：用字符串來表示 Javascript 對象數據或數組數據

JSON和JS對象的關系

JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質是一個字符串。例如：

 

 JSON和JS對象的互轉

要實現從 JSON 字符串轉換為 JS 對象，使用 JSON.parse() 方法：

 

 

要實現從 JS 對象轉換為 JSON 字符串，使用 JSON.stringify() 方法：

var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
    console.log(typeof xhr.responseText)
    var result = JSON.parse(xhr.responseText)
    console.log(result)
  }
}

序列化和反序列化

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

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

 XMLHttpRequest Level2的新特性

舊版XMLHttpRequest的缺點

• 只支持文本數據的傳輸，無法用來讀取和上傳文件

• 傳送和接收數據時，沒有進度信息，只能提示有沒有完成

XMLHttpRequest Level2的新功能

• 可以設置 HTTP 請求的時限

• 可以使用 FormData 對象管理表單數據

• 可以上傳文件

• 可以獲得數據傳輸的進度信息
  

 設置HTTP請求時限

 -----------------------------------------------------------------未完待更新----------------------------------------------------------------------------------