jsonp使用笔记

jsonp使用笔记

参考：
【AngularJs】—JSONP跨域访问数据传输
jsonP服务端代码

---

1. jsonp简介

JSONP的原理是通过<script>标签发起一个GET请求来取代XHR请求。JSONP生成一个<script>标签并插到DOM中，然后浏览器会接管并向src属性所指向的地址发送请求。

当服务器返回请求时，响应结果会被包装成一个JavaScript函数，并由该请求所对应的回调函数调用。

一句话就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。

2. 客户端实现

• angularjs

$http .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) { 
    //当callback为JSON_CALLBACK时，只会调用success
　　// 数据
});

• jquery

$.ajax({
    type: "get",
    async: false,
    url: "http://localhost:7001/wsltest/JsonpServlet",
    dataType: "jsonp",
    //jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
    //jsonpCallback:"?",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
    success: function(json){
        console.log(json);
    },
    error: function(){
        alert('error');
    }
});

3. 服务端写法

• Java:

//在返回数据时，把要返回的数据包裹到callback中
boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
    jsonP = true;
    response.setContentType("text/javascript");
} else {
    response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (jsonP) {
    out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (jsonP) {
    out.write(");");
}

4.其他

• 虽然Jquery、angular等将jsonp封装成ajax的形式，但两者原理不同。
• jsonp只能使用get请求。
*