跨域JSONP原理及调用详细演示样例

上篇博客介绍了同源策略和跨域訪问概念，当中提到跨域经常使用的基本方式：JSONP和CORS。

那这篇博客就介绍JSONP方式。

JSONP原理 在同源策略下，在某个server下的页面是无法获取到该server以外的数据的，但img、iframe、script等标签是个例外。这些标签能够通过src属性请求到其它server上的数据。而JSONP就是通过script节点src调用跨域的请求。当我们通过JSONP模式请求跨域资源时，server返回给client一段javascript代码，这段javascript代码自己主动调用client回调函数。 举个样例 clienthttp://localhost:8080訪问serverhttp://localhost:11111/user。正常情况下，这是不同意的。

由于这两个URL是不同域的。

若我们使用JSONP格式发送请求的话？ http://localhost:11111/user?

callback=callbackfunction

则server返回的数据例如以下： callbackfunction({"id":1,"name":"test"}) 细致看看server返回的数据，事实上就是一段javascript代码。这就是函数名（參数）格式。 server返回后，则自己主动运行callbackfunction函数。因此，client须要callbackfunction函数。以便使用JSONP模式返回javascript代码后自己主动运行其回调函数。
注意：当中url地址中的callback和callbackfunction是任意命名的。

详细的JS实现JSONP代码。

JS中：

  <script>
  var url = "http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=callbackfunction";
  var script = document.createElement('script');
  script.setAttribute('src', url);  //load javascript
  document.getElementsByTagName('head')[0].appendChild(script);   //回调函数
   function callbackfunction(data){
var html=JSON.stringify(data.RESULTSET);
alert(html);
     }
  </script>

server代码Action：后台返回的json外面须要由回调函数包裹。详细的方法例如以下：

public class TestJson extends ActionSupport{@Override
public String execute() throws Exception {
try {
JSONObject jsonObject=new JSONObject();
List list=new ArrayList();
for(int i=0;i<4;i++){
Map paramMap=new HashMap();
paramMap.put("bank_no", 100+i);
paramMap.put("money_type", i);
paramMap.put("bank_name", i);
paramMap.put("bank_type", i);
paramMap.put("bank_status", 0);
paramMap.put("en_sign_ways", 1);
list.add(paramMap);
}
JSONArray rows=JSONArray.fromObject(list);
jsonObject.put("RESULTSET", rows);
HttpServletRequest request=ServletActionContext.getRequest();
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/javascript");boolean jsonP = false;
String cb = request.getParameter("jsonp");
if (cb != null) {
    jsonP = true;
    System.out.println("jsonp");
    response.setContentType("text/javascript");
} else {
System.out.println("json");
    response.setContentType("application/x-json");
}
response.setCharacterEncoding("UTF-8");
Writer out = response.getWriter();
if (jsonP) {
    out.write(cb + "("+jsonObject.toString()+")");
    System.out.println(jsonObject.toString());
}
else{
out.write(jsonObject.toString());
 System.out.println(jsonObject.toString());
}
} catch (Exception e) {
e.printStackTrace();
}return null;
}
}

JQUERY实现JSONP代码。

Jquery从1.2版本号開始也支持JSONP的实现。

$(function(){
     jQuery.getJSON("http://localhost:8080/crcp/rcp/t99eidt/testjson.do?jsonp=?",function(data)
{
  var html=JSON.stringify(data.RESULTSET);
$("#testjsonp").html(html);
}
     );
});

第一个？代表后面是參数，与咱们一般调用一样。重要的是第二个？。则是jquery动态给你生成毁掉函数名称。

至于后台代码和上述一致，使用同一个后台。

JQUERY中Ajax实现JSONP代码。

     $.ajax({
    type:"GET",
    async :false,
    url:"http://localhost:8080/crcp/rcp/t99eidt/testjson.do",
    dataType:"jsonp",
    success:function(data){
    var html=JSON.stringify(data.RESULTSET);
    $("#testjsonp").html(html);
    },
    error:function(){
    alert("error");
    }    });

注意：这样的形式，默认的參数是callback，而不是会是其它。则action代码中获取calback值则 String cb=request.getParameter("callback"); 而且生成的回调函数，默认也是类似上述一大串数字。依据Ajax手冊。更改callback名称以及回调函数名称。

http://www.w3school.com.cn/jquery/ajax_ajax.asp jsonp:jsonp,则请求的地址为：http://localhost:8080/crcp/rcp/t99eidt/testjson.do?

jsonp=callbackfunction 最后返回前台的是： callbackfunction(详细的json值)
当中上述JS实现JSONP代码中。若不是动态拼接script脚本，而是直接写script标签。类似例如以下： <script type="text/javascript" src=""></script> 若这样写的话，通过debug发现，的确正确返回了。可是一直提示找不到回调函数。即使js也提供了回调函数【各个浏览器都測试】若要通过JS来显示。则通过代码动态create script标签。
JSONP跨域方式。非常方便，同一时候也支持大多部分浏览器，可是唯一缺点是，仅仅支持GET提交方式，不支持其它POST提交。若url地址传输的參数过多，怎样实现呢？下篇博客会解说还有一种跨域方案CROS原理以及详细调用演示样例。

个人收藏笔记记录

开通VIP