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

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

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

• ajax示例

<script type="text/javascript">
        var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //兼容ie的ajax對象
        xhr.timeout = 1000;//設(shè)置請求超時時間
        xhr.open('get',url,false);//布爾表示是否異步發(fā)送請求
        // get方式發(fā)送請求需要發(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ù)
        }
         xhr.upload.onprogress = function(e) {
            //如果是上傳文件，可以獲取上傳進(jìn)度
        }

        xhr.send();
        // 發(fā)送方式為post時數(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>