原生ajax和jsonp

 

封裝方法：

            function ajax(options) {
                options = options || {};
                options.type = (options.type || "GET").toUpperCase();
                options.dataType = options.dataType || "json";
                var params = formatParams(options.data);

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

                //鏈接 和 發送 - 第二步
                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);
                }

                //接收 - 第三步
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            options.success && options.success(xhr.responseText, xhr.responseXML);
                        } else {
                            options.error && options.error(xhr.status);
                        }
                    }
                }
            }
            //格式化參數
            function formatParams(data) {
                var arr = [];
                for (var name in data) {
                    arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
                }
                arr.push(("v=" + Math.random()).replace(".", ""));
                console.log(arr);
                return arr.join("&");
            }

 

請求實例：

                ajax({
                    url: "http://www.xxx.com/app/index",              //請求地址
                    type: "get",                       //請求方式
                    data: { page: "page" },        //請求參數
                    dataType: "json",
                    success: function (response, xml) {
                        // 此處放成功後執行的代碼
                        console.log(JSON.parse(response))
                    },
                    error: function (status) {
                        // 此處放失敗後執行的代碼
                    }
                });

 JSONP

JSONP的核心是動態添加script標籤來調用服務器提供的js腳本

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

 ajax與jsonp本質上不是一個東西，ajax的核心是經過XMLHttpRequest對象來獲取非本頁的內容，而jsonp則是經過動態建立script標籤來獲取服務器端的js腳本。

ajax與jsonp的本質區別不在因而否跨域，ajax經過服務器端代理（瀏覽器請求同源服務器，再由後者請求外部服務）也同樣能夠實現跨域，jsonp自己也能夠獲取同源的數據。

 

同源策略

javascript只能訪問與包含他的文檔在同一頁面下的內容。

即主機名、協議、端口相同。

//下表給出了相對http://store.company.com/dir/page.html同源檢測的示例:
//URL    結果    緣由
http://store.company.com/dir2/other.html           成功     
http://store.company.com/dir/inner/another.html    成功     
https://store.company.com/secure.html              失敗    協議不一樣
http://store.company.com:81/dir/etc.html           失敗    端口不一樣
http://news.company.com/dir/other.html             失敗    主機名不一樣