这篇文章主要介绍使用jquery的jsonp发起跨域请求的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
专注于为中小企业提供成都网站制作、网站建设、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业阿尔山免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了成百上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的。
浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。
如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的。
如果要在js里发起跨域请求,则要进行一些特殊处理了。或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将数据返回前端。
这里讲下使用jquery的jsonp如何发起跨域请求及其原理。
先看下准备环境:两个端口不一样,构成跨域请求的条件。
获取数据:获取数据的端口为9090
请求数据:请求数据的端口为8080
1、先看下直接发起ajax请求会怎么样
下面是发起请求端的代码:
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>跨域测试
请求的结果如下图:可以看到跨域请求因为浏览器的同源策略被拦截了。
2、接下来看如何发起跨域请求。解决跨域请求的方式有很多,这里只说一下jquery的jsop方式及其原理。
首先我们需要明白,在页面上直接发起一个跨域的ajax请求是不可以的,但是,在页面上引入不同域上的js脚本却是可以的,就像你可以在自己的页面上使用 标签来随意显示某个域上的图片一样。
比如我在8080端口的页面上请求一个9090端口的图片:可以看到直接通过src跨域请求是可以的。
3、那么看下如何使用
服务端: 结果: 4、再来看jquery的jsonp方式跨域请求: 服务端代码不变,js代码如下:最简单的方式,只需配置一个 这里的success就跟上面的showData一样,如果有success函数则默认 效果: 再看看如何指定特定的回调函数:第30行代码 回调函数你可以写到 然后看调用结果,发现,请求时带的参数是: 效果图: 再看看如何改变callback这个名称:第23行代码 指定callback这个名称后,后台也需要跟着更改。 后台代码: 效果图: 最后看看jsonp是否支持POST方式:ajax请求指定POST方式 可以看到,jsonp方式不支持POST方式跨域请求,就算指定成POST方式,会自动转为GET方式;而后端如果设置成POST方式了,那就请求不了了。 jsonp的实现方式其实就是 效果图: 再补充一点,回到第一条:CORS头缺少 有时候你会发现其它都没问题,出现这个错误:这个错误代表服务端拒绝跨域访问。如果出现这个错误,就需要在服务端设置允许跨域请求。 设置可以跨域访问:第6行代码或第8行代码,设置其中一个即可。 jQuery ajax方式以jsonp类型发起跨域请求,其原理跟
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//数据
List
dataType:'jsonp'
,就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式,可以看发起的请求路径,自动带了一个callback=xxx
,xxx是jquery随机生成的一个回调函数名称。success()
作为回调函数。<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
下(默认属于window对象),或者指明写到window对象里,看jquery源码,可以看到jsonp调用回调函数时,是调用的
window.callback
。callback=showData;
调用回调函数的时候,先调用了指定的showData,然后再调用了success。所以,success是返回成功后必定会调用的函数,就看你怎么写了。<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//数据
List
脚本请求地址的方式一样,只是ajax的jsonp对其做了封装,所以可想而知,jsonp是不支持POST方式的。
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
“Access-Control-Allow-Origin”
。response.setHeader("Access-Control-Allow-Origin", "*");
设置允许任何域名跨域访问protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
// * 表示允许任何域名跨域访问
response.setHeader("Access-Control-Allow-Origin", "*");
// 指定特定域名可以访问
response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/");
//数据
List