數(shù)據(jù)交換格式

XML

寫法：

• 一個(gè)文檔有且只有一個(gè)根標(biāo)簽
• 標(biāo)簽必須閉合
• 屬性值必須加引號(hào)

如果說服務(wù)器返回的數(shù)據(jù)是xml格式的

• 前端需要把服務(wù)器返回的xml當(dāng)做document對(duì)象來處理
• 目前無法演示，自己寫接口的時(shí)候，我們可以測(cè)試一下。

JSON

寫法：

• 一個(gè)json文件（數(shù)據(jù)），最大的括號(hào)只能有一個(gè)
• 字符串，必須使用雙引號(hào)

JSON的數(shù)據(jù)類型：

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

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

XHR（level2）新特性

設(shè)置請(qǐng)求超時(shí)處理

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

如果請(qǐng)求超過10毫秒還沒有完成，則會(huì)取消這次請(qǐng)求

FormData

• h5新增的一個(gè)對(duì)象
• Form-表單、Data-數(shù)據(jù)。所以他用來收集表單數(shù)據(jù)

jQuery中的serialize() 和 FormData的區(qū)別

• serialize() 只能收集到表單中的文本數(shù)據(jù)，不能收集文件，也就不能實(shí)現(xiàn)文件上傳
• FormData，既能收集表單中的文本數(shù)據(jù)，也能收集文件，就能夠?qū)崿F(xiàn)文件上傳
• serialize() 得到的數(shù)據(jù)格式是 查詢字符串 id=11&name=zs&age=22...
• FormData() 得到的數(shù)據(jù)格式是 對(duì)象，傳輸?shù)臄?shù)據(jù)我們看不到，是二進(jìn)制形式的數(shù)據(jù)

使用方法

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

注意事項(xiàng)

• 實(shí)例化的時(shí)候，參數(shù)必須是表單的DOM對(duì)象
• FormData收集表單數(shù)據(jù)的時(shí)候，也是根據(jù)表單各項(xiàng)的name屬性來收集，也就是表單各項(xiàng)必須有name屬性
  • select>option （name要設(shè)置給select標(biāo)簽，value要設(shè)置給每個(gè)option）

FormData相關(guān)API

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

提交fd數(shù)據(jù)到接口

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

使用的接口

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

文件上傳

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

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

可以根據(jù) 文件域DOM對(duì)象.files.length 來判斷是否選擇了文件。

上傳進(jìn)度條

了解axios

GET和POST的區(qū)別

同步和異步

跨域問題

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。