通信类

摘要：通信类什么是同源策略及限制同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。源协议域名端口默认三个构成一个源。

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
源：协议、域名、端口（默认 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

可以拷贝、转发，但是必须提供原作者信息，同时也不能将本项目用于商业用途。