Ajax实现跨域的三种方法-java示例

时间:2024-03-16 12:20:50

Ajax可以异步请求后台并且在不刷新整个网页的情况下可以对网页的局部内容进行刷新,但是在开发的过程中,有可能需要访问另外一个域的数据,那么就会遇到Ajax的跨域问题。对于其它域的信息,Ajax是不能直接访问的,这是因为基于安全的考虑,Ajax只能访问本地的资源,而不能跨域访问。下面列出了一些属于跨域的情况(图片摘录于互联网): 
Ajax实现跨域的三种方法-java示例

存在跨域问题,那么自然也存在解决办法。目前比较业界比较常用的有三种解决办法:

  1. 代理
  2. JSONP
  3. XHR2(XMLHttpRequest Level 2)

下面将通过例子演示这三种方法实现Ajax跨域访问。

首先介绍一下用到的实验环境: 
实验用到两个tomcat服务器,这两个tomcat服务器的端口号分别是8080和8888,这两个服务器均部署了一套基于Struts、Hibernate、Spring架构的java项目;这两个服务器都在本地机器中,本地机器的ip地址为:172.168.50.112。为了叙述方便,我们把端口号为8080的服务器称作服务器一,端口号为8888的服务器称作服务器二。 
现在服务器一需要访问服务器二的某一个后台接口。对于这一请求,很明显是属于跨域请求,因为这两个服务器的端口号不一样,下面将分别介绍以上三种实现跨域请求的例子。

方法一: 
代理。既然Ajax无法访问跨域资源,但是后台代码却可以。所以代理就是让Ajax请求请求本域的后台代码,后台代码访问跨域的资源,过程如下: 
Ajax实现跨域的三种方法-java示例

服务器一有一个Ajax请求,请求服务器二AjaxTestAction类下proxyAjax方法。这是无法访问的,因为服务器二和服务器一不在同一个域下。所以需要通过在服务器一增加一个代理类来访问服务器二的资源,对应的代码如下:

服务器一的前端代码: 
Ajax实现跨域的三种方法-java示例
服务器一的后端代码,即代理类: 
Ajax实现跨域的三种方法-java示例
服务器二的后端代码: 
Ajax实现跨域的三种方法-java示例

方法二: 
JSONP技术(只支持GET请求)。利用Ajax请求请求不同域的资源,会受到安全访问的限制,不能实现跨域访问,但是script 标签是一个例外,通过script标签访问不同域的资源则不受限制。所以JSONP技术就是利用script标签请求远程服务器资源,访问远程服务器资源时通过指定回调的js方法名,当远程服务器执行完之后,可以调用指定的js回调方法,回调js方法时,可以把远程服务器资源作为参数传到本地服务器中。 
要演示这种方法实现跨域访问,只需要在服务器一中定义一个script标签,并且把这个script标签的src设成服务器二的访问地址,并指定回调的js函数。具体的代码如下:

服务器一的前端代码: 
Ajax实现跨域的三种方法-java示例

服务器二的后端代码: 
Ajax实现跨域的三种方法-java示例

这种放方法实现跨域访问代码量不算太多,其主要是通过sript标签访问远程服务器的资源,但是也正因为通过script访问,所以这种技术并不属于ajax访问,只是其可以实现跨域访问而已。

方法三: 
XMLHttpRequest Level 2。这种技术是HTML5提供的一种技术,其通过在远程服务器设置response的Header来实现的一种跨域访问技术。当利用这种技术时,如果在前端的ajax请求设置了请求头,或者对请求或者响应设置了不同的信息,都有可能影响跨域访问,具体怎样影响可以参照这个网址:https://github.com/hstarorg/HstarDoc/blob/master/%E5%89%8D%E7%AB%AF%E7%9B%B8%E5%85%B3/CORS%E8%AF%A6%E8%A7%A3.md

下面展示一下我本地测试的的代码样例: 
服务器一的前端代码: 
Ajax实现跨域的三种方法-java示例
服务器二的后台代码: 
Ajax实现跨域的三种方法-java示例
如果只允许某一台机器可以跨域访问,可以这样设置: 
Ajax实现跨域的三种方法-java示例