目录

一：异步通信技术AJAX | 快速搞定AJAX（第四篇）

1、AJAX实现省市联动

2、超链接、form表单和JS代码跨域

3、AJAX跨域问题

（1）测试Ajax跨域访问

（2）同源 & 不同源

（3）AJAX跨域解决方案1：设置响应头

（4）AJAX跨域解决方案2：jsonp

（5）AJAX跨域解决方案3：jQuery封装的jsonp

（6）AJAX跨域解决方案4：代理机制（httpclient）

（7）AJAX跨域解决方案5：nginx反向代理

一：异步通信技术AJAX | 快速搞定AJAX（第四篇）

1、AJAX实现省市联动

（1）什么是省市联动？ -

在网页上，选择对应的省份之后，动态的关联出该省份对应的市。选择对应的市之后，动态的关联出该市对应的区。（首先要清楚需求）

（2）进行数据库表的设计：t_area （区域表）

将全国所有的省、市、区、县等信息都存储到一张表当中。
采用的存储方式实际上是code(编号) 和 pcode(父编号)形势。

id(PK-自增)   code(编号) name(名字) pcode(父编号)

 （3）建表t_area，模拟好数据；这里只做省市！ 

（4）页面加载完毕之后，先把省份全部展现出来

注：这里还是要先创建一个Area类，把从数据库中取出来的数据放里面，然后在放入一个List集合，最终   响应给浏览器，进行处理

 Area类

package com.bjpowernode.javaweb.bean;/** * @program: 代码 * @ClassName: Area * @version: 1.0 * @description: 区域 * @author: bjpowernode * @create: 2022-05-15 22:02 **/public class Area {    private String code;    private String name;    public Area() {    }    public Area(String code, String name) { this.code = code; this.name = name;    }    public String getCode() { return code;    }    public void setCode(String code) { this.code = code;    }    public String getName() { return name;    }    public void setName(String name) { this.name = name;    }}

前端代码

                     $(function () { // 页面加载     $.ajax({ //传一个JSON格式的数据过去  type : "get",  url : "/ajax/listArea",  data : "t=" + new Date().getTime(),  async : true,  success : function (jsonArr) {      // 拿到数据进行拼串，然后放到下拉列表select下面      var html = "--请选择省份--";      // 拿到的JSON数据肯定是一个数组      for (var i = 0; i <jsonArr.length; i++) {   var area = jsonArr[i];   html += ""+area.name+""      }      // 拼好串以后，把数据放到下拉列表中输出      $("#province").html(html)  }     }) })             

 后端代码

package com.bjpowernode.javaweb.ajax;import com.alibaba.fastjson.JSON;import com.bjpowernode.javaweb.bean.Area;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.sql.*;import java.util.*;/** * @program: 代码 * @ClassName: ListAreaServlet * @version: 1.0 * @description: 动态获取对应的区域 * @create: 2022-05-15 21:57 **/@WebServlet("/listArea")public class ListAreaServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { // 连接数据库，获取所有的对应区域。最终响应一个JSON格式的字符串给WEB前端。 Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; List areaList = new ArrayList(); try {     // 注册驱动     Class.forName("com.mysql.jdbc.Driver");     // 获取连接     String url = "jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8";     String user = "root";     String password = "123";     conn = DriverManager.getConnection(url, user, password);     System.out.println(conn);     // 获取预编译数据库操作对象     String sql = "select code,name from t_area where pcode is null";     ps = conn.prepareStatement(sql);     // 执行SQL     rs = ps.executeQuery();     // 处理结果集     while (rs.next()) {  // 取出数据  String code = rs.getString("code");  String name = rs.getString("name");  // 封装一个类，把数据放入里面  Area a = new Area(code, name);  // 把这个类再放到集合里面  areaList.add(a);     } } catch (Exception e) {     e.printStackTrace(); } finally {     // 释放资源     if (rs != null) {  try {      rs.close();  } catch (SQLException e) {      e.printStackTrace();  }     }     if (ps != null) {  try {      ps.close();  } catch (SQLException e) {      e.printStackTrace();  }     }     if (conn != null) {  try {      conn.close();  } catch (SQLException e) {      e.printStackTrace();  }     } } response.setContentType("text/html;charset=UTF-8"); // 使用fastjson将java对象转换成json字符串。 String json = JSON.toJSONString(areaList); // 响应JSON。 response.getWriter().print(json);    }}

效果展示：只要类一加载就会从数据中获取省份

（5）然后选择省份，只要change事件一发生，就发送Ajax请求，显示出对应的市

 前端代码

change时间发生，发送Ajax请求，然后根据pcode获取对应的市；在定义一个下拉列表，进行数据的显示

                     $(function () { // 页面加载     $.ajax({ //传一个JSON格式的数据过去  type : "get",  url : "/ajax/listArea",  data : "t=" + new Date().getTime(),  async : true,  success : function (jsonArr) {      // 拿到数据进行拼串，然后放到下拉列表select下面      var html = "--请选择省份--";      // 拿到的JSON数据肯定是一个数组      for (var i = 0; i <jsonArr.length; i++) {   var area = jsonArr[i];   html += ""+area.name+""      }      // 拼好串以后，把数据放到下拉列表中输出      // 这是省的下拉列表      $("#province").html(html)  }     })     // 只要province元素的change事件发生，就发送请求     $("#province").change(function(){  // 发送ajax请求  $.ajax({      type : "get",      url : "/ajax/listArea",      // 这里要把pcode传过去，this.value就是获取到的pcode      data : "t=" + new Date().getTime() + "&pcode=" + this.value,      async : true,      success : function(jsonArr){   var html = "--请选择市--";   for (var i = 0; i < jsonArr.length; i++) {var area = jsonArr[i]html += ""+area.name+""   }   // 这是市的下拉列表   $("#city").html(html)      }  })     }) })                      

后端代码

 两个Ajax请求可以共享一个Servlet；主要就是先获取pcode，看pcode是不是null：

        如果是null表示发送的是页面加载显示省的请求；

        如果不是null表示发送的是change时间显示市的请求

package com.bjpowernode.javaweb.ajax;import com.alibaba.fastjson.JSON;import com.bjpowernode.javaweb.bean.Area;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.sql.*;import java.util.*;/** * @program: 代码 * @ClassName: ListAreaServlet * @version: 1.0 * @description: 动态获取对应的区域 * @create: 2022-05-15 21:57 **/@WebServlet("/listArea")public class ListAreaServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { // 获取到前端发送的pcode String pcode = request.getParameter("pcode"); // 连接数据库，获取所有的对应区域。最终响应一个JSON格式的字符串给WEB前端。 Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; List areaList = new ArrayList(); try {     // 注册驱动     Class.forName("com.mysql.jdbc.Driver");     // 获取连接     String url = "jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8";     String user = "root";     String password = "123";     conn = DriverManager.getConnection(url, user, password);     // 获取预编译数据库操作对象     String sql = "";     if (pcode == null){// 如果pcode为null表示是省  sql = "select code,name from t_area where pcode is null";  ps = conn.prepareStatement(sql);     }else {// 如果pcode不为null表示是市  sql = "select code,name from t_area where pcode = ?";  ps = conn.prepareStatement(sql);  ps.setString(1,pcode);     }     // 执行SQL     rs = ps.executeQuery();     // 处理结果集     while (rs.next()) {  // 取出数据  String code = rs.getString("code");  String name = rs.getString("name");  // 封装一个类，把数据放入里面  Area a = new Area(code, name);  // 把这个类再放到集合里面  areaList.add(a);     } } catch (Exception e) {     e.printStackTrace(); } finally {     // 释放资源     if (rs != null) {  try {      rs.close();  } catch (SQLException e) {      e.printStackTrace();  }     }     if (ps != null) {  try {      ps.close();  } catch (SQLException e) {      e.printStackTrace();  }     }     if (conn != null) {  try {      conn.close();  } catch (SQLException e) {      e.printStackTrace();  }     } } response.setContentType("text/html;charset=UTF-8"); // 使用fastjson将java对象转换成json字符串。 String json = JSON.toJSONString(areaList); // 响应JSON。 response.getWriter().print(json);    }}

执行效果：
①选择省：发送页面加载的Ajax请求

②省选择以后，发生了change事件，机会发送显示对应市的Ajax请求

2、超链接、form表单和JS代码跨域

（1）跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(https://baidu.com)页面去请求京东(https://www.jd.com)的资源。

（2）通过超链接、form表单提交或者JS代码的window.location.href的方式进行跨域是不存在问题的！但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，那么ajax就存在这种跨域问题。

（3）同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性，同源就是协议、域名和端口都相同。

（4）同源策略有什么用？如果你刚刚在网银输入账号密码，查看了自己还有1万块钱，紧接着访问一些不规矩的网站，这个网站可以访问刚刚的网银站点，并且获取账号密码，那后果可想而知。所以，从安全的角度来讲，同源策略是有利于保护网站信息的。

（5）有一些情况下，我们是需要使用ajax进行跨域访问的。比如某公司的A页面(a.bjpowernode.com)有可能需要获取B页面(b.bjpowernode.com)。

（6）测试

①对于超链接、form表单、JS代码；都是改变了地址栏的地址，是可以跨域访问的

②对于Ajax，并没有改变地址栏的地址，是不能跨域访问的

模拟超链接、form表单、JS代码方式跨域问题

步骤一：创建两个模块a和b，整两个Tomcat服务器

步骤二：默认a的HTTP端口号是8080，JMX端口号是1099；修改b的HTTP端口号为8081，JMX端口号是1098；不然在同一台服务器上端口号会冲突

步骤三：

①对于超链接，写两个index.html页面，就从a的index.html页面跨域访问b的index.html页面

②对于form表单的形式，a通过提交forrm表单发送数据，b接收请求在Servlet中获取数据

③对于JS代码，直接定义个按钮，通过点击事件onclick进行跳转到b的index.html

④通过标签加载b站点的web根目录下的my.js文件

⑤使用img标签加载b站点的web目录下的baidu.png图片

😊对于a站点代码

index.html

                b的index页面(跨域)         用户名：
 密码：
             b的index页面(跨域访问)                
    

😊对于b站点代码

index.html

            
b应用的index页面 

请求Servlet              

package com.bjpowernode.zl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebServlet("/user/reg")public class UserRegServlet extends HttpServlet {    @Override    protected void doPost(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { // 获取用户名和密码 String username = request.getParameter("username"); String password = request.getParameter("password"); // 响应到前端 response.getWriter().print(username + ":" + password);    }}

web跟下的my.js文件和baidu.png图片

 😊测试结果：以上请求都是支持跨域的，资源都能跨域访问到

3、AJAX跨域问题

（1）测试Ajax跨域访问

①默认情况下：发送ajax跨域请求的时候会出现以下错误：Access to XMLHttpRequest at 'http://localhost:8081/b/hello' from origin 'http://localhost:8080' has been blocked by CORS policy:No 'Access-Control-Allow-Origin' header is present on the requested resource.
②出现这个错误的根本原因是：跨域的时候，不允许共享同一个XMLHttpRequest对象，因为共享同一个XMLHttpRequest对象是不安全的。
③重点提示：CORS策略阻止（这个ajax跨域请求被同源策略阻止）。
④什么是同源策略？同源策略是浏览器的一种安全策略。

a站点发送Ajax请求

            window.onload = function(){ document.getElementById("btn").onclick = function(){     // 发送ajax的跨域请求     // 1. 创建核心对象     var xmlHttpRequest = new XMLHttpRequest();     // 2. 注册回调函数     xmlHttpRequest.onreadystatechange = function(){  if (xmlHttpRequest.readyState == 4) {      if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {   document.getElementById("mydiv").innerHTML = xmlHttpRequest.responseText      }  }     }     // 3. 开启通道     xmlHttpRequest.open("GET", "http://localhost:8081/b/hello", true)     // 4. 发送请求     xmlHttpRequest.send() }    }发送ajax跨域请求

b站点进行响应

package com.bjpowernode.zl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebServlet("/hello")public class HelloServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { // 响应 response.getWriter().print("hello ajax!!!");    }}

效果展示：Ajax请求时不支持跨域问题的

（2）同源 & 不同源

①区分同源和不同源的三要素：协议、域名、端口

②协议一致，域名一致，端口号一致，三个要素都一致，才是同源，其它一律都是不同源
③同源：XMLHttpRequest对象可以共享；

   不同源：XMLHttpRequest对象不可以共享。

④判别同不同源的例子：

（3）AJAX跨域解决方案1：设置响应头

①核心原理：跨域访问的资源允许你跨域访问。

②b站点的Servlet设置响应头，就表示允许你跨域访问。

③http://localhost:8080表示允许http协议、域名为localhost、端口号为8080的服务器跨域访问；*就表示允许所有的服务器进行跨域访问。

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");response.setHeader("Access-Control-Allow-Origin", "*"); 

b站点响应代码加上设置响应头

package com.bjpowernode.zl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebServlet("/hello")public class HelloServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { // 设置响应头，允许ajax跨域请求 response.setHeader("Access-Control-Allow-Origin","http://localhost:8080"); // 响应 response.getWriter().print("hello ajax!!!");    }}

效果展示：Ajax请求时跨域可以正常访问

（4）AJAX跨域解决方案2：jsonp

①jsonp：json with padding（带填充的json）

②jsonp不是一个真正的ajax请求，只不过可以完成ajax的局部刷新效果。可以说jsonp是一种类似ajax请求的机制！

③jsonp不是ajax请求，但是可以完成局部刷新的效果，并且可以解决跨域问题。

④注意：jsonp解决跨域的时候，只支持GET请求，不支持post请求！

⑤使用script标签，通过src属性发出请求，进行跨域访问！

😊jsop初步：其实Ajax没什么关系，发送Ajax请求是需要使用XMLHttpRequest对象的

a站点发送请求

                 /*function sayHello() {     alert("Hello World"); }*/ function sayHello(data) {     alert("username="+data.name) }                

b站点进行响应

package com.bjpowernode.zl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.io.PrintWriter;/** * @Author：朗朗乾坤 * @Package：com.bjpowernode.zl * @Project：ajax * @name：JsonpServlet1 * @Date：2022/12/12 15:27 */@WebServlet("/jsonp1")public class JsonpServlet1 extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); // 1、在后台进行输出一个普通的字符串 System.out.println("jsonp方式完成跨域访问"); // 2、向前端响应一段JS代码 PrintWriter out = response.getWriter(); // 这是响应一段js代码，只不过这个alert函数是JS内置的函数，可以直接用 out.print("alert(123)"); // 这行代码就相当于写到a站点.html的script标签里 // 3、调用函数 // 这也是响应一段JS代码，只不过这个sayHello函数是程序员自定义的 // 后端把sayHello()字符串响应到浏览器上，浏览器去调用这个函数 out.print("sayHello()"); // 4、函数中响应一个JSON数据 out.print("sayHello({\"name\" : \"jackson\"})"); // 5、动态获取函数名 String fun = request.getParameter("fun"); out.print(fun+"({\"name\" : \"jackson\"})");    }}

😊jsonp深入：初步中页面一打开就加载script标签，并没有达到页面局部刷新的效果；我们要做的是先加载完，然后点击按钮才会加载script标签；实际上就是script标签中套script标签

a站点发送请求

script标签中套script标签四步：
①创建script元素对象：document.createElement("script");

②设置script的type属性：script元素对象.type = "text/javascript"

③设置script的src属性：script元素对象.src = "http://localhost:8081/b/jsonp2?fun=sayHello"

④加载script，将script对象添加到body标签中：document.getElementsByTagName("body")[0].appendChild(htmlScriptElement)

             // 自己定义的函数 function sayHello(data) {     document.getElementById("mydiv").innerHTML = data.username } // 点击按钮加载script标签 window.onload = function () {     document.getElementById("btn").onclick = function () {  // 加载script元素  //1.创建script元素对象  var htmlScriptElement = document.createElement("script");  //2.设置script的type属性  htmlScriptElement.type = "text/javascript"  //3.设置script的src属性  htmlScriptElement.src = "http://localhost:8081/b/jsonp2?fun=sayHello"  // 将script对象添加到body标签中（这一步就是加载script）  document.getElementsByTagName("body")[0].appendChild(htmlScriptElement)     } }        jsonp解决跨域问题，达到ajax局部刷新的效果    

b站点进行响应

package com.bjpowernode.zl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebServlet("/jsonp2")public class JSONPServlet2 extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { // 获取函数名 String fun = request.getParameter("fun"); // 响应一段js代码 response.getWriter().print(fun + "({\"username\" : \"lucy\"})");    }}

（5）AJAX跨域解决方案3：jQuery封装的jsonp

①大牛们写的jQuery库，已经对jsonp进行了封装，可以直接拿来用。

②用之前需要引入jQuery库的js文件。

③jQuery中的jsonp其实就是我们上面代码的高度封装，底层原理完全相同。

④核心代码

$.ajax({    type : "GET",    url : "跨域的url",    dataType : "jsonp", // 指定数据类型    jsonp : "fun", // 指定参数名（不设置的时候，默认是："callback"）    jsonpCallback : "sayHello" // 指定回调函数的名字   // （不设置的时候，jQuery会自动生成一个随机的回调函数，//并且这个回调函数还会自动调用success的回调函数。）})

步骤一：先创建一个目录，然后把官方的jQuery放进去

步骤二：

前端代码

第一种方式：全都采用默认的方式

虽然url : "http://localhost:8081/b/jsonp3"这样传，但是实际上会自动转换为以下代码

http://localhost:8081/b/jsonp3?callback=jQuery36006725923678901025_1670837696149&_=1670837696150

①callback=jQuery36006725923678901025_1670837696149，callback就是name相当于之前的fun；

②jQuery36006725923678901025_1670837696149就是函数名，相当于之前的sayHello，而这个名字是jQuery自动为我们生成的； 

③&_=1655528968613是一个时间戳。

④并且自动生成的这个函数，默认情况还会自动调用我们传的success回调函数

⑤最关键的是传参的时候要指定数据类型是jsonp形式，dataType : "jsonp"

                    $(function () {     $("#btn").click(function () {  // 发送所谓的ajax请求，实际上并不是  $.ajax({ // 传一个JSON数据过去      type : "GET", // jsonp请求只支持get请求。      url : "http://localhost:8081/b/jsonp3",      dataType : "jsonp", // 指定数据类型是jsonp形式。【跨域最关键的是它】      success : function (data) { // data是一个json：{"username":"lisi"})   $("#mydiv").html(("欢迎你：" + data.username))      }  })     }) })        jQuery库封装的jsonp    

 第二种方式：采用自定义的方式

①使用jsonp属性，用来指定参数的名字

②使用jsonpCallback属性，用这个属性来指定具体的回调函数

                     // 自定义函数 function sayHello(data) {     $("#mydiv").html(("欢迎你：" + data.username)) } $(function () {     $("#btn").click(function () {  // 发送所谓的ajax请求，实际上并不是  $.ajax({ // 传一个JSON数据过去      type : "GET", // jsonp请求只支持get请求。      url : "http://localhost:8081/b/jsonp3",      dataType : "jsonp", // 指定数据类型是jsonp形式。【跨域最关键的是它】jsonp : "fun",      /*第一种方式      jsonpCallback : function (data) {   $("#mydiv").html(("欢迎你：" + data.username))      }*/      // 第二种方式      jsonpCallback : "sayHello"  })     }) })        jQuery库封装的jsonp    

 后端代码

①采用默认的方式，name就是callback，通过name获取对应的函数名

②采用自定义的方式，通过前端定义的jsonp属性指定的名字获取函数名

package com.bjpowernode.zl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebServlet("/jsonp3")public class JSONPServlet3 extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { // 获取函数名,callback名称是默认的 String callback = request.getParameter("callback"); // 响应一段js代码，调用函数 response.getWriter().print(callback + "({\"username\":\"lisi\"})"); // 获取函数名，使用自定义的 String fun = request.getParameter("fun"); // 响应一段js代码，调用函数 response.getWriter().print(fun + "({\"username\":\"lisi\"})");    }}

（6）AJAX跨域解决方案4：代理机制（httpclient）

（1）代理机制：既然服务及不能直接跨域发送Ajax请求访问；那么先不跨域发送Ajax请求给Servlet，然后在通过这个Servlet（java代码）发送请求进行跨域访问！

（2）使用Java程序怎么去发送get/post请求呢？【GET和POST请求就是HTTP请求。】

①第一种方案：使用JDK内置的API（java.net.URL.....），这些API是可以发送HTTP请求的；但是编写代码很麻烦，不建议使用。

②第二种方案：使用第三方的开源组件，比如：apache的httpclient组件。（httpclient组件是开源免费的，可以直接用）               

（3）在java程序中，使用httpclient组件可以发送http请求。

①对于httpclient组件的代码，目前可以不进行深入的研究，可以从网上直接搜；然后粘贴过来，改一改，看看能不能完成发送get和post请求。

②使用httpclient组件，需要将这个组件相关的jar包引入到项目当中。

 a站点的前端代码

            // ES6当中的有一个新语法：箭头函数。    window.onload = function() { document.getElementById("btn").onclick = function() {     // 发送ajax请求     // 1.创建核心对象     var xmlHttpRequest = new XMLHttpRequest(); // const可以声明变量。(可以自己研究一下：var let const声明变量时有什么区别)     // 2.注册回调函数     xmlHttpRequest.onreadystatechange = function() {  if (xmlHttpRequest.readyState == 4) {      // 这里也可以使用区间的方式，因为状态码是200~299都是正常响应结束。      if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {   document.getElementById("mydiv").innerHTML = xmlHttpRequest.responseText      }  }     }     // 3.开启通道     xmlHttpRequest.open("GET", "/a/proxy", true)     // 4.发送请求     xmlHttpRequest.send() }    }使用代理机制解决ajax跨域访问

 a站点的Servlet代码，代理Servlet，先引入jar包手动Add，再在java代码中发送GET请求

package com.bjpowernode.zl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.http.HttpEntity;import org.apache.http.HttpResponse;import org.apache.http.client.methods.HttpGet;import org.apache.http.impl.client.CloseableHttpClient;import org.apache.http.impl.client.HttpClients;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;@WebServlet("/proxy")public class ProxyServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { // 通过httpclient组件，发送HTTP GET请求，访问 TargetServlet HttpGet httpGet = new HttpGet("http://localhost:8081/b/target"); httpGet.setHeader("Content-Type", "application/x-www-form-urlencoded"); CloseableHttpClient httpClient = HttpClients.createDefault(); HttpResponse resp = httpClient.execute(httpGet); HttpEntity entity = resp.getEntity(); BufferedReader reader = new BufferedReader(new InputStreamReader(entity.getContent(), "UTF-8")); String line = null; StringBuffer responseSB = new StringBuffer(); while ((line = reader.readLine()) != null) {     responseSB.append(line); } reader.close(); httpClient.close(); // b站点响应回来的数据 response.getWriter().print(responseSB);    }}

b站点的Servlet，会返回一个json格式的字符串

package com.bjpowernode.zl;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@WebServlet("/target")public class TargetServlet extends HttpServlet {    @Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException { // 响应一个json字符串。 response.getWriter().print("{\"username\":\"jackson\"}");    }}

执行结果，也能完整跨域访问

（7）AJAX跨域解决方案5：nginx反向代理

nginx反向代理中也是使用了这种代理机制来完成AJAX的跨域，实现起来非常简单，只要修改一个nginx的配置即可。后面学习到互联网分布式技术会细讲！