摘要：通信類什么是同源策略及限制同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的關鍵的安全機制。源協議域名端口默認三個構成一個源。

同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的關鍵的安全機制。
源：協議、域名、端口（默認 80）三個構成一個源。 不是一個源的文檔無法去操作另一個源的資源。

限制：

- Cookie、LocalStorage 和 IndexDB 
- Dom 無法獲得 
- Ajax 不能發送

Ajax 同源下

WebSocket 不限制

CORS 支持跨源通信 也支持同源通信

XMLHttpRequest 對象的工作流程
  兼容性處理（IE 瀏覽器的處理）
  事件的觸發條件
  事件的觸發順序

if(opt.url){
    // 聲明XMLHttpRequest 對象的工作流程
    var xhr = XMLHttpRequest ? new XMLHttpRequest () : new window.ActiveXObject("Microsoft.XMLHTTP");
    var data = opt.data,
        url = opt.url,
        type = opt.type.toUpperCase(),
        dataArr = [];
    for (var k in data) {
        dataArr.push(k + "=" + data[k]);
    }
    if (type === "GET") {
        url = url +"?" + dataArry.join("&");
        xhr.open(type,url.replace(/?$/g,""),true);
        xhr.send();
    }
    if (type === "POST") {
        xhr.open(type,url,true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(dataArry.join("&"));
    }
    // 監聽它成功失敗
    xhr.onload = function () {
        // 200：304：重定向，利用本地緩存
        if (xhr.status === 200 || xhr.status === 304 ) { // 媒體資源加206
            var res;
            if (opt.success && opt.success instanceof Function) {
                res = xhr.responseText;
                if(typeof res === "String") {
                    res = JSON.parse(res);
                    opt.success.call(xhr,res);
                }
            }
        } else {
            if (opt.error && opt.error instanceof Function) {
                opt.error.call(xhr,res); 
                }
            }
        }
    }

JSONP

Hash 「url 地址中 # 后面的東西是 Hash， Hash改變頁面不改變」「url 地址中 ？后面的東西是Search，Search 改變頁面刷新」

postMessage「Html5 新增的，同源策略限制跨域通信，但實際的開發業務中我們又需要用到跨域通信，所以出現這種方式」

WebSocket「不受同源策略限制」

CORS 「支持跨域通信的 Ajax ，瀏覽器在識別你用Ajax發送跨域請求時，瀏覽器會在 HTTP 頭中加一個 Origin，如果沒有瀏覽器就會攔截」

var util = {};

 /**
  * [function 在頁面中注入js腳本]
  * @param  {[type]} url     [description]
  * @param  {[type]} charset [description]
  * @return {[type]}         [description]
  */
 util.createScript = function (url, charset) {
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    charset && script.setAttribute("charset", charset);
    script.setAttribute("src", url);
    script.async = true;
    return script;
};

 /**
  * [function jsonp]
  * @param  {[type]} url      [description]
  * @param  {[type]} onsucess [description]
  * @param  {[type]} onerror  [description]
  * @param  {[type]} charset  [description]
  * @return {[type]}          [description]
  */
util.jsonp = function (url, onsuccess, onerror,charset) {
    var callbackName = util.getName("tt_player"); // 加載script標簽的形式
    window[callbackName] = function () { // 以這個回調名稱注冊一個全局的函數
        if (onsuccess && util.isFunction(onsuccess)){
            onsuccess(arguments[0]);
        }
    };
    var script = util.createScript(url + "&callback" + callbackName,charset);
    script.onload = script.onreadystatechange = function () {
        if (!script.readyState || /loaded|complete/.test(script.readyState)) {
            script.onload = script.onreadystatechange = null;
            // 移除該script的 DOM 對象
            if (script.parentNode) {
                script.parentNode.removeChild(script);
            }
            // 刪除函數或變量
            window[callbackName] = null;
        }
    };
    script.onerror = function () {
        if (onerror && util.isFunction(onerror)) {
            onerror();
        }
    };
    document.getElementsByTagName("head")[0].appendChild(script);
};


// AJAX
util.extend(opt,options);
if(opt.url){
    // 聲明XMLHttpRequest 對象的工作流程
    var xhr = XMLHttpRequest ? new XMLHttpRequest () : new window.ActiveXObject("Microsoft.XMLHTTP");
    var data = opt.data,
        url = opt.url,
        type = opt.type.toUpperCase(),
        dataArr = [];
    for (var k in data) {
        dataArr.push(k + "=" + data[k]);
    }
    if (type === "GET") {
        url = url +"?" + dataArry.join("&");
        xhr.open(type,url.replace(/?$/g,""),true);
        xhr.send();
    }
    if (type === "POST") {
        xhr.open(type,url,true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(dataArry.join("&"));
    }
    // 監聽它成功失敗
    xhr.onload = function () {
        // 200：客戶端請求成功 304：重定向，利用本地緩存
        if (xhr.status === 200 || xhr.status === 304 ) { // 媒體資源加206
            var res;
            if (opt.success && opt.success instanceof Function) {
                res = xhr.responseText;
                if(typeof res === "String") {
                    res = JSON.parse(res);
                    opt.success.call(xhr,res);
                }
            }
        } else {
            if (opt.error && opt.error instanceof Function) {
                opt.error.call(xhr,res); 
                }
            }
        }
    }
    
export default util;

License

可以拷貝、轉發，但是必須提供原作者信息，同時也不能將本項目用于商業用途。