什么是jsonp
- Jsonp(JSON with Padding) 是 json
的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 - 为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
- 同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
JSONP 应用
案例：
//jsonp.php 文件代码
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
//html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
jQuery 使用 JSONP
以上代码可以使用 jQuery 代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
var html = '<ul>';
for(var i = 0; i < data.length; i++)
{
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
$('#divCustomers').html(html);
});
</script>
</body>
</html>
jsonp js封装
function jsonp(obj){
//默认参数
var acquiesce={
data:{},
url:'#',//请求地址
dataType:'jsonp',//服务器返回默认text格式数据
jsonp:'callback',
type:'get',//HTTP请求类型
success:function(data){},//回调函数
};
for(var key in obj){//遍历将传递进来的参数重置给默认参数对象
acquiesce[key] = obj[key];
};
//拼接字符 回调函数名加密
var calName = "jquery" + ("1.11.1" + Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());
if(acquiesce.jsonpCallback){
calName = acquiesce.jsonpCallback;
};
//data对象拼接成字符串
var str = "";
for(var key in obj.data){
str += key + "=" + obj.data[key] + "&";
};
//截取字符串去除以上拼接字符串中最后多余的&
//注：在前面拼接&做地址的连接
if(str){
str = "&" + str.substring(0,str.length-1);
}
//给window即当前页面添加函数，将之前拼接的字符calName作为函数名
window[calName]=function(data){
obj.success(data);
};
//创建script元素标签
var script = document.createElement("script");
//设置script src地址 = 跨越地址 + jsonp(传递函数的键值key) + =(等号) + 函数名 + 拼接的数据字符串
script.src = acquiesce.url + "?" + acquiesce.jsonp + "=" + calName + str;
//获取head
var head = document.getElementsByTagName("head")[0];
//将script插入head
head.appendChild(script);
}
jQuery跨域请求
案例：
//jsonp.php 文件代码
<?php
$callback = $_GET["callback"];
$username = $_GET["username"];
$password = $_GET["password"];
echo $callback.'('.'{"username":"'.$username.'","password":"'.$password.'"}'.')';
?>
//html
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var btn = $("#btn");
btn.click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
data:{"username":username,"password":password},
url:'http://php.com/jsonp.php',
type:'get',
jsonpCallback:'callbackCCC',
dataType:'jsonp',
jsonp:'callback',
success:function(data){
console.log(data);
}
});
});
})
</script>
</head>
<body>
<input type="text" name="username" id="username" value="" />
<input type="password" name="password" id="password" />
<button type="button" id="btn">按钮</button>
</body>
</html>
json和jsonp的区别
- json是一种数据交换格式 “暗号”，描述信息格式
- jsonp是非官方跨域数据交互协议“接头方式”信息传递双方约定的方法，可以用来跨域
- JSONP的原理：在客户端动态的创建一个 script 标签，代替 XHR 对象，指定 script.src
向服务器发起请求，请求的PHP页面除了返回需要的数据外，还需要填充一个指定的函数名 - jsonp只支持get请求，ajax支持get和post请求
- ajax 只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到 jsonp 技术，jsonp
可以跨域请求数据，它的原理主要是利用了