博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)
阅读量:5902 次
发布时间:2019-06-19

本文共 1660 字,大约阅读时间需要 5 分钟。

众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结。

Jquery中jsonp的使用

//myUrl = "http://localhost:8090/api/test";$.ajax({  type:"GET",  url:myUrl,  dataType:"jsonp",  jsonp:"callback",  jsonpCallback:"jsonpCallback",  success:function(data){    alert(data.msg);  }});function jsonpCallback(data){  alert(data);}
  1. jsonp只能使用get请求,解决同源问题,返回javascript代码,因为请求javascript文件是没有同源问题的。
  2. 当请求数据类型为jsonp时,会将callback=jsonpCallback加在url上,http://localhost:8090/api/testcallback=jsonpCallback
  3. 前台javascript中定义jsonpCallback函数,此函数必须定义在window下,也就是全局的函数,否则找不到。
  4. 后台获取请求的callback参数值jsonpCallback,返回字符串"jsonpCallback(result)",result为返回结果。
  5. 请求返回的是script tag,首先会调用jsonpCallback函数,不管是否找到该函数,都会调用success函数。
  6. 如果没有定义jsonp和jsonpCallback,jsonp默认为"callback",jsonpCallback会是Jquery自动生成的函数名。

angularJS中jsonp的使用

myUrl = "http://localhost:8090/api/testcallback=JSON_CALLBACK";$http.jsonp(myUrl).success(  function(data){    alert(data);  });
  1. angularJS中使用$http.jsonp函数
  2. 指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写。
  3. 也可以指定其它回调函数,但必须是定义在window下的全局函数。
  4. url中必须加上callback
  5. 当callback为JSON_CALLBACK时,只会调用success,即使window中有JSON_CALLBACK函数,也不会调用该函数。
 
Servlet中的使用
@OverrideprotectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throwsServletException,IOException{  resp.setContentType("application/json;charset=UTF-8");  PrintWriterout=resp.getWriter();  StringcallbackFunName=req.getParameter("callback");  StringBuilderstringBuilder=newStringBuilder(callbackFunName);  stringBuilder.append("(");  stringBuilder.append(123);  stringBuilder.append(")");  out.println(stringBuilder.toString());  out.print(result);  out.flush();  out.close();}

转载于:https://www.cnblogs.com/JoannaQ/p/3712911.html

你可能感兴趣的文章
java--Eclipse for mac 代码提示(代码助手,代码联想)快捷键修改
查看>>
Jdom的简单操作
查看>>
left join on/right join on/inner join on/full join on连接
查看>>
Codeforces 582B Once Again
查看>>
template.helper 多参数
查看>>
RadioButton布局图片+文字 实现tabhost效果
查看>>
access中设置不等于
查看>>
hdu 1221 Rectangle and Circle
查看>>
Android 四大组件之四(ContentProvider)
查看>>
Android 四大组件之一(Activity)
查看>>
扫描(一)
查看>>
PIE SDK矢量数据的读取
查看>>
两种方式分别改变alertdialog的宽和高
查看>>
TextView-setCompondDrawables用法
查看>>
Centos7安装rabbitmq server 3.6.0
查看>>
iostat命令学习
查看>>
SQL 三种分页方式
查看>>
查看linux是ubuntu还是centos
查看>>
html video的url更新,自动清缓存
查看>>
IOS Xib使用——为控制器添加Xib文件
查看>>