最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

JSONP 原理和使用

XAMPP下载 admin 1308浏览 0评论
 JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器改造非常小。

它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

首先,网页动态插入<script>元素,由它向跨源网址发出请求。

function addScriptTag(src) {
var script = document.createElement(‘script’);
script.setAttribute(“type”, “text/javascript”);
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag(‘http://127.0.0.1:3000?callback=foo’);
}
function foo(data) {
// 获取用户信息- 姓名:王小二 年龄:30
console.log(“获取用户信息- 姓名:” + data.name

+ ” 年龄:” + data.age);
};
上面代码通过动态添加<script>元素,向服务器example.com

发出请求。注意,该请求的查询字符串有一个callback参数,用来指定回调函数的名字,这对于JSONP是必需的。

服务器收到这个请求以后,会将数据放在回调函数的参数位置返回。

nodejs 服务端代码为例:

const http = require(‘http’);
const querystring  = require(‘querystring’);
http.createServer(function(req,res){
let params = querystring.parse(req.url.replace(/\/?\?/, “”));
let data = {“name”: “王小二”, “age”: 30};
res.writeHead(200, {“Content-Type”:”application/json;charset=utf-8″});
res.end(params.callback + “(“+JSON.stringify(data)+”)”);
}).listen(3000);
由于<script>元素请求的脚本,直接作为代码运行。这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的 JSON 数据被视为JavaScript对象,而不是字符串,因此避免了使用JSON.parse的步骤。

转载请注明:XAMPP中文组官网 » JSONP 原理和使用

您必须 登录 才能发表评论!