ajax大家應(yīng)該都會(huì)很熟悉符喝，我們?cè)诠ぷ髦谢蚨嗷蛏俚亩紩?huì)接觸到ajax谤祖，今天我來談一談我對(duì)ajax的理解婿滓。

什么是ajax

AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)泊脐。我覺得ajax更像是一把鑰匙空幻，一把打開前端后端之間那道門的鑰匙。

ajax相比form表單的優(yōu)勢(shì)

很早之前我們都會(huì)采用form表單進(jìn)行數(shù)據(jù)的傳輸容客，但是這里卻又很多問題比如：1.刷新頁面（用戶體驗(yàn)不好）2.不能從服務(wù)器取數(shù)據(jù)
然而ajax可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新约郁，并且能獲取到后臺(tái)返回給我們的數(shù)據(jù)缩挑，小伙伴們覺得那個(gè)更適合我們使用呢。

ajax的傳輸方式及區(qū)別

大家應(yīng)該都知道ajax的傳輸方式可以分為get和post兩種鬓梅，然而它們之間卻有一些差別:

| 類型 | 大小 | 安全程度 | 傳輸方式 | 是否利于分享 |
|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|
| GET | 32kB | 不安全 | url傳輸 | 是 |
| POST | 1GB | 相對(duì)安全 | 非url傳輸數(shù)據(jù) | 不是 |

ajax的注意事項(xiàng)

1. 在服務(wù)器環(huán)境下運(yùn)行
2. 有緩存 （get）應(yīng)該在傳輸?shù)臄?shù)據(jù)后面采用：
   Math.random();
   new Date().getTime();
3. 不用關(guān)心文件后綴名
4. 編碼格式要一致
5. 返回的都是字符串

ajax的創(chuàng)建步驟

在提到ajax的創(chuàng)建步驟之前我們先聊一聊打電話把供置，當(dāng)你要給別人打電話的時(shí)候我們需要準(zhǔn)備什么呢？首先我們需要弄到一個(gè)手機(jī)(怎么弄到的我就不問了哈),之后我們要撥打?qū)Ψ降奶?hào)碼绽快，然后我們當(dāng)然要跟他說一些事情啦芥丧，最后我們應(yīng)該聽他對(duì)我們的反饋(難不成你要說完就把電話掛斷嗎？)其實(shí)仔細(xì)想想這與ajax創(chuàng)建過程不是一樣嗎坊罢？

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

if (window.XMLHttpRequest) {
    //高版本瀏覽器
    var oAjax=new XMLHttpRequest();
} else{
    //兼容ie低版本
    var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}

2. 建立連接

    //GET方式,這里的data應(yīng)該為json形式name=value&name1=value...
    oAjax.open('GET',url+'?'+data,true);

    //POST方式
    oAjax.open('POST',url,true);

3. 發(fā)送請(qǐng)求

//GET方式
 oAjax.send();

//POST方式续担，這里需要設(shè)置請(qǐng)求頭
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//這里的data應(yīng)該為json形式name=value&name1=value...
oAjax.send(data);

4. 接收數(shù)據(jù)

//這里的fnSucc和fnErr分別為成功的回調(diào)函數(shù)，以及失敗的回調(diào)函數(shù)
oAjax.onreadystatechange=function(){
    if(oAjax.readyState==4){
        if(oAjax.status>=200&&oAjax.status<300 ||oAjax.status==304){
          fnSucc && fnSucc(oAjax.responseText);
        }else{
            fnErr && fnErr(oAjax.status);
      }
    }
};

ajax中readyState的狀態(tài)以及代表的含義

類似于jQuery的方式封裝ajax

function ajax(json){
    if(!json.url){
        alert('請(qǐng)求出錯(cuò)');
        return false;
    }
    json.time=json.time||3000;
    json.type=json.type||'get';
    json.data=json.data||{};
    var timer=null;
    if(window.XMLHttpRequest){
        var oAjax=new XMLHttpRequest();
    }else{
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    switch (json.type.toLowerCase()){
        case 'get':
            oAjax.open('GET',json.url+'?'+jsonToStr(json.data),true);
            oAjax.send();
        break;
        case 'post':
            oAjax.open('POST',json.url,true);
            oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            oAjax.send(jsonToStr(json.data));
        break;
    }
    oAjax.onreadystatechange=function(){
        if(oAjax.readyState==4){
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                json.success&&json.success(oAjax.responseText);
            }else{
                json.error&&json.error(oAjax.status);
            }
            clearTimeout(timer);
        }
    }
    timer=setTimeout(function(){
        alert('服務(wù)器超時(shí)');
        oAjax.onreadystatechange=null;
    },json.time);
    function jsonToStr(json){
        var arr=[];
        json.t=Math.random();
        for(var name in json){
            arr.push(name+'='+json[name]);
        }
        return arr.join('&');
    }
}

感謝大家的觀看謝謝！