原生JS發送Ajax請求、JSONP

時間 2019-11-18

標籤原生發送 ajax 請求 jsonp 欄目 JavaScript 简体版

原文原文鏈接

注意了，劃重點了，這一題考不到算我輸！javascript

1、JS原生Ajaxjava

Ajax=異步Javascript+XML；ajax

ajax是一種數據請求的方式，不須要刷新整個頁面。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。json

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.建立網絡

建立沒什麼好說的，兼容各個版本的瀏覽器。app

2.鏈接和發送

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

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

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

2.二、GET請求方式是經過URL參數將數據提交到服務器的，POST則是經過將數據做爲send的參數提交到服務器；

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

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

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

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

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

3.接收

3.一、接收到響應後，響應的數據會自動填充XHR對象，相關屬性以下

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

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

status:響應的HTTP狀態碼；

statusText:HTTP狀態的說明；

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

只要 readyState 的值變化，就會調用 readystatechange 事件，(其實爲了邏輯上通順，能夠把readystatechange放到send以後，由於send時請求服務器，會進行網絡通訊，須要時間，在send以後指定readystatechange事件處理程序也是能夠的，我通常都是這樣用，但爲了規範和跨瀏覽器兼容性，仍是在open以前進行指定吧)。

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

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

2、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('&');
    }