(修订版)AJAX入门！

迈不过友情╰ 2021-09-30 22:42 350阅读 0赞

## 前言 ##

> 只有光头才能变强。
> 
> 文本已收录至我的GitHub仓库，欢迎Star：https://github.com/ZhongFuCheng3y/3y

# 一、什么是Ajax #

**Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML**

Ajax实际上是下面这几种技术的融合：

**客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术**

# 二、为什么我们需要Ajax？ #

在我们之前的开发，每当用户向服务器发送请求，**哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。**

**Ajax就是能够做到局部刷新**！

![640?wx\_fmt=png][640_wx_fmt_png] 这里写图片描述

--------------------

# 三、XMLHttpRequest #

**XMLHttpRequest对象是Ajax中最重要的一个对象**。**使用Ajax更多的是编写客户端代码**，而不是服务端的代码。

## 3.1XMLHttpRequest 工作原理 ##

传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。

当我们使用AJAX之后，**浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器**

XMLHttpRequest异步对象会**不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg] 这里写图片描述

--------------------

## 3.2创建XMLHttpRequest对象 ##

要创建XMLHttpRequest对象是要分两种情况考虑的：

## 3.3了解XMLHttpRequest对象的属性和方法 ##

### 3.3.1方法 ###

**常用的方法就是黑色粗体的前三个**

### 3.3.2属性 ###

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1] 这里写图片描述

上面有两个地方都提及了回调函数，回调函数是什么？？

回调函数就是**接收服务器返回的内容！**

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 2] 这里写图片描述

--------------------

# 四、编写第一个Ajax程序 #

**检测用户输入的用户名是否为"zhongfucheng"，只要不是zhongfucheng，就可以使用！**

## 4.1html代码 ##

<input type="text" id="username"><input type="button" onclick="checkUsername()" value="检测用户名是否合法"><div id="result"></div>
    <input type="button" onclick="checkUsername()" value="检测用户名是否合法">
    <div id="result">
    
    </div>

## 4.2JavaScript代码 ##

## 4.3效果 ##

**实现了局部更新，不需要刷新整一个页面**

![640?wx\_fmt=gif][640_wx_fmt_gif] 这里写图片描述

--------------------

# 五、XMLHttpRequest解决中文乱码 #

在传统的Web中我们已经解决过中文乱码问题了。

接下来，要介绍的是：**我们可以屏蔽任何浏览器和任何服务器的编码格式，浏览器发送给服务器的数据不造成乱码问题！**

具体我们是这样做的：

为啥我能说这种方式屏蔽任何浏览器和服务器的编码格式，都不会乱码呢？？

![640?wx\_fmt=png][640_wx_fmt_png 1] 这里写图片描述

--------------------

# 六、XMLHttpRequest解决缓存问题 #

在传统的Web中我们也解决过缓存的问题，**通过设置response的头信息，返回给浏览器就可以实现不缓存页面了。**

但是呢，现在我们使用XMLHttpRequest，**拿到的不是全新的页面，仅仅是服务器端发送过来的数据！！**

那我们要怎么解决缓存的问题呢？？产生缓存的原因就是：**我们请求了同一个地址，做了相同的操作。服务端认为我的操作并没有什么变化，就直接把缓存的信息给我了**。这样的话，我就不能更换验证码图片了(等等应用)。

我们可以这样做：

if(url.indexOf("?") >= 0){url = url + "&t=" + (new Date()).valueOf();} else{url = url + "?t=" + (new Date()).valueOf();}"?") >= 0){
        
    url = url + "&t=" + (new Date()).valueOf();
    } else{
        
    url = url + "?t=" + (new Date()).valueOf();
    }

--------------------

# 七、XMLHttpRequest跨域访问 #

**使用XMLHttpRequest去跨域访问是会出现错误的**。

![640?wx\_fmt=png][640_wx_fmt_png 2] 这里写图片描述

我们要怎么解决呢？？这时候就要**用代理思想了**

![640?wx\_fmt=png][640_wx_fmt_png 3] 这里写图片描述

这个时候，**XMLHttpRequest跨域访问就分两种(GET和POST)情况了，因为这两种提交数据的方式是不一样的！**

## 7.1浏览器代码 ##

## 7.2GET方式 ##

**GET方式是直接把参数的信息都放在url地址上，所以处理起来会相对简单。**

步骤：

BufferedReader reader = new BufferedReader(new InputStreamReader(URL对象.openSteam(),"UTF-8"));  new InputStreamReader(URL对象.openSteam(),"UTF-8"));

--------------------

## 7.3POST方式 ##

**POST方式把参数的信息都封装到HTTP请求中，在URL进行连接的时候，需要把数据写给远程服务器**

步骤：

URL url = new URL(url);URLConnection connection = url.openConnection;connection.setDoOutPut(true);
    URLConnection connection = url.openConnection;
    connection.setDoOutPut(true);

OutputSteamWriter writer = new OutputSteamWriter(conncetion.getOutputSteam)

BufferedReader reader =  new BufferedReader(new InputSteamReader(conncetion.inputSteamReader,"UTF-8"));new InputSteamReader(conncetion.inputSteamReader,"UTF-8"));

--------------------

# 八、AJAX二级下拉联动案例【XML版】 #

我们在购物的时候，常常需要我们来选择自己的收货地址，**先选择省份，再选择城市**…

有没有发现：**当我们选择完省份的时候，出现的城市全部都是根据省份来给我们选择的**。这是怎么做到的呢？？？其实就是通过AJAX来完成的。使用AJAX技术让我们看起来网页非常“智能”，会根据省份来给出对应的城市信息。

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 3] 这里写图片描述

我们这里就不读取数据库了，直接**在Servlet写死数据来进行模拟测试**。

--------------------

## 8.1分析 ##

我们知道AJAX与服务器之间的交互常用的传输载体格式有三种：

由于**省份与城市是有层级关系的**，因此我们**只能用XML或者JSON**。

我们这里**首先就用XML来进行，后面会使用JSON，来看看他俩有什么不同的地方**。。

### 8.1.1前台分析 ###

**当用户选择了某个省份之后，就使用AJAX与服务器进行交互，那么在选择城市的时候就出现对应的城市信息。**

### 8.1.2后台分析 ###

--------------------

## 8.2写JSP页面 ##

<%--  Created by IntelliJ IDEA.  User: ozc  Date: 2017/5/17  Time: 19:38  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>多级联动</title>    <script type="text/javascript" src="js/ajax.js"></script></head><body><%--############前台页面###################--%><select name="province" id="provinceId">    <option value="-1">请选择省份</option>    <option>广东</option>    <option>湖南</option></select><select name="city" id="cityId">    <option>请选择城市</option></select><%--############AJAX###################--%><script type="text/javascript">    document.getElementById("provinceId").onchange = function () {        /**********定位到下拉框，获取下拉框的值***************/        // 获取选中的下拉框索引值        var index = this.selectedIndex;        // 得到下拉框的值        var province = this.options[index].innerHTML;        //下拉框的值要是“请选择”，那么我们是不会访问服务器的        if ("请选择省份" != province) {            /********由于每次都会自动添加，因此每次在调用的时候清除***********/            var citySelect = document.getElementById("cityId");            //每次都将option变成长度只有1的            citySelect.options.length = 1;            /*************ajax代码*********************/            //创建AJAX对象            var ajax = createAJAX();            //准备发送请求            var method = "post";            var url = "${pageContext.request.contextPath}/ProvinceServlet?time=" + new Date().getTime();            ajax.open(method, url);            //由于是POST方式，因此要设置头            ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");            ajax.send("province=" + province);            /************ajax回调函数*********************/            ajax.onreadystatechange = function () {                if (ajax.readyState == 4) {                    if (ajax.status == 200) {                        //得到服务器端带过来的XML                        var XMLDocument = ajax.responseXML;                        /**********解析XML文档，使用DOM写到下拉框中****************/                        var cities = XMLDocument.getElementsByTagName("city");                        //得到每一个cities节点的值，动态生成下拉框，添加到下拉框中                        for (var i = 0; i < cities.length; i++) {                            var value = cities[i].firstChild.nodeValue;                            //动态生成下拉框                            var optionElement = document.createElement("option");                            optionElement.innerHTML = value;                            //添加到下拉框中                            citySelect.appendChild(optionElement);                        }                    }                }            };        }    };</script></body></html>
      User: ozc
      Date: 2017/5/17
      Time: 19:38
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head>     <title>多级联动</title>     <script type="text/javascript" src="js/ajax.js"></script> </head> <body> <%--############前台页面###################--%> <select name="province" id="provinceId">     <option value="-1">请选择省份</option>     <option>广东</option>     <option>湖南</option> </select> <select name="city" id="cityId">     <option>请选择城市</option> </select> <%--############AJAX###################--%> <script type="text/javascript">     document.getElementById("provinceId").onchange = function () {         /**********定位到下拉框，获取下拉框的值***************/         // 获取选中的下拉框索引值         var index = this.selectedIndex;         // 得到下拉框的值         var province = this.options[index].innerHTML;         //下拉框的值要是“请选择”，那么我们是不会访问服务器的         if ("请选择省份" != province) {             /********由于每次都会自动添加，因此每次在调用的时候清除***********/             var citySelect = document.getElementById("cityId");             //每次都将option变成长度只有1的             citySelect.options.length = 1;             /*************ajax代码*********************/             //创建AJAX对象             var ajax = createAJAX();             //准备发送请求             var method = "post";             var url = "${pageContext.request.contextPath}/ProvinceServlet?time=" + new Date().getTime();             ajax.open(method, url);             //由于是POST方式，因此要设置头             ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");             ajax.send("province=" + province);             /************ajax回调函数*********************/             ajax.onreadystatechange = function () {                 if (ajax.readyState == 4) {                     if (ajax.status == 200) {                         //得到服务器端带过来的XML                         var XMLDocument = ajax.responseXML;                         /**********解析XML文档，使用DOM写到下拉框中****************/                         var cities = XMLDocument.getElementsByTagName("city");                         //得到每一个cities节点的值，动态生成下拉框，添加到下拉框中                         for (var i = 0; i < cities.length; i++) {                             var value = cities[i].firstChild.nodeValue;                             //动态生成下拉框                             var optionElement = document.createElement("option");                             optionElement.innerHTML = value;                             //添加到下拉框中                             citySelect.appendChild(optionElement);                         }                     }                 }             };         }     }; </script> </body> </html>

## 8.3Servlet ##

import java.io.IOException;import java.io.PrintWriter;/** * Created by ozc on 2017/5/17. */@javax.servlet.annotation.WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")public class ProvinceServlet extends javax.servlet.http.HttpServlet {    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {        //设置中文编码        request.setCharacterEncoding("UTF-8");        String province = request.getParameter("province");        //这里是返回的是XML，因此指定XML数据！        response.setContentType("text/xml;charset=UTF-8");        PrintWriter printWriter = response.getWriter();        /****************返回XML文件给前台**************/        printWriter.write("<?xml version='1.0' encoding='UTF-8'?>");        printWriter.write("<root>");        if("广东".equals(province)){            printWriter.write("<city>广州</city>");            printWriter.write("<city>深圳</city>");            printWriter.write("<city>中山</city>");        }else if("湖南".equals(province)){            printWriter.write("<city>长沙</city>");            printWriter.write("<city>株洲</city>");            printWriter.write("<city>湘潭</city>");            printWriter.write("<city>岳阳</city>");        }        printWriter.write("</root>");        System.out.println("1111");        /*******事后操作*******/        printWriter.flush();        printWriter.close();    }    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {        this.doPost(request, response);    }}
    import java.io.PrintWriter;
    
    /**  * Created by ozc on 2017/5/17.  */
    @javax.servlet.annotation.WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")
    public class ProvinceServlet extends javax.servlet.http.HttpServlet {
        
        protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        
    
            //设置中文编码
            request.setCharacterEncoding("UTF-8");
            String province = request.getParameter("province");
    
            //这里是返回的是XML，因此指定XML数据！
            response.setContentType("text/xml;charset=UTF-8");
    
            PrintWriter printWriter = response.getWriter();
    
            /****************返回XML文件给前台**************/
            printWriter.write("<?xml version='1.0' encoding='UTF-8'?>");
            printWriter.write("<root>");
            if("广东".equals(province)){
        
                printWriter.write("<city>广州</city>");
                printWriter.write("<city>深圳</city>");
                printWriter.write("<city>中山</city>");
            }else if("湖南".equals(province)){
        
                printWriter.write("<city>长沙</city>");
                printWriter.write("<city>株洲</city>");
                printWriter.write("<city>湘潭</city>");
                printWriter.write("<city>岳阳</city>");
            }
            printWriter.write("</root>");
    
            System.out.println("1111");
    
    
            /*******事后操作*******/
            printWriter.flush();
            printWriter.close();
    
    
        }
    
        protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        
    
            this.doPost(request, response);
        }
    }

## 8.4效果： ##

![640?wx\_fmt=gif][640_wx_fmt_gif 1] 这里写图片描述

## 8.5XML方式总结 ##

--------------------

# 九、AJAX二级下拉联动案例【JSON版】 #

前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互。当时候我们的案例是二级联动，使用Servlet进行控制

这次我们使用JSON作为数据载体在AJAX与服务器交互，使用三级联动，使用Action进行控制….

--------------------

## 9.1分析 ##

与上次是一样的，只不过这次换了用JSON，使用Action控制罢了…

**监听下拉框的变动，使用异步对象与服务器进行交互。**

### 9.1.1前台分析 ###

### 9.1.2后台分析 ###

--------------------

## 9.2监听省份JSP页面 ##

<%--  Created by IntelliJ IDEA.  User: ozc  Date: 2017/5/18  Time: 13:36  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html>  <head>    <title>使用JSON数据载体与服务器进行交互</title>      <script type="text/javascript" src="js/ajax.js"></script>  </head>  <body>  <%--############前台页面##############################--%>  <select name="province" id="provinceId">    <option>请选择省份</option>    <option>广东</option>    <option>北京</option>  </select>  <select name="city" id="cityId">    <option>请选择城市</option>  </select>  <select name="area" id="areaId">    <option>请选择区域</option>  </select>  <%--############监听省份##############################--%>  <script type="text/javascript">      document.getElementById("provinceId").onchange= function () {          // 得到选中的下拉框的值          var provinceValue = this.options[this.selectedIndex].innerHTML;          /***************ajax代码*************************/          if("请选择省份" != provinceValue) {              //每次访问的时候，都要清空select的值              var citySelect = document.getElementById("cityId");              citySelect.options.length = 1;              var ajax = createAJAX();              var method = "post";              var url = "${pageContext.request.contextPath}/province_findCityByProvince?time=" + new Date().getTime();              ajax.open(method, url);              ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");              //顾及到发送的key、value值有很多，于是我们使用对象吧。              ajax.send("bean.name=" + provinceValue);              /***************等待服务器的响应，得到服务器返回的数据************************/              ajax.onreadystatechange = function () {                  if(ajax.readyState==4) {                      if(ajax.status==200) {                        var jsonJava = ajax.responseText;                        //解析成是JS类型的JSON                        var json = eval("(" + jsonJava + ")");                        //得到每个城市的值                        for(var i=0;i<json.city.length;i++) {                          var city = json.city[i];                          //动态创建option控件                          var option = document.createElement("option");                          option.innerHTML = city;                          citySelect.appendChild(option);                        }                      }                  }              };          }      };  </script>  </body></html>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>使用JSON数据载体与服务器进行交互</title>
    
          <script type="text/javascript" src="js/ajax.js"></script>
      </head>
      <body>
    
    
      <%--############前台页面##############################--%>
      <select name="province" id="provinceId">
        <option>请选择省份</option>
        <option>广东</option>
        <option>北京</option>
      </select>
    
      <select name="city" id="cityId">
        <option>请选择城市</option>
      </select>
    
    
      <select name="area" id="areaId">
        <option>请选择区域</option>
      </select>
    
      <%--############监听省份##############################--%>
      <script type="text/javascript">       document.getElementById("provinceId").onchange= function () {           // 得到选中的下拉框的值           var provinceValue = this.options[this.selectedIndex].innerHTML;           /***************ajax代码*************************/           if("请选择省份" != provinceValue) {               //每次访问的时候，都要清空select的值               var citySelect = document.getElementById("cityId");               citySelect.options.length = 1;               var ajax = createAJAX();               var method = "post";               var url = "${pageContext.request.contextPath}/province_findCityByProvince?time=" + new Date().getTime();               ajax.open(method, url);               ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");               //顾及到发送的key、value值有很多，于是我们使用对象吧。               ajax.send("bean.name=" + provinceValue);               /***************等待服务器的响应，得到服务器返回的数据************************/               ajax.onreadystatechange = function () {                   if(ajax.readyState==4) {                       if(ajax.status==200) {                         var jsonJava = ajax.responseText;                         //解析成是JS类型的JSON                         var json = eval("(" + jsonJava + ")");                         //得到每个城市的值                         for(var i=0;i<json.city.length;i++) {                           var city = json.city[i];                           //动态创建option控件                           var option = document.createElement("option");                           option.innerHTML = city;                           citySelect.appendChild(option);                         }                       }                   }               };           }       };   </script>
    
      </body>
    </html>

## 9.3监听省份Action ##

**要想Struts2能够把Action的数据封装成JSON，就需要导入Struts2的开发包**

![640?wx\_fmt=png][640_wx_fmt_png 4] 这里写图片描述

**在Action中对应的成员属性需要给getter方法**

import com.opensymphony.xwork2.ActionSupport;import java.util.ArrayList;import java.util.List;/** * Created by ozc on 2017/5/18. */public class ProvinceAction  extends ActionSupport{    //自动封装数据    private Bean bean;    public Bean getBean() {        return bean;    }    public void setBean(Bean bean) {        this.bean = bean;    }    //封装城市的集合    private List<String> city = new ArrayList<>();    public List<String> getCity() {        return city;    }    public String findCityByProvince() throws Exception {        if ("广东".equals(bean.getName())) {            city.add("广州");            city.add("珠海");            city.add("从化");        } else if ("北京".equals(bean.getName())) {            city.add("一环");            city.add("二环");            city.add("三环");            city.add("四环");        } else {            System.out.println("没有你选择的地区");        }        return "ok";    }}
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**  * Created by ozc on 2017/5/18.  */
    public class ProvinceAction  extends ActionSupport{
        
    
        //自动封装数据
        private Bean bean;
        public Bean getBean() {
        
            return bean;
        }
        public void setBean(Bean bean) {
        
            this.bean = bean;
        }
    
        //封装城市的集合
        private List<String> city = new ArrayList<>();
        public List<String> getCity() {
        
            return city;
        }
    
        public String findCityByProvince() throws Exception {
        
    
            if ("广东".equals(bean.getName())) {
        
                city.add("广州");
                city.add("珠海");
                city.add("从化");
            } else if ("北京".equals(bean.getName())) {
        
                city.add("一环");
                city.add("二环");
                city.add("三环");
                city.add("四环");
    
            } else {
        
                System.out.println("没有你选择的地区");
    
            }
            return "ok";
        }
    }

**返回给前端的时候，数据是这样子的：**

![640?wx\_fmt=png][640_wx_fmt_png 5] 这里写图片描述

--------------------

## 9.4效果 ##

![640?wx\_fmt=gif][640_wx_fmt_gif 2] 这里写图片描述

--------------------

## 9.5监听城市JSP ##

<%--############监听城市##############################--%><script type="text/javascript">  document.getElementById("cityId").onchange = function () {      //清空值      var areaSelect = document.getElementById("areaId");      areaSelect.options.length = 1;      //得到选择选中的下拉框的值      var cityValue = this.options[this.selectedIndex].innerHTML;      if(cityValue!="请选择城市"){          var ajax = createAJAX();          var method = "post";          var url = "${pageContext.request.contextPath}/province_findAreaByCity?time=" + new Date().getTime();          ajax.open(method, url);          ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");          //顾及到发送的key、value值有很多，于是我们使用对象吧。          ajax.send("bean.name=" + cityValue);          /***************等待服务器的响应，得到服务器返回的数据************************/          ajax.onreadystatechange = function () {              if(ajax.readyState==4) {                  if(ajax.status==200) {                      var jsonJava = ajax.responseText;                      var json = eval("(" + jsonJava + ")");                      //得到每个地区的值                      for(var i=0;i<json.area.length;i++) {                          var area = json.area[i];                          //动态创建option控件                          var option = document.createElement("option");                          option.innerHTML = area;                          areaSelect.appendChild(option);                      }                  }              }          }      };  };</script>
    <script type="text/javascript">   document.getElementById("cityId").onchange = function () {       //清空值       var areaSelect = document.getElementById("areaId");       areaSelect.options.length = 1;       //得到选择选中的下拉框的值       var cityValue = this.options[this.selectedIndex].innerHTML;       if(cityValue!="请选择城市"){           var ajax = createAJAX();           var method = "post";           var url = "${pageContext.request.contextPath}/province_findAreaByCity?time=" + new Date().getTime();           ajax.open(method, url);           ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");           //顾及到发送的key、value值有很多，于是我们使用对象吧。           ajax.send("bean.name=" + cityValue);           /***************等待服务器的响应，得到服务器返回的数据************************/           ajax.onreadystatechange = function () {               if(ajax.readyState==4) {                   if(ajax.status==200) {                       var jsonJava = ajax.responseText;                       var json = eval("(" + jsonJava + ")");                       //得到每个地区的值                       for(var i=0;i<json.area.length;i++) {                           var area = json.area[i];                           //动态创建option控件                           var option = document.createElement("option");                           option.innerHTML = area;                           areaSelect.appendChild(option);                       }                   }               }           }       };   }; </script>

## 9.6Action页面 ##

public String findAreaByCity() throws Exception {    if ("广州".equals(bean.getName())) {        area.add("白云区");        area.add("黄浦区");        area.add("萝岗区");    } else if ("珠海".equals(bean.getName())) {        area.add("香江");        area.add("拱北");        area.add("EE");        area.add("xx");    } else {        System.out.println("没有你选择的地区");    }    return "ok";}
    
        if ("广州".equals(bean.getName())) {
        
            area.add("白云区");
            area.add("黄浦区");
            area.add("萝岗区");
        } else if ("珠海".equals(bean.getName())) {
        
            area.add("香江");
            area.add("拱北");
            area.add("EE");
            area.add("xx");
        } else {
        
            System.out.println("没有你选择的地区");
    
        }
        return "ok";
    }

## 9.7最终效果： ##

![640?wx\_fmt=gif][640_wx_fmt_gif 3] 这里写图片描述

## 9.8总结 ##

这次使用的是JSON作为数据载体与服务器进行交互，和XML本质上是没有区别的。

**只不过JSON是更加轻量级文本数据，在JavaScript能够方便地获取返回的数据**

--------------------

# 十、总结图 #

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 4] 这里写图片描述

## 最后 ##

##  ##

> 乐于输出**干货**的Java技术公众号：Java3y。公众号内有200多篇**原创**技术文章、海量视频资源、精美脑图，不妨来**关注**一下！

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 5]

有帮助？在看！转发！ ![640][]

[640_wx_fmt_png]: /images/20210827/50583c67c1fa450f9c0b5472df1470d6.png?wx_fmt=png
[640_wx_fmt_jpeg]: /images/20210827/53ebb560718e432c9598be27fed2c97c.png?wx_fmt=jpeg
[640_wx_fmt_jpeg 1]: /images/20210827/31e73002441b4ec0a777705e3caa230d.png?wx_fmt=jpeg
[640_wx_fmt_jpeg 2]: /images/20210827/06e43bcdb1244cc3a6b360c75cec73c0.png?wx_fmt=jpeg
[640_wx_fmt_gif]: /images/20210827/9ca8c53205204906a1fe5e025c285440.png?wx_fmt=gif
[640_wx_fmt_png 1]: /images/20210827/2b95b2ab9dd14d4db85c4f390d06908a.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210827/93b28f0dd306437dbc0547239f06b5a7.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210827/dad5b5eabff14aa7bdc1d8e561192747.png?wx_fmt=png
[640_wx_fmt_jpeg 3]: /images/20210827/c3e260067ab64c28a841213fc20da731.png?wx_fmt=jpeg
[640_wx_fmt_gif 1]: /images/20210827/d5c4c5ef647544d883b72f7a7c1710ce.png?wx_fmt=gif
[640_wx_fmt_png 4]: /images/20210827/b6b67b2086a4473e8839e40d56e1a209.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210827/fb1247c4528e4b009d458d0425435763.png?wx_fmt=png
[640_wx_fmt_gif 2]: /images/20210827/2fe8c7394d274c0c97eb29a84ec5ff90.png?wx_fmt=gif
[640_wx_fmt_gif 3]: /images/20210827/996d4ca7a3b341d9ad5493a238d99e9f.png?wx_fmt=gif
[640_wx_fmt_jpeg 4]: /images/20210827/f99f3eb7690947c99cbb6470bdf0da83.png?wx_fmt=jpeg
[640_wx_fmt_jpeg 5]: /images/20210827/ca4c4a0e8b60437fa7ebe050d84eebf9.png?wx_fmt=jpeg
[640]: /images/20210827/ef4e89a78c23468d8fe126ebdf3c28f7.png