數據交換格式

XML

寫法：

• 一個文檔有且只有一個根標簽
• 標簽必須閉合
• 屬性值必須加引號

如果說服務器返回的數據是xml格式的

• 前端需要把服務器返回的xml當做document對象來處理
• 目前無法演示，自己寫接口的時候，我們可以測試一下。

JSON

寫法：

• 一個json文件（數據），最大的括號只能有一個
• 字符串，必須使用雙引號

JSON的數據類型：

• number
• string
• null
• bool
• array
• object

json中不能有 undefined。也不能加注釋

XHR（level2）新特性

設置請求超時處理

// 在發送請求之前，設置 xhr.timeout = 10; // 單位：毫秒 xhr.ontimeout = function () {// 如果請求響應整個過程超過10毫秒，觸發該函數，可以給一個提示alert('請求超時，請稍后再試'); }

如果請求超過10毫秒還沒有完成，則會取消這次請求

FormData

• h5新增的一個對象
• Form-表單、Data-數據。所以他用來收集表單數據

jQuery中的serialize() 和 FormData的區別

• serialize() 只能收集到表單中的文本數據，不能收集文件，也就不能實現文件上傳
• FormData，既能收集表單中的文本數據，也能收集文件，就能夠實現文件上傳
• serialize() 得到的數據格式是 查詢字符串 id=11&name=zs&age=22...
• FormData() 得到的數據格式是 對象，傳輸的數據我們看不到，是二進制形式的數據

使用方法

• let fd = new FormData(表單的DOM對象) fd對象中就包含了表單中所有的數據

注意事項

• 實例化的時候，參數必須是表單的DOM對象
• FormData收集表單數據的時候，也是根據表單各項的name屬性來收集，也就是表單各項必須有name屬性
  • select>option （name要設置給select標簽，value要設置給每個option）

FormData相關API

• get(name) — 獲取到該項的值
• getAll() — 獲取到該項所有的值
• append(key, value) — 向fd對象中追加一個值
• set(key, value) — 設置一個值，主要用于改變fd對象中的一個值

提交fd數據到接口

• 使用原生的xhr對象提交
  • 必須使用POST方式
  • 使用支持FormData的接口（之前使用的全部接口，都不支持FormData）
  • 提交數據，直接 send(fd);
  • 不用指定請求頭，瀏覽器會自動添加合適的請求頭。
• 使用$.ajax()提交
  • 提交的數據 data: fd
  • 必須加 contentType: false
  • 必須加 processData: false

使用的接口

• 上傳文件的接口
  • /api/upload/avatar
  • 請求參數：fd 對象
    • 必須有文件上傳，并且文件域的name屬性值必須是 avatar
  • 返回值：上傳后的圖片路徑
• 用于測試FormData的接口
  • /api/formdata
  • 不能用于上傳文件，可以設置任何文本類型的值

文件上傳

使用的接口，上面的 /api/upload/avatar

通過輸出文件域的DOM對象，得到如下信息：

可以根據 文件域DOM對象.files.length 來判斷是否選擇了文件。

上傳進度條

了解axios

GET和POST的區別

同步和異步

跨域問題

總結

以上是生活随笔為你收集整理的Ajax — 第四天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。