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请求。
- *