使用jquery的jsonp如何发起跨域请求及其原理详解

jQuery 2019-01-07

前言

本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。

浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。

如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。

这里讲下使用jquery的jsonp如何发起跨域请求及其原理。

先看下准备环境：两个端口不一样，构成跨域请求的条件。

获取数据：获取数据的端口为9090

请求数据：请求数据的端口为8080

1、先看下直接发起ajax请求会怎么样

下面是发起请求端的代码：

rush:xhtml;"> <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %> 跨域测试

服务端：

rush:js;"> protected void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException { response.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8");

//数据
List studentList = getStudentList();

JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();

//前端传过来的回调函数名称
String callback = request.getParameter("callback");
//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
result = callback + "(" + result + ")";

response.getWriter().write(result);
}

结果：

4、再来看jquery的jsonp方式跨域请求：

服务端代码不变，js代码如下：最简单的方式，只需配置一个dataType:'jsonp' ，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称。

这里的success就跟上面的showData一样，如果有success函数则默认success()作为回调函数。

rush:xhtml;"> <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %> 跨域测试

效果图：

再看看如何改变callback这个名称：第23行代码

指定callback这个名称后，后台也需要跟着更改。

rush:xhtml;"> <%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %> 跨域测试

效果图：

再补充一点，回到第一条：CORS头缺少“Access-Control-Allow-Origin” 。

有时候你会发现其它都没问题，出现这个错误：这个错误代表服务端拒绝跨域访问。如果出现这个错误，就需要在服务端设置允许跨域请求。

response.setHeader("Access-Control-Allow-Origin","*"); 设置允许任何域名跨域访问

设置可以跨域访问：第6行代码或第8行代码，设置其中一个即可。

rush:js;"> protected void doGet(HttpServletRequest request,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 studentList = getStudentList();

JSONArray jsonArray = JSONArray.fromObject(studentList);
String result = jsonArray.toString();

//前端传过来的回调函数名称
String callback = request.getParameter("callback");
//用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
result = callback + "(" + result + ")";

response.getWriter().write(result);
}

总结

jQuery ajax方式以jsonp类型发起跨域请求，其原理跟