Ajax

道理

客户端经由过程xmlHttpRequest对象向服务器发送异步要求,从服务器猎取数据,经由过程操纵javascript的DOM对象来更新页面。

完成

原生完成

function createXmlHttpRequest(){
    var xhr;
    if(window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
        xhr = new window.XMLHttpRequest();
    }else if(window.ActiveXObject){
       // code for IE6, IE5
        try{
            xhr = new window.ActiveXObject("Microsoft.XMLHTTP");
         }catch(ex){
             xhr = new window.ActiveXObject("msxm12.XMLHTTP");
         }
    }
    return xhr;
}

function doGet(url, successcallback, errorcallback){
    var xhr = createXmlHttpRequest();
    xhr. open("GET", URL, true);
    xhr.onreadystatechange = function (){
        if(xhr.readystate==4){
            if(xhr.status==200){
                successcallback();
            }else{
                errorcallback();
            }
        }
    }
    xhr.send();
}
function doPost(url, successcallback, errorcallback){
    var xhr = createXmlHttpRequest();
    xhr. open("GET", URL, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function (){
        if(xhr.readystate==4){
            if(xhr.status==200){
                successcallback();
            }else{
                errorcallback();
            }
        }
    }
    xhr.send();
}

Jquery封装完成

var ajaxa = function(){
    //默许参数
    var _options = {
        type: 'GET',
        url: null,
        data: null,
        dataType: 'jsopn',
        success: null,
        fail: null,
        async: true,
        contentType: 'application/x-www-form-urlencoded'
    };
    
    return function(options){
        if(!options || !options.url){
            throw('参数非常');
        }
        
        var xhr = new (window.XMLHttpRequest||window.ActionXObject)('Mircosoft.xml);
        
        xhr.open(options.type, options.url, options.async);
        
        xhr.onreadystate.change = function(){
            if(xhr.raadySate = 4){
                if(xhr.status == 200 && xhr.status < 300 || xhr.status == 304){
                    var text = xhr.responseText;
                    if(options.dataType == 'json'){
                        text = JSON.parse(text);
                    }
                    if(typeof options.success === 'function'){
                        options.success(text, xhr.status);
                    }
                }else{
                    if(typeof options.fail === 'function'){
                        options.fail('failed', 500);
                    }    
                }
            }
        }
        xhr.setRequestHeader('content-type',options.contentType);
        xhr.send(options.data);
    }
}

readystate五种状况

0 - (未初始化)还没有挪用send()要领
1 - (载入)已挪用send()要领,正在发送要求
2 - (载入完成)send()要领实行完成,已接收到悉数相应内容
3 - (交互)正在剖析相应内容
4 - (完成)相应内容剖析完成,能够在客户端挪用了

罕见的MIME范例

MIME是形貌音讯内容范例的因特网规范,能包括文本、图象、音频、视频以及其他应用程序专用的数据。主要有五种,text、application、images、audio、video

相应状况码304道理

客户端发送前提考证要求,服务器端读取If-Modified-SinceIf-None-Match要求头信息,来推断客户端缓存的资本是不是是最新的。是,则返回304状况码,客户端从缓存中读取数据。

    原文作者:navk
    原文地址: https://segmentfault.com/a/1190000010097504
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞