步驟

1. 創(chuàng)建ajax對象

• XMLHttpRequest,該對象是有兼容問題的,在低版本的ie瀏覽器中不支持,標(biāo)準(zhǔn)下最新XMLHttpRequest是XMLHttpRequest2
• 低版本ie下使用：ActiveXObject('Microsoft.XMLHTTP')

let xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

2. 設(shè)置請求參數(shù)

• 第一個參數(shù)：請求方式埃仪，也就是http請求方式：get瘫拣、post
• 第二個參數(shù)：請求地址亚再，url
• 第三個參數(shù)：是否異步無阻塞鼠锈，true表示異步無阻塞

xhr.open('get', '/checkusername?username=' + this.value, false);

如果是post請求的話闪檬，必須設(shè)置頭信息

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

3. 發(fā)送請求

當(dāng)get請求時

xhr.send();

當(dāng)通過post發(fā)送請求時，用到xhr.send()购笆，括號里寫要發(fā)送的數(shù)據(jù)粗悯，必須以鍵值對的形式來發(fā)送數(shù)據(jù)

xhr.send('username=haha&age=13');

4. 監(jiān)聽返回

• onload屬性是標(biāo)準(zhǔn)的XMLHttpRequest才有的事件
• 低版本瀏覽器不支持，在標(biāo)準(zhǔn)瀏覽器下（XMLHttpRequest2）同欠，該對象還有其他的一些相關(guān)事件：error,loaded,progress,abort
• 低版本瀏覽器使用onreadystatechange事件样傍，這個事件在標(biāo)準(zhǔn)瀏覽器也是存在的
• onreadystatechange：
  • 屬性：readyState
    • ajax的工作狀態(tài)
    • 0：初始化
    • 1：調(diào)用send方法后（請求發(fā)出以后）
    • 2：請求已經(jīng)被接收處理
    • 3：客戶端接收到響應(yīng)，但是內(nèi)容還不一定完成了解析
    • 4：解析完成

xhr.onload = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
       console.log(xhr.responseText); 
    }
}

readyState

用來描述 從xhr創(chuàng)建開始铺遂，到整個請求完成铭乾，這個完整生命周期
只要當(dāng)readyState為4的時候，才表示返回的數(shù)據(jù)是可以真正使用的

status

status是表示服務(wù)端返回的狀態(tài)碼娃循。
一般而言炕檩，當(dāng)服務(wù)端返回200的時候，才表示一切ok捌斧。

我們在獲取返回結(jié)果的時候笛质，就增加了一個判斷 xhr.status == 200。

responseText

在web開發(fā)中捞蚂，服務(wù)端和瀏覽器端交換數(shù)據(jù)妇押，只有一種類型 --- 字符串
而responseText就是用來接受服務(wù)端返回的字符串。

有三種字符串表現(xiàn)形式：

• 純文本
• html字符串
• json字符串
  • 可以使用JSON.parse()把json字符串轉(zhuǎn)化成json對象

注意

在get請求的時候
如果遇到= 和 & 這些特殊符號 或者中文（IE下）
則需要用encodeURIComponent進(jìn)行轉(zhuǎn)碼

let a = encodeURIComponent(this.username);

建議 將 send方法 寫在最后面

JQ 的 ajax

$.ajax({
    url: '請求地址',
    type: 'get',//get姓迅、post
    async: 'true',//默認(rèn)為true異步
    data: '發(fā)送的數(shù)據(jù)',
    datatype: 'json',//返回的數(shù)據(jù)格式
    success(res){
        //請求成功后的回調(diào)函數(shù)
    },
    error(err){
        //請求失敗的回調(diào)函數(shù)
    },
    timeout: 1000,//設(shè)置請求超時的毫秒值
})