原生JS發送Ajax請求、JSONP

一、JS原生Ajax

Ajax=異步Javascript+XML；

ajax是一種數據請求的方式，不需要刷新整個頁面。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

ajax的核心技術當然是XMLHttpRequest對象；

ajax請求過程：創建XMLHttpRequest對象、連接服務器、發送請求、接受相響應數據。

廢話少說上代碼！

 

<script type="text/javascript">
//調用ajax函數
    ajax({
        url:'./TestXHR.aspx',
        type:'POST',
        dataType:'json',
        data:{name:"馬各馬它",age:18},
        success:function(response,xml){
            //請求成功后執行的代碼
        },
        error:function(status){
            //失敗后執行的代碼
        }
    });

//創建ajax函數
    function ajax(options){
        options=options||{};
        optoins.type=(options.type||'GET').toUpperCase();
        options.dataType=options.dataType||'json';
        params=formatParams(options.data);

        //創建-第一步
        var xhr;
        //非IE6
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else{
            //ie6及其以下版本瀏覽器
            xhr=ActiveXObject('Microsoft.XMLHTTP');
        }

        //接收-第三步
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                var status=xhr.status;
                if(status>=200&&status<300){
                    options.success&&options.success(xhr.responseText,xhr.responseXML);
                }else{
                    options.error&&options.error(status);
                }
            }
        }

        //連接和發送-第二步
        if(options.type=='GET'){
            xhr.open('GET',options.url+'?'+params,true);
            xhr.send(null);
        }else if(options.type=='POST'){
            xhr.open('POST',options.url,true);
            //設置表單提交時的內容類型
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
    }

    //格式化參數
    function formatParams(data){
        var arr=[];
        for(var name in data){
            arr.push(encodeURIComponent(name)+'='+encodeURIComponent(data[name]));
        }
        arr.push(('v='Math.random()).replace('.',''));
        return arr.join('&');
    }
</script>

如果你有看不懂的地方，磨嘰，待我娓娓道來：

1.創建

創建沒什么好說的，兼容各個版本的瀏覽器。

2.連接和發送

2.1、open(method,url,async)：規定請求類型（POST或GET）、請求地址url、異步（true）同步（false）.大多都是異步；

通過 AJAX，JavaScript 無需等待服務器的響應，而是：

• 在等待服務器響應時執行其他腳本
• 當響應就緒后對響應進行處理

2.2、GET請求方式是通過URL參數將數據提交到服務器的，POST則是通過將數據作為send的參數提交到服務器；

2.3、POST請求中，在發送數據之前，要設置表單提交的內容類型；

2.4、提交到服務器的參數必須經過encodeURIComponent()方法進行編碼，實際上在參數列表“key=value”的形式中，key和value都需要進行編碼，因為胡包含特殊字符。每次請求的時候都會在參數列表中拼入一個“v=xx”的隨機字符串，這樣是為了拒絕緩存，每次都直接請求到服務器上。

encodeURI():用於整個URI的編碼，不會對本身屬於URI的特殊字符串進行編碼，如 : / ? # 其對應的解碼函數decodeURI();

encodeURIComponent():用於對URI中的某一部分進行編碼，會對它發現的任何非標准字符進行編碼；其他對應的解碼函數decodeURIComponent();

2.5、setRequestHeader(header,value):向請求添加請求頭。header:規定頭的名稱，value:規定頭的值

 

3.接收

3.1、接收到響應后，響應的數據會自動填充XHR對象，相關屬性如下

responseText:獲得字符串形式的響應數據；

responseXML:獲得XML形式的響應數據；

status:響應的HTTP狀態碼；

statusText:HTTP狀態的說明；

3.2、XHR對象的readyState屬性表示請求/響應過程的當前活動階段，這個屬性的值如下
0-未初始化，尚未調用open()方法；
1-啟動，調用了open()方法，未調用send()方法； 服務器連接已建立；
2-發送，已經調用了send()方法，未接收到響應； 請求已接收；
3-接收，已經接收到部分響應數據； 請求處理中；
4-完成，已經接收到全部響應數據； 請求已完成；

只要 readyState 的值變化，就會調用 readystatechange 事件，(其實為了邏輯上通順，可以把readystatechange放到send之后，因為send時請求服務器，會進行網絡通信，需要時間，在send之后指定readystatechange事件處理程序也是可以的，我一般都是這樣用，但為了規范和跨瀏覽器兼容性，還是在open之前進行指定吧)。

3.3、在readystatechange事件中，先判斷響應是否接收完成，然后判斷服務器是否成功處理請求，xhr.status 是狀態碼，狀態碼以2開頭的都是成功，304表示從緩存中獲取，上面的代碼在每次請求的時候都加入了隨機數，所以不會從緩存中取值，故該狀態不需判斷。

4、ajax請求是不能跨域的！ 

 

二、JSONP

JSONP(JSON with Padding) 是一種跨域請求方式。主要原理是利用了script 標簽可以跨域請求的特點，由其 src 屬性發送請求到服務器，服務器返回 js 代碼，網頁端接受響應，然后就直接執行了，這和通過 script 標簽引用外部文件的原理是一樣的。

JSONP由兩部分組成：回調函數和數據，回調函數一般是由網頁端控制，作為參數發往服務器端，服務器端把要返回的數據拼成字符串作為函數的參數傳入。

比如網頁端創建一個 script 標簽，並給其 src 賦值為 http://www.example.com/json/?callback=process， 此時網頁端就發起一個請求。服務端將要返回的數據拼好最為函數的參數傳入，服務端返回的數據格式類似”process({‘name’:’example’})”，網頁端接收到了響應值，因為請求者是 script，所以相當於直接調用 process 方法，並且傳入了一個參數。

單看響應返回的數據，JSONP 比 ajax 方式就多了一個回調函數。

 

function jsonp(options) {
        options = options || {};
        if (!options.url || !options.callback) {
            throw new Error("參數不合法");
        }

        //創建 script 標簽並加入到頁面中
        var callbackName = ('jsonp_' + Math.random()).replace(".", "");
        var oHead = document.getElementsByTagName('head')[0];
        options.data[options.callback] = callbackName;
        var params = formatParams(options.data);
        var oS = document.createElement('script');
        oHead.appendChild(oS);

        //創建jsonp回調函數
        window[callbackName] = function (json) {
            oHead.removeChild(oS);
            clearTimeout(oS.timer);
            window[callbackName] = null;
            options.success && options.success(json);
        };

        //發送請求
        oS.src = options.url + '?' + params;

        //超時處理
        if (options.time) {
            oS.timer = setTimeout(function () {
                window[callbackName] = null;
                oHead.removeChild(oS);
                options.fail && options.fail({ message: "超時" });
            }, time);
        }
    };

    //格式化參數
    function formatParams(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[i]));
        }
        return arr.join('&');
    }

1、因為 script 標簽的 src 屬性只在第一次設置的時候起作用，導致 script 標簽沒法重用，所以每次完成操作之后要移除；

2、JSONP這種請求方式中，參數依舊需要編碼；

3、如果不設置超時，就無法得知此次請求是成功還是失敗；