JSONP基本概念

最新推荐文章于 2021-10-15 10:49:40 发布

winnerX

最新推荐文章于 2021-10-15 10:49:40 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： jsonp json

本文链接：https://blog.csdn.net/winnerx/article/details/46573645

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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页面，结果截图如下

winnerX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSONP基本概念

AJAX由于JS跨域访问的限制，不能直接请求其他服务器的数据。而Script标签能够访问src指定url，而没有上述限制，所以可以利用这个方法获得其他服务器的数据.这种利用方式被称为JSONP为什么命名为JSONP呢。因为首先一般请求的数据为JSON格式，其次，因为通过script标签获得的实际上是js脚本，如果脚本中仅仅包含json数据的话，浏览器就仅仅相当于解析了一下json数据。所以
复制链接

扫一扫