Ajax跨域 —— Jsonp

同源策略

• 同源/同域即域名、协议、端口号相同

JSONP（JSON with Padding）

是一种跨域请求方式

• 主要原理：script标签具有跨域请求的特性，由src属性发送请求到服务器，服务器返回Javascript代码
• 组成：
  • 回调函数：回调函数作为参数发往服务器，当服务器响应时，服务器把函数和数据拼成字符串返回
  • 数据
• 请求过程：
  • 请求阶段：浏览器创建一个script标签，并给其src赋值
  • 发送请求：给src赋值时则发送请求
  • 数据响应：服务器将要返回的数据作为参数和函数名称拼接在一起返回
• 封装：

function jsonp(params) {
    var options = params || {};
    var ohead = document.getElementsByTagName("head")[0];
    var oscript = document.createElement("script");
    var url = params.url || "";
    var callback = ("jsonp_" + Math.random()).replace(".","");
    var json = callback;

    url = url +"?appkey="+options.appkey+"&zipcode="+options.zipcode+"&callback="+callback;

    //发送请求
    oscript.src = url;
    ohead.appendChild(oscript);

    //创建回调函数
    window[callback] = function (json) {
        ohead.removeChild(oscript);
        clearTimeout(oscript.timer);
        window[callback] = null;
        options.success&&options.success(json);
    };

    //设置超时
    if (options.time){
        oscript.timer = setTimeout(function () {
            window[callback]=null;
            ohead.removeChild(oscript);
            options.erro&&options.erro({
                message:"连接超时"
            })
        },options.time);
    }

}

调用：

 jsonp({
                url: "http://api.jisuapi.com/zipcode/query",
                appkey: "d06f93228c91fe10",
                zipcode: zipcode,
                time:10000,
                success:function (data) {
                    oresult.innerHTML = zipcode + "是"+data.result[0].province+"省"+data.result[0].city+"市"+data.result[0].town+"\n"+
                        data.result[0].address+"\n"+data.result[1].address+"\n"+data.result[2].address+"\n"+data.result[3].address+"\n"+data.result[4].address;
                },
                erro:function (err) {
                    alert(err.message);
                }
            });