什么是ajax

是一種使用js異步獲取響應(yīng)數(shù)據(jù)，進(jìn)行頁(yè)面的局部刷新技術(shù)方案

與傳統(tǒng)的web應(yīng)用比較

傳統(tǒng)的web應(yīng)用，當(dāng)用戶(hù)發(fā)送一個(gè)http請(qǐng)求到服務(wù)器，（例如提交表單數(shù)據(jù)），這個(gè)時(shí)候用戶(hù)只能等服務(wù)器接受到數(shù)據(jù)，并作出處理，然后返回一個(gè)新的頁(yè)面給用戶(hù)，在這個(gè)過(guò)程中用戶(hù)不能做任何處理，這里面有個(gè)問(wèn)題：** 為什么要返回整個(gè)頁(yè)面給用戶(hù)進(jìn)行刷新，而不能只返回用戶(hù)需要的信息？** 因?yàn)槟莻€(gè)時(shí)候并沒(méi)有一種機(jī)制能夠在服務(wù)器處理好了數(shù)據(jù)并返回時(shí)，告訴瀏覽器我的數(shù)據(jù)返回了，可以進(jìn)行局部更新了，所以，不得不進(jìn)行整個(gè)頁(yè)面的刷新，而在這個(gè)過(guò)程中用戶(hù)只能等待服務(wù)器的數(shù)據(jù)，不能做任何事情；
而現(xiàn)在有了ajax，它提供了一種機(jī)制可以讓客戶(hù)端與服務(wù)器進(jìn)行異步通信，并局部刷新頁(yè)面，最重要的是可以讓我們監(jiān)聽(tīng)到服務(wù)器返回?cái)?shù)據(jù)的狀態(tài)，這樣就可以不需要每次刷新整個(gè)頁(yè)面

ajax的原理

ajax的核心是JavaScript、XMLHttpRequest和DOM對(duì)象；通過(guò)XMLHTttpRequest對(duì)象來(lái)向服務(wù)器發(fā)送異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后通過(guò)JavaScript操作DOM來(lái)更新頁(yè)面
簡(jiǎn)而言之就是：

發(fā)送一個(gè)ajax請(qǐng)求的步驟：

1. 創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
2. 通過(guò)onreadystatechange函數(shù)對(duì)象監(jiān)聽(tīng)狀態(tài)變化
3. 調(diào)用open()設(shè)置配置信息，包括：get/post、url+data和true（表示采用異步方式）
4. 調(diào)用send發(fā)送請(qǐng)求
   示例代碼如下：

var xhr = new XMLHttpRequest();  // 創(chuàng)建一個(gè)XMLHttpRequest請(qǐng)求
// 監(jiān)聽(tīng)狀態(tài)變化
  xhr.onreadystatechange = function(){
    // readyState === 4表示一個(gè)請(qǐng)求已經(jīng)結(jié)束
    if (xhr.readyState === 4) {
      // status表示該請(qǐng)求的
      if (xhr.status >= 200 && xhr.status < 300) {
        // 獲得響應(yīng)數(shù)據(jù)
        var data = xhr.responseText;
        if (dataType === 'json') {
          data = JSON.parse(xhr.responseText);
        }
        // 數(shù)據(jù)傳輸正確處理
        onSuccess(data);
      } else{i
        // 數(shù)據(jù)傳輸錯(cuò)誤處理
        onError();
      }
    }
  }
  // 這里是判斷發(fā)送的是get請(qǐng)求還是post請(qǐng)求，
  if (method === 'get') {
    url += '?';
    for (let key in data) {
      url += key + "=" + data[key] + "&";
    }
    url = url.substr(0, url.length - 1);
    // open函數(shù)主要是設(shè)置配置信息
    xhr.open(method, url, true);
    // send表示發(fā)送請(qǐng)求
    xhr.send();

  } else if (method === 'post') {  // 這是采用post發(fā)送
    let sendData = "";

    for (let key in data) {
      sendData += key + "=" + data[key] + "&";
    }

    sendData = sendData.substr(0, sendData.length - 1);

    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(sendData);
  }

注意點(diǎn)：

1. 發(fā)送get請(qǐng)求時(shí)，傳送的數(shù)據(jù)是以鍵值對(duì)的形式放在url中的，而post請(qǐng)求，傳送的數(shù)據(jù)是以鍵值對(duì)的形式放在send(函數(shù))中發(fā)送出去的
2. post請(qǐng)求一般設(shè)置為如下xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
3. 設(shè)置setRequestHeader，一般在open()后，send()之前

ajax的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

1. 無(wú)刷新更新數(shù)據(jù)，不需要刷新整個(gè)頁(yè)面
2. 異步與服務(wù)器通信，不需要打斷用戶(hù)操作
3. 前后端負(fù)載平衡，可以按需取數(shù)據(jù)，減少帶寬負(fù)擔(dān)

** 缺點(diǎn)**

1. 干掉了back和history功能，對(duì)瀏覽器機(jī)制的破壞
   因?yàn)闉g覽器只能記憶歷史記錄中的靜態(tài)頁(yè)面，頁(yè)面的局部更新無(wú)法保存到歷史記錄中
2. ajax的安全問(wèn)題
   ajax暴露了客戶(hù)端與服務(wù)器端的數(shù)據(jù)邏輯

XMLHttpRequest取得響應(yīng)

readyState屬性

• 0：請(qǐng)求未初始化，open還沒(méi)有調(diào)用
• 1：服務(wù)器連接已建立，open已經(jīng)調(diào)用了
• 2：請(qǐng)求已接收，也就是接收到頭信息了
• 3：請(qǐng)求處理中，也就是接收到響應(yīng)主體了
• 4：請(qǐng)求已完成，且響應(yīng)已就緒，也就是響應(yīng)完成了
  通過(guò)監(jiān)聽(tīng)readyState事件，可以判斷連接狀態(tài)，如下：
  var request = new XMLHttpRequest();
  request.open("GET", "get.php", true);
  request.send();
  request.onreadystatechange = function() {
  if (request.readyState === 4 && request.status === 200) {
  //做一些事情 request.responseText
  }
  }

json

• 在JavaScript中使用eval方法解析json數(shù)據(jù)是很危險(xiǎn)的，建議使用JSON.parse()方法
• 推薦的json數(shù)據(jù)校驗(yàn)工具： JSONLint， 它可以檢驗(yàn)json數(shù)據(jù)的語(yǔ)法錯(cuò)誤

跨域

JavaScript出于安全方面的考慮，不允許跨域調(diào)用其他頁(yè)面的對(duì)象。
跨域：簡(jiǎn)單的理解就是因?yàn)镴avaScript同源策略的限制，a.com域名下的js無(wú)法操作b.com或c.com域名下的對(duì)象。

處理跨域的方法：

1. 使用代理，通過(guò)后臺(tái)獲取數(shù)據(jù)，返回給前端
2. 使用JSONP實(shí)現(xiàn)get請(qǐng)求的跨域訪問(wèn)，注意：只能實(shí)現(xiàn)get請(qǐng)求的跨域
3. XHR2：就是HTML5提供的XMLHttpRequest Level2實(shí)現(xiàn)了跨域訪問(wèn)，但是不支持IE10以下的版本