首页 > 编程笔记 > JavaScript笔记 > JS DOM 阅读:67

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) 保存页面,在浏览器中预览,演示效果如下图所示。


 

示例2

下面结合一个示例说明如何使用 JSONP 实现跨域异步信息交互。

1) 在客户端调用 JSONP 约定的 URL 服务,获取 JSONP 格式数据。

所谓 JSONP 约定的 URL 服务,就是在请求的 URL 中必须附加在客户端可以回调的函数,并按约定正确设置回调函数参数,默认参数名为 jsonp 或 callback。

根据约定,只要服务器能够识别即可。本例定义 URL 服务的代码如下:
http://localhost/mysite/server.php?jsonp=callback&d=1
其中参数 jsonp 的值为约定的回调函数名。

JSONP 格式的数据就是把 JSON 数据作为参数传递给回调函数。如果响应的 JSON 数据如下。
{
    "title" : "JSONP Test",
    "link" : "http://www.mysite.cn/",
    "modified" : "2019-10-11",
    "items" : {
        "id" : 1,
        "title" : "百度",
        "link" : "http://www.baidu.com/"
    }
}
那么真正返回到客户端的脚本标记如下:
callback ({
    "title" : "JSONP Test",
    "link" : "http://www.mysite.cn/",
    "modified" : "2019-10-11",
    "items" : {
        "id" : 1,
        "title" : "百度",
        "link" : "http://www.baidu.com/"
    }
})

2) 当客户端向服务器端发出请求后,服务器应该完成两件事情:一是接收并处理参数信息,如获取回调函数名;二是要根据参数信息生成符合客户端需要的脚本字符串,并把这些字符串响应给客户端。例如,服务器端的处理脚本文件如下(server.php)。
<?php>
    header ("Content-Type: text/html; charset=utf-8");
    $callback = $_GET["jsonp"];
    $id = $_GET["id"];
    echo $callback."(";
?>
{
    "title" : "JSONP Test",
    "link" : "http://www.mysite.cn/",
    "modified" : "2019-10-11",
    "items" : 
<?php
    if ($id == "1"){
?>
    {
         "title" : "百度",
        "link" : "http"//www.baidu.com/"
    }
<?php
} else if ($id == "2") {
?>
    {
         "title" : "谷歌",
        "link" : "http"//www.google.cn/"
    }
<?php
} else {
    echo "";
}
echo "})";
?>

3) 在客户端设计回调函数,利用回调函数把 JSON 数据显示出来。
function callback (info) {
    var temp = "";
    for (var i in info) {
        if (typeof info[i] != "object") {
            temp += i + "=\"" + "\"<br />";
        } else if ((typeof info[i] == "object")) {
            temp += "<br />" + i + "=" + "{<br />";
            var o = info[i];
            for (var j in o) {
                temp += "&nbsp;&nbsp;&nbsp;&nbsp;" + j + "=\"" + o[j] + "\"<br />";
            }
            temp += "}";
        }
    }
    var div = document.getElementById("test");
    div.innerHTML = temp;
}

4) 设计客户端提交页面与信息展示。在页面中插入一个 <div> 标签,然后把输出的信息插入到该标签内。同时设计一个交换按钮,单击该按钮将触发请求函数,并向服务器端发去请求。响应完毕,在客户端调用回调函数,对响应的数据进行处理和显示。
<div id="test"></div>

恶意攻击者可以通过发送畸形 JSON 数据实现攻击目的,这样 eval() 函数就会执行这些恶意代码。为了安全,应该采取一些方法来保护 JSON 数据的安全使用。例如,使用正则表达式过滤掉 JSON 中不安全的 JavaScript 字符串。
var my_JSON_object = ! (/[^,:{}\[\]0-9.\-+Eaeflnr-u\n\r\t]/.test(text.replace(/"(\\.|[^"\\])*"/g,''))) && eval('(' + test + ')');
这个正则表达式能够检查 JSON 字符串,如果没有发现字符串中包含的恶意代码,则再使用 eval() 函数把它转换为 JavaScript 对象。

所有教程

优秀文章