Ajax

啥是Ajax？

JS 語言 和 服務端 互動的手段，
全稱：Asynchronous JavaScript and XML

ajax 的特點

1. 不需要插件的支持，原生 js 就可以使用
2. 用戶體驗好（不需要重繪頁面就可以更新資料）
3. 減輕服務端和帶寬的負擔
4. 缺點： 搜索引擎的支持度不夠，因為資料都不在頁面上，搜索引擎搜索不到
5. 前進、后退的功能被破壞（因為 Ajax 永遠在當前頁，不會記錄前后頁面)

創建一個ajax請求

// 1. 創建 ajax 物件
//IE9以上
let xhr = new XMLHttpRequest()
//IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
// 2. 配置請求資訊
xhr.open(‘GET’, ‘./test.php’, true)
// 3. 發送請求
xhr.send()
// 4. 接受回應
xhr.onload = function () {
  console.log(xhr.responseText)
}

ajax狀態碼

0 => 創建 ajax 物件成功
1 => 配置請求資訊成功
2 => 回應已經回到瀏覽器
3 => 瀏覽器正在決議回應體
4 => 回應體決議完畢可以使用了

HTTP回應狀態碼

100 ~ 199表示連接繼續
200 ~ 299各種成功
300 ~ 399重定向
400 ~ 499客戶端錯誤
500 ~ 599服務端錯誤

常見的HTTP請求

GET – 向服務器獲取
POST – 向服務器傳遞
PUT – 向服務器傳遞，并讓服務器添加
DELETE – 讓服務器洗掉
HEAD – 只是用于獲取回應頭
PACTH – 和 PUT 類似， 只不過更傾向于更新區域資料
CONNECT – 預留方式， 管道連接更改為代理連接使用
OPTIONS – 允許客戶端查看服務端性能

GET 和 POST 的區別

1. 語意化不一樣：GET 傾向于從服務器獲取資料；POST 傾向于向服務器提交資料，
2. 傳遞引數的方式：GET 請求直接在地址欄后面拼接；POST 請求在請求體里面傳遞，
3. 引數的大小限制：GET 請求一般不大于 2KB；POST 請求理論上沒有上限，
4. 快取能力：GET 會被瀏覽器主動快取；POST 不會被瀏覽器主動快取，
5. 安全性能：GET 請求相對安全性比較低；POST 請求相對安全性比較高，

GET 和 POST發送資料

 get：
     將資料在，url后，拼接即可
 post：
     將資料放在send的引數內，但是提前要設定發送資料的格式：
     ajax物件.setRequestHeader("Content-type","application/x-www-form-urlencoded");

ajax的兼容處理

//創建
// 標準瀏覽器
let xhr = new XMLHttpRequest()
// IE 低版本
let xhr = new ActiveXObject(‘Microsoft.XMLHTTP’)

//接收回應
// 標準瀏覽器
xhr.onload = function () {
  console.log(xhr.responseText)
}
// IE 低版本
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}

發送一個帶有引數的 get 請求

• get 請求的引數就直接在 url 后面進行拼接就可以

  const xhr = new XMLHttpRequest()
  // 直接在地址后面加一個 ?，然后以 key=value 的形式傳遞
  // 兩個資料之間以 & 分割
  xhr.open('get', './data.php?a=100&b=200')
  
  xhr.send()
  

  • 這樣服務端就能接受到兩個引數
  • 一個是 a，值是 100
  • 一個是 b，值是 200

發送一個帶有引數的 post 請求

• post 請求的引數是攜帶在請求體中的，所以不需要再 url 后面拼接

  const xhr = new XMLHttpRequest()
  xhr.open('get', './data.php')
  
  // 如果是用 ajax 物件發送 post 請求，必須要先設定一下請求頭中的 content-type
  // 告訴一下服務端我給你的是一個什么樣子的資料格式
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  
  // 請求體直接再 send 的時候寫在 () 里面就行
  // 不需要問號，直接就是 'key=value&key=value' 的形式
  xhr.send('a=100&b=200')
  

  • application/x-www-form-urlencoded 表示的資料格式就是 key=value&key=value

ajax環境

1. 在服務器環境下運行
2. 異步請求資料：同時執行，效率高，當前請求不會影響其它程式；可以在不中斷瀏覽器其他任務的情況下加載新資料，即無重繪加載資料；提高用戶體驗；減輕服務端和帶寬的負擔，
3. 由此引出JS的執行機制：1.js自身是一個單執行緒的編程語言；2.上一行代碼沒有執行完，下一行代碼必然不能執行，執行速度慢；3.利用異步模擬了多執行緒的執行程序，

異步

1. 事件產生的異步
   ①var a=10; document.οnclick=function(){a=20; }console.log(a); 此時列印的a為10；
   原因：系結事件的程序執行了，但是只是執行了系結事件，系結事件的函式沒有被執行
2. 計時器，延時器產生的異步
   ②var a=10; setTimeout(()=>{a=20;},100);console.log(a);
   計時器自身是同步執行了的，只是內部的回呼函式沒有執行在等待；內部的回呼函式與外部代碼之間是異步：會有一瞬間在行程中同時存在
3. ajax請求結束
4. 異步產生的問題
   1.異步表示將來
   2.當前無法獲取將來
   3.只能將來獲取將來

封裝Ajax

function ajax(ops){
    ops.type = ops.type || "get";
    ops.data = ops.data || "";
    // ops.url = ops.type=="get" ? ops.url + "?" + ops.data : ops.url;
    if(ops.type=="get"){
        // 在get請求時，使用時間戳避免，快取問題
        let t = new Date().getTime();
        ops.url = ops.url + "?__qft="+ t + "&" + ops.data;
    }
    var xhr = new XMLHttpRequest();
    xhr.open(ops.type, ops.url);
    if(ops.type == "get"){
        xhr.send();
    }else{
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(ops.data);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            ops.success(xhr.responseText);
        }
    }
}