ajax 是前后端實(shí)現(xiàn)交互的方案，利用瀏覽器的XMLHttpRequest對(duì)象，發(fā)送http請(qǐng)求，和接受http響應(yīng)，ajax與后端的交互式異步的，可以在瀏覽器不刷新頁面時(shí)實(shí)現(xiàn)頁面的局部更新，但請(qǐng)求不會(huì)記錄在瀏覽器的歷史記錄中，也就是無法前進(jìn)后退

• ajax中的事件與觸發(fā)條件

onreadystatechange  每當(dāng)xhr.readyState改變時(shí)觸發(fā)；但xhr.readyState由非0值變?yōu)?時(shí)不觸發(fā)。
onloadstart 調(diào)用xhr.send()方法后立即觸發(fā)，若xhr.send()未被調(diào)用則不會(huì)觸發(fā)此事件。
onprogress  xhr.upload.onprogress在上傳階段(即xhr.send()之后，xhr.readystate=2之前)觸發(fā)，每50ms觸發(fā)一次；xhr.onprogress在下載階段（即xhr.readystate=3時(shí)）觸發(fā)，每50ms觸發(fā)一次。
onload  當(dāng)請(qǐng)求成功完成時(shí)觸發(fā)，此時(shí)xhr.readystate=4
onloadend   當(dāng)請(qǐng)求結(jié)束（包括請(qǐng)求成功和請(qǐng)求失?。r(shí)觸發(fā)
onabort 當(dāng)調(diào)用xhr.abort()后觸發(fā)
ontimeout   xhr.timeout不等于0，由請(qǐng)求開始即onloadstart開始算起，當(dāng)?shù)竭_(dá)xhr.timeout所設(shè)置時(shí)間請(qǐng)求還未結(jié)束即onloadend，則觸發(fā)此事件。
onerror 在請(qǐng)求過程中，若發(fā)生Network error則會(huì)觸發(fā)此事件（若發(fā)生Network error時(shí)，上傳還沒有結(jié)束，則會(huì)先觸發(fā)xhr.upload.onerror，再觸發(fā)xhr.onerror；若發(fā)生Network error時(shí)，上傳已經(jīng)結(jié)束，則只會(huì)觸發(fā)xhr.onerror）。注意，只有發(fā)生了網(wǎng)絡(luò)層級(jí)別的異常才會(huì)觸發(fā)此事件，對(duì)于應(yīng)用層級(jí)別的異常，如響應(yīng)返回的xhr.statusCode是4xx時(shí)，并不屬于Network error，所以不會(huì)觸發(fā)onerror事件，而是會(huì)觸發(fā)onload事件。

• ajax示例

<script type="text/javascript">
        var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //兼容ie的ajax對(duì)象
        xhr.timeout = 1000;//設(shè)置請(qǐng)求超時(shí)時(shí)間
        xhr.open('get',url,false);//布爾表示是否異步發(fā)送請(qǐng)求
        // get方式發(fā)送請(qǐng)求需要發(fā)送的數(shù)據(jù)拼接在url中 url= "url"+'?'+"key=value"  
        xhr.onreadystatechange = function(){
            // xhr.onreadystatechange 可替換成 xhr.onload
            if(xhr.readystate === 4){
                if(xhr.status==200 & xhr.status <300||xhr.status ==304){
                    console.log(xhr.responseText)
                };
            }else{
                console.log(erro)
            };
        };
        xhr.ontimeout = function(){
            //超時(shí)處理函數(shù)
        }
         xhr.upload.onprogress = function(e) {
            //如果是上傳文件，可以獲取上傳進(jìn)度
        }

        xhr.send();
        // 發(fā)送方式為post時(shí)數(shù)據(jù)需要在 send(data)中發(fā)送send("key=value")
        // 可用 FormData 實(shí)現(xiàn)表單數(shù)據(jù)序列化 xhr.send(new FormData(form))
    </script>

• ajax封裝

<script type="text/javascript">

        function ajax(option){
            
            var type = option.type||'get',
            url = option.url||'url',
            datatype = option.datatype||'json',
            data = option.data||{},
            onsuccess = option.onsuccess||function(){},
            onerror = option.onerror||function(){};

            var newArry=[];
            for(var key in data){
                    newArry.push(key+"="+data[key])
                };
            var dataStr = newArry.join('$');
            if(type==='get'){
                url = url +'?'+dataStr
            }

            // var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 
            var xhr = new XMLHttpRequest();
            xhr.timeout = 1000;
            xhr.open(type,url,true);
        
            xhr.onreadystatechange = function(){
                
                if(xhr.readyState === 4){
                    if(xhr.status>=200 && xhr.status <300||xhr.status ==304){
                        
                        if(datatype=='json'){
                            
                            data= JSON.parse(xhr.responseText);
                        }else{
                            data = xhr.responseText;
                        };
                        option.onsuccess(data);
                    }else{
                        option.onerror()
                    };
                };
            };
            xhr.ontimeout = function(){
                
            };
             xhr.upload.onprogress = function(e) {
                
            };

            if(type==='get'){
                xhr.send(null);
            }else if(type =='post'){
                xhr.send(dataStr)
            };
        };
        // 調(diào)用
        ajax({
            type:'get',
            url:'http://api.jirengu.com/weather.php',
            datatype:'json',
            data: {
                city:'北京'
            },
            onsuccess:function(data){
                console.log(data);
            },
            onerror:function(){
                console.log('error')
            }
        })
    </script>