您的位置：首页 > Web前端 > JavaScript

JSONP基本概念

2015-06-20 14:58 477 查看

AJAX由于JS跨域访问的限制，不能直接请求其他服务器的数据。而Script标签能够访问src指定url，而没有上述限制，所以可以利用这个方法获得其他服务器的数据.
这种利用方式被称为JSONP
为什么命名为JSONP呢。因为首先一般请求的数据为JSON格式，其次，因为通过script标签获得的实际上是js脚本，如果脚本中仅仅包含json数据的话，浏览器就仅仅相当于解析了一下json数据。所以，至少，我们也应该通过某种方法操作这些数据。可以通过添加一些代码来打到目的，比如callback(["json格式数据"])

JavaScript权威指南写了一个getJSONP的通用函数

有以下几个角色：A服务器、B服务器、C客户端
C客户端访问访问A服务器的request.html页面，A服务器需要B服务器的json数据
相关代码如下
A:request.html

<!DOCTYPE HTML>
<html>
<head>
<title>JSOPN test</title>
</head>
<body>
JSONP test
</body>
<script type="text/javascript" src='getJSONP.js' ></script>
<script type="text/javascript" >
//真正的json处理函数
function alertJSON(data){
alert(data);
}
getJSONP("http://localhost:8080/jsutil/response.jsp",alertJSON)
</script>
</html>

A:getJSONP.js

//JSONP请求计数
getJSONP.count = 0;
function getJSONP(url,callback){
var cbnum = "cb" + (getJSONP.count++)
//回调函数名，这种格式表示回调函数保存在getJSONP中，并且以cbnum命名
var cbname = "getJSONP." + cbnum

if(url.indexOf("?")===-1){
//请求的回调函数名为cbname,引用脚本的回调函数名为jsonp
url += "?jsonp=" + cbname
}else{
url += "&jsonp=" + cbname
}

var script = document.createElement("script")
//回调函数的定义
getJSONP[cbnum] = function(response){
try{
callback(response)
}finally{
//请求完后，清理现场
delete getJSONP[cbnum]
script.parentNode.removeChild(script)
}
}
script.src = url
document.body.appendChild(script)
}

B: response.jsp

<%=request.getParameter("jsonp")%>("json data")

C请求A的request页面，结果截图如下C请求A的request页面，结果截图如下

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jsonp json

相关文章推荐

新的分享

章节导航