JSONP跨域请求入门教程（附带实例）

JSONP （JSON with Padding）是在客户端生成 <script> 标签来调用跨域脚本（服务器端脚本文件）的一个非官方协议。JSONP 允许在服务器端动态生成 JavaScript 字符串返回给客户端，通过 JavaScript 回调函数的形式实现跨域调用。

示例1

现在很多 JavaScript 技术框架都使用 JSONP 实现跨域异步通信，如 dojo、jQuery、Youtobe、GData API、Google Social Graph API、Digg API 等。示例1 下面示例演示了如何使用 script 实现异步 JSON 通信。

1) 在服务器端的 JavaScript 文件中输入下面代码（server.js）.

callback({
    "title" : "JSONP Test",
    "link" : "http://www.mysite.cn/",
    "modified" : "2016-12-1",
    "items" : [{
        "title" : "百度",
        "link" : "http://www.baidu.com/",
    "description" : "百度侧重于中国网民的搜索习惯，搜索结果更加大众化。"
    },{
    "title" : "谷歌",
    "link" : "http://www.google.cn/",
    "description" : "谷歌搜索结果更客观，尤其在搜索技术性文章的时候，结果更加精准。"
    }]
})

callback 是回调函数的名称，使用小括号运算符调用该函数，并传递一个 JavaScript 对象。在这个对象中包含 4 个属性：title、link、modified、items。其中前 3 个属性值是字符串，第 4 个属性 items 包含一个数组，数组中包含两个对象。这两个对象又包含两个属性：title、link。

通过这种方式可以在一个 JavaScript 对象中包含更多信息，在客户端的 <script> 标签中可以利用 src 属性把服务器端的这些 JavaScript 脚本作为响应信息引入到客户端的 <script> 标签中。

2) 在回调函数中逐层遍历和分解 JSON 数据，有序显示所有响应信息（test.html）。

function callback(info){
    var temp = "";
    for(var i in info){
        if(typeof info[i] != "object"){
            temp += i + " = \"" + info[i] + "\"<br />";
     }else if( (typeof info[i] == "object") && (info[i].constructor == Array)){
        temp += "<br />" + i + " = " + "<br /><br />";
        var a = info[i];
        for(var j = 0; j < a.length; j ++ ){
            var o = a[j];
           for(var e in o){
               temp += "&nbsp;&nbsp;&nbsp;&nbsp;" + e + " = \"" + o[e] + "\"<br />";
            }
             temp +=  "<br />";
            }
        }
    }
    var div  = document.getElementById("test");
    div.innerHTML = temp;
}

3) 完成用户提交信息的操作。客户端提交页面（test.html）的代码如下：

function request(url){
    if( ! document.script){
        document.script = document.createElement("script");
        document.script.setAttribute("type", "text/javascript");
        document.script.setAttribute("src", url);
        document.body.appendChild(document.script);
    } else {
        document.script.setAttribute("src", url);
    }
}
window.onload = function(){
    var b = document.getElementsByTagName("input")[0];
    b.onclick = function(){
        var url = "server.js"
        request(url);
    }
}
<h1>客户端信息提交页面</h1>
<input name="submit" type="button" id="submit" value="向服务器发出请求" />
<div id="test"></div>

回调函数和请求函数的名称并不是固定的，用户可以自定义这些函数的名称。

4) 保存页面，在浏览器中预览，演示效果如下图所示。