JSONP相关知识小结

一、关于域名
顶级域名
顶级域名分为两类：一是国家级顶级域名（national top-level domainnames，简称nTLDs），200多个国家都按照ISO3166国家代码分配了顶级域名，例如中国是.cn，美国是.us，日本是.jp等；二是国际顶级域名（international top-level domain names，简称iTDs），例如表示工商企业的 .Com，表示网络提供商的.net，表示非盈利组织的.org等。

子域名
凡顶级域名前加前缀的都是该顶级域名的子域名，而子域名根据技术的多少分为二级子域名，三级子域名以及多级子域名。

二级域名
二级域名是指顶级域名之下的域名，在国际顶级域名下，它是指域名注册人的网上名称，例如 “.ibm”，”.yahoo”，”.microsoft”等；在国家顶级域名下，它是表示注册企业类别的符号，例如”.com”，”.edu”，”.gov”，”.net”等。
二级域名是域名的倒数第二个部份，二级域名就是主域名分出来的域名。二级域名比较适用于大型网站。因为使用二级域名可以减短网址途径的长度，也许会对收录起到很好的效果。全站交织衔接，可以使搜索引擎能检索到，还主动生成网站地图。

.com 顶级域名
baidu.com 一级域名
www.baidu.com 二级域名
bbs.baidu .com 二级域名

二、同源策略
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）

随着互联网的发展，”同源政策”越来越严格。目前，如果非同源，共有三种行为受到限制。
1. Cookie、LocalStorage 和 IndexDB 无法读取。
2.DOM 无法获得。
3. AJAX 请求不能发送。

三、JSONP
同源策略规定，ajax请求只能发给同源的地址，否则就报错。除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制：JSONP，WebSocket，CORS。本文只介绍JSONP。
JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。
JSONP的诞生：
*首先，因为ajax无法跨域
*其次，开发者发现， script标签的src属性是可以跨域的
*把跨域服务器写成 调用本地的函数 ，回调数据回来不就好了？
*json刚好被js支持（object）
*调用跨域服务器上动态生成的js格式文件（不管是什么类型的地址，最终生成的返回值都是一段js代码）
*这种获取远程数据的方式看起来非常像ajax，但其实并不一样
*便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP。
*传递一个callback参数给跨域服务端，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。

四、JSONP与AJAX
ajax和jsonp本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容。jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。
下面分别是二者的模拟实现：

function $(sel, content) {
        content = content || doc;
        return content.querySelector(sel);
}
Fn = {
    addScriptTag: function (url, text, name) {
        var s = doc.createElement('script'),
            r = new Date().getTime();
        if (url) {
            s.src = Fn.concatURL(url, {r: r});
            s.setAttribute('data-name', name);
        } else {
            s.text = text;
        }
        doc.body.appendChild(s);
        return s;
    },
     concatURL : function (url, data) {
                var parm = '';
                if (data) {
                    parm = Fn.o2url(data);
                    if (url.indexOf('?') === -1) {
                        parm = parm.replace('&', '?');
                    }
                    url += parm;
                }
                return url;
    }
}
    /*type请求类型
    **url请求地址
    **data请求参数
    **fn回调函数
    **restype传输数据格式
    */
$.ajax = function (type, url, data, fn,resType, headers,async) {      
    var t = new Date().getTime(),
        xhr = new XMLHttpRequest();
    if (url.indexOf('?') > -1) {
        url += '&t=' + t;
    } else {
        url += '?t=' + t;
    }

    async = typeof async == 'undefined' ? true : Boolean(async);
    xhr.open(type, url, async);
    if (headers) {
        for (var i in headers) {
            xhr.setRequestHeader(i, headers[i]);
        }
    }
    if(async){
        xhr.onload = function () {
           cb();
        };
    }
    xhr.send(data);
    if(!async){
        cb();
    }
    function cb(){
        var res = xhr.responseText;
        if (resType === "json") {
            fn(JSON.parse(res));
        } else {
            fn(res);
        }
    }
    return xhr;
};

$.jsonp = function (url, data, fn,callbackName) {
    var r = new Date().getTime(),
        callbackFn = 'jsonp_' + r,
        s = null,
        obj = {};

    if(typeof callbackName !== 'string'){
        callbackName = 'callback'; 
    }
    if (data) {
        data[callbackName] = callbackFn;
    } else {
        data = {};
        data[callbackName] = callbackFn;
    }
    url = Fn.concatURL(url, data);

    w[callbackFn] = function (res) {
        fn(res);
       w[callbackFn] = null;
    };

    s = Fn.addScriptTag(url, '', 'jsonp');

    obj.script = s;
    obj.callback = callbackFn;

    return obj;
};

五、JQuery实现JSONP
jQuery将jsonp归入了ajax（虽然二者本质不同），在处理jsonp类型的ajax请求时，会自动生成回调函数并把数据取出来供success属性方法调用。

   $.ajax({
    url:'http://live.beta.ablesky.com/ajax/live/getLiveCourseByStatus',
    data:param,
    dataType:"jsonp",
    jsonp:"callback",
    jsonpCallback:"cbFn",
    success:function(data){
        console.log('success');
    },
    error:function(){
        console.log('error');
    }
   });//请求成功后直接执行succss回调函数，cnFn并不执行。
//jsonp:"callback",：传递给请求程序，用以获得jsonp回调函数名的参数名（一般默认为callback）。
//jsonpCallback:"cbFn"：自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写“？”，jQuery会自动为你处理数据。

总结：
1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

参考：
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
https://segmentfault.com/a/1190000007935557