原理:
####### https://blog.youkuaiyun.com/hansexploration/article/details/80314948
####### https://www.cnblogs.com/chiangchou/p/jsonp.html
JSONP格式以及乱码问题:
####### https://blog.youkuaiyun.com/mggwct/article/details/47355323
我的理解:
#####JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求, 我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。 这种跨域的通讯方式称为JSONP。
jsonp的原理:
$.ajax({
async:false,
url: http://跨域的dns/document!searchJSONResult.action,
type: "GET",
dataType: 'jsonp',
jsonp: 'callback',
...
}
1.首先在客户端注册一个callback。(jsonp相当于自己再js中加了个script标签)。
//function jquery123456(…){…};
//< srcipt src=“http://跨域的dns/document!searchJSONResult.action?callback=jquery123456&a=1…”/>
2.然后把callback的名字传给服务器。
//http://跨域的dns/document!searchJSONResult.action?callback=jquery123456&a=1…
3.此时,服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
//String result = callback+"("+json+")"; 即 jquery123456(json数据);
//return result;
4.客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里。(动态执行回调函数)
// 获得 jquery123456(json数据);执行回调函数。
//jquery在处理jsonp类型的ajax时(,虽然jquery也把jsonp归入了ajax,但其实它们真的不是一回事儿),
//自动帮你生成回调函数并把数据取出来供success属性方法来调用。
jsonp前后台格式:
前台:
$.ajax(
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //访问的链接
dataType:"jsonp", //数据格式设置为jsonp
jsonp:"callback", //Jquery生成验证参数的名称.即链接左边的名称
jsonpCallback: "showData", //指定回调函数名称,即链接右边的名称,可不写随机生成。
success:function(data){ //成功的回调函数
alert(data);
},
error: function (e) {
alert("error");
}
});
后台:
@ResponseBody
@RequestMapping("/getMySeat")
public String getMySeatSuccess(@RequestParam("callback") String callback,@RequestParam("name") String name){
Gson gson=new Gson();
Map<String,String> map=new HashMap<>();
map.put("seat","1_2_06_12");
logger.info(callback);
return callback+"("+gson.toJson(map)+")";
}
本文深入探讨了JSONP(JSON with Padding)的工作原理及其在跨域请求中的应用。JSONP通过利用HTML的script标签特性,绕过同源策略限制,实现跨域数据获取。文章详细解释了JSONP的前后台交互过程,包括客户端如何注册回调函数,服务器如何生成并返回包含JSON数据的JavaScript代码,以及客户端如何执行回调函数处理返回的数据。
1157

被折叠的 条评论
为什么被折叠?



