JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于服务器与客户端跨源通信(跨域通信),是一种跨域解决方案。
jsonp原理
1.网页通过添加一个<script>元素向服务器请求,且请求的url中必须带一个callback参数(但参数名可以自定义为其它的名称),
其它参数可选,但一般取名callback、jsonp、jsonpcallback等语义化,如http://domain.com/?callback=回调方法&userid=123.
2.服务器接收到请求后,进行相应逻辑处理,然后响应内容必须用javascript函数名和圆括号包裹起来(其实就是返回一段js代码).
响应内容格式: 函数名(json字符串);
如: say({"code":0,"msg":"ok","data":{"userid":"123"}})
jsonp优缺点及注意点
1. 最大优点是解决了跨域问题,可以使不同源的网站来请求获取数据,
2. jsonp方式不支持POST方式请求,仅支持GET请求。
3. jsonp跨域,如果运用不当就会产生安全隐患,最好是对callback参数值做一些过滤。
措施举例如: 参数值只能以字符开头,可由字母、数字、下划线_等组合
示例
1. 服务器端代码编写示例,这里以php为例:
地址:http://tool.nfangbian.com/jsonp.php?callback=say&userid=123
jsonp.php代码如下:
<?php
header("Content-type: text/html;charset=utf-8");
//获取回调方法名
$jsoncallback = htmlspecialchars($_GET['callback']);
$userid = isset($_GET['userid'])?$_GET['userid']:0;//其它参数,这里获取userid
//json数据
$json_data = json_encode(['code'=>0, 'msg'=>'ok', 'data'=>['userid'=>$userid]]);
//输出jsonp格式的数据,如: say({"code":0,"msg":"ok","data":{"userid":"123"}})
echo $jsoncallback . "(" . $json_data . ")";
2. html网页js请求示例:
function demo() {
var url = "http://tool.nfangbian.com/jsonp.php?callback=say&userid=123";
jsonp(url);
}
function say(res) {//服务器响应js代码调用这个callback方法
console.log("服务器响应内容" + JSON.stringify(res));
document.getElementById("demoid").innerHTML += JSON.stringify(res);
}
function jsonp(url) {//发起jsonp请求
var script = document.createElement("script");
script.setAttribute("src", url);
document.getElementsByTagName("body")[0].appendChild(script);
}
响应内容: