ajax 是什么？有什么作用？

1. AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），
   是一種技術(shù)的泛稱，可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下向服務(wù)器請(qǐng)求額外的數(shù)據(jù)，實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新，帶來良好的用戶體驗(yàn)。

AJAX和XMLHttpRequest的關(guān)系：
我們使用XMLHttpRequest對(duì)象來發(fā)送一個(gè)Ajax請(qǐng)求。

傳統(tǒng)HTTP請(qǐng)求流程大概如下：

• 瀏覽器向服務(wù)器發(fā)起請(qǐng)求
• 服務(wù)器根據(jù)瀏覽器傳遞的數(shù)據(jù)生成responsive
• 服務(wù)器將responsive返回給瀏覽器
• 瀏覽器刷新整個(gè)頁(yè)面顯示最新數(shù)據(jù)

這些過程是同步的，會(huì)順序執(zhí)行。
AJAX在瀏覽器與web服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP請(qǐng)求）從服務(wù)器獲取數(shù)據(jù)，這里的異步指脫離當(dāng)前瀏覽器頁(yè)面的請(qǐng)求、加載等單獨(dú)執(zhí)行，這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下通過JavaScript發(fā)送請(qǐng)求、接收服務(wù)器傳來的數(shù)據(jù)，操作DOM將更新某部分網(wǎng)頁(yè)的數(shù)據(jù)，使用AJAX對(duì)用戶來說最直觀的感受是獲取新數(shù)據(jù)無需刷新頁(yè)面。

2. AJAX優(yōu)缺點(diǎn)

• 優(yōu)點(diǎn)：
  • 更新數(shù)據(jù)頁(yè)面無需刷新，用戶體驗(yàn)更佳
  • 使用異步方式與服務(wù)器通信，響應(yīng)速度更快
  • 可將服務(wù)器以前負(fù)擔(dān)的一些工作轉(zhuǎn)嫁到客戶端，利用客戶端的閑置能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。AJAX的原則是“按需取數(shù)據(jù)”，可最大程度減少冗余請(qǐng)求
  • 作為基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，無需下載插件或小程序
  • 使因特網(wǎng)應(yīng)用程序更小、更快、更友好
• 缺點(diǎn)：
  • 不支持瀏覽器back按鈕
  • AJAX暴露了與服務(wù)器交互的細(xì)節(jié)帶來安全問題
  • 對(duì)搜索引擎的支持較弱
  • 破壞了程序的異常機(jī)制
  • 不容易調(diào)試

前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？

在開發(fā)之前，前后端需要協(xié)作商定數(shù)據(jù)和接口的各項(xiàng)細(xì)節(jié)，后端負(fù)責(zé)提供數(shù)據(jù)，前端負(fù)責(zé)展示數(shù)據(jù)（根據(jù)數(shù)據(jù)負(fù)責(zé)頁(yè)面的開發(fā)）

• 前后端開發(fā)聯(lián)調(diào)注意事項(xiàng)：

  • URL：接口名稱
  • 發(fā)送請(qǐng)求的參數(shù)和格式(get/post)
  • 數(shù)據(jù)響應(yīng)的數(shù)據(jù)格式(數(shù)組/對(duì)象)
  • 根據(jù)前后端約定，整理接口文檔

• 如何mock數(shù)據(jù)

  • 搭建web服務(wù)器
  • 根據(jù)接口文檔仿造假數(shù)據(jù)
  • 關(guān)聯(lián)前后端文件，開啟web服務(wù)器
  • 驗(yàn)證前端頁(yè)面功能及顯示是否正確

點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊?

初始時(shí)上鎖，請(qǐng)求開始時(shí)解鎖，請(qǐng)求結(jié)束時(shí)繼續(xù)上鎖，注意代碼的執(zhí)行順序與書寫順序并不一致，涉及到異步的代碼總是后執(zhí)行，比如下列代碼中，ajax部分會(huì)先執(zhí)行open和send和lock=false，后執(zhí)行onload和onerror

//添加一個(gè)狀態(tài)鎖，初始為true，上鎖為true，解鎖為false
var lock = true
btn.addEventListener('click', function () {
    //狀態(tài)為false時(shí)直接return
    if (!lock) {
        return
    }
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.onload = function () {
        //狀態(tài)正確時(shí)拿到結(jié)果，此次請(qǐng)求結(jié)束，上鎖
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.responseText)
        } else {
            console.log('error')
        }
            lock = true
    }
    xhr.onerror = function () {
        console.log('error')
    }
    xhr.send()
    //解鎖，這時(shí)候請(qǐng)求開始
    lock = false
})

封裝ajax

function ajax() {
  var url = opts.url
  var data = opts.data || {}
  var type = opts.type || 'GET'
  var dataType = opts.dataType || 'json'
  var onsuccess = opts.onsuccess || function () { }
  var onerror = opts.onerror || function () { }

  var dataStr = []
  for (var key in data) {
    dataStr.push(key + '=' + data[key])
  }
  dataStr = dataStr.join('&')

  if (type === 'GET') {
    url += '?' + dataStr
  }//get方法將字符串放在url末尾

  var xhr = new XMLHttpRequest()
  xhr.open(type, url, true)
  xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      if (dataType === 'json') {
        onsuccess(JSON.parse(xhr.responseText))
      } else {
        onsuccess(xhr.responseText)
      }
    } else {
      onerror()
    }
  }
  xhr.onerror = onerror

  if (type === 'POST') {
    xhr.send(dataStr)//post方法將字符串放在send中
  } else {
    xhr.send()//get的send內(nèi)容
  }
}

ajax({
  url: 'http://api.jirengu.com/weather.php',
  data: {
    city: '北京'
  },
  onsuccess: function (ret) {
    console.log(ret)
  },
  onerror: function () {
    console.log('服務(wù)器異常')
  }
})

實(shí)現(xiàn)加載更多的功能，后端在本地使用server-mock來模擬數(shù)據(jù)

• 代碼地址
• router.js
• 效果

參考資料

• Ajax
• 推薦閱讀：你真的會(huì)使用XMLHttpRequest嗎？