JSONP基本概念

来源：互联网发布：淘宝首页海报全屏代码编辑：程序博客网时间：2024/06/15 02:38

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

0 0