ajax

ajax 是前后端实现交互的方案，利用浏览器的XMLHttpRequest对象，发送http请求，和接受http响应，ajax与后端的交互式异步的，可以在浏览器不刷新页面时实现页面的局部更新，但请求不会记录在浏览器的历史记录中，也就是无法前进后退

• ajax中的事件与触发条件

onreadystatechange  每当xhr.readyState改变时触发；但xhr.readyState由非0值变为0时不触发。
onloadstart 调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。
onprogress  xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每50ms触发一次。
onload  当请求成功完成时触发，此时xhr.readystate=4
onloadend   当请求结束（包括请求成功和请求失败）时触发
onabort 当调用xhr.abort()后触发
ontimeout   xhr.timeout不等于0，由请求开始即onloadstart开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件。
onerror 在请求过程中，若发生Network error则会触发此事件（若发生Network error时，上传还没有结束，则会先触发xhr.upload.onerror，再触发xhr.onerror；若发生Network error时，上传已经结束，则只会触发xhr.onerror）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是4xx时，并不属于Network error，所以不会触发onerror事件，而是会触发onload事件。

• ajax示例

<script type="text/javascript">
        var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //兼容ie的ajax对象
        xhr.timeout = 1000;//设置请求超时时间
        xhr.open('get',url,false);//布尔表示是否异步发送请求
        // get方式发送请求需要发送的数据拼接在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(){
            //超时处理函数
        }
         xhr.upload.onprogress = function(e) {
            //如果是上传文件，可以获取上传进度
        }

        xhr.send();
        // 发送方式为post时数据需要在 send(data)中发送send("key=value")
        // 可用 FormData 实现表单数据序列化 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)
            };
        };
        // 调用
        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>