J2EE进阶之ajax和JSon使用二十三

矫情吗；* 2024-02-18 15:05 15阅读 0赞

## **ajax和JSon使用** ##

### 一、AJAX是什么？ ###

*  1、Asynchronous JavaScript And XML指异步 JavaScript 及 XML
 *  2、不是编程语言，而是老技术（JS、HTML、XML和CSS）的新用法
 *  3、出现的意义：用于创建更好更快以及交互性更强的 Web 应用程序的技术

### 二、同步 VS 异步？ ###

#### 1：同步开发流程图 ####

![F5EopK1.png][]

#### 2：异步开发流程图 ####

![Zin1cAN.png][]

### 3;ajxa交互模型 ###

![MWUq0y0.png][]

### 三、JS对象XmlHttpRequest(重点) ###

#### 1、如何获取该对象（从W3CSchool中拷贝） ####

![KbmATMJ.png][]

会看到如下代码：

<html>
    <body>
    
    <script type="text/javascript">
    
    function ajaxFunction()
     {
     var xmlHttp;
    
     try
        {
       // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
        }
     catch (e)
        {
    
      // Internet Explorer
       try
          {
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }
       catch (e)
          {
    
          try
             {
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
          catch (e)
             {
             alert("您的浏览器不支持AJAX！");
             return false;
             }
          }
        }
     }
    </script>
    
    <form name="myForm">
    用户: <input type="text" name="username" />
    时间: <input type="text" name="time" />
    </form></body>
    </html>

做一个简单的工具类util.js

1 /**
      2  * 获取XMLHttpRequest对象，即AJAX引擎
      3  */
      4 function getXmlHttpRequest() {
      5     var xhr;
      6     try {
      7         // Firefox, Opera 8.0+, Safari
      8         xhr = new XMLHttpRequest();
      9     } catch (e) {
     10         // Internet Explorer
     11         try {
     12             xhr = new ActiveXObject("Msxml2.XMLHTTP");
     13         } catch (e) {
     14             try {
     15                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
     16             } catch (e) {
     17                 alert("您的浏览器不支持AJAX！");
     18                 return null;
     19             }
     20         }
     21     }
     22     return xhr;
     23 }
     24 //JavaScript的原型：prototype
     25 //string是Js中的核心对象，没有提供trim方法，替换掉首位空格
     26 //给string类对象添加一个trim方法，去掉首尾空格。每个对象都有一个属性，prototype，指向了原来的代码。
     27 String.prototype.trim=function(){
     28     return this.replace(/(^\s*)|(\s*$)/g,"");
     29 }

#### 2、该对象的属性 ####

*  readyState:short类型的，只读的。他标识着XHR这个对象的当前状态。  
    ![D1b16sk.png][]
    
        0：XHR对象还没有准备好。
        1：调用了该对象的 open方法，但是还没有send。
        2：向服务器发出了请求。
        3：收到了服务器返回的响应消息头。
        4：收到了服务器返回的响应正文。干完了。
 *  responseText：string类型的，只读的。存放了响应正文，响应正文的类型是文本类型
 *  responseXML：Document（XML DOM）类型的，只读的。存放了响应正文，响应正文的类型是XML。
 *  status：short类型的，只读的。服务器返回的响应状态码。
 *  statusText：string类型的，只读的。服务器返回的响应状态码描述。

#### 3、该对象的方法 ####

*   String getAllResponseHeaders():返回所有的响应消息头。
 *   String getResponseHeader(String headerName):得到指定的响应消息头值
 *   void open(String method,String url,boolean async):计划要访问的链接。
    
        method：请求方式。常用的GET和POST
        url：请求的地址
        async：是否是异步交互。默认是true，异步的
 *   void send(Object body):向服务器发出请求，并传递请求正文的内容
    
        body：请求正文的内容。没有传null
 *   void setRequestHeader(String name,String value):设置请求消息头。
    
        name：请求头名
        value：请求头值

#### 4、事件处理 ####

**onreadystatechange：指向一个函数。当XHR对象的readyState属性值每次发生变化，该处理器都会执行。**

### 四、编写第一个AJAX应用（记住编码步骤） ###

#### 1、向服务器发出GET请求 ####

html代码

1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="UTF-8">
      5 <title>Insert title here</title>
      6 
      7 <script type="text/javascript" src="js/util.js"></script>
      8 
      9 <script type="text/javascript">
     10     window.onload = function(){
     11         //异步发出请求，访问ServletDemo1
     12         document.getElementById("bt1").onclick = function(){
     13             //1获取xhr对象
     14             var xhr = getXmlHttpRequest();      
     15             //2；给用户友好的提示
     16             xhr.onreadystatechange = function(){
     17                 if(xhr.redayState==4){
     18                     //ajax引擎获取到服务器相应
     19                     if(xhr.status == 200){
     20                         //服务器成功进行了响应
     21                         alert("服务器已经响应成功了，快点打开控制台看看吧");
     22                     }
     23                 }
     24             }
     25             //3、建立与服务器的链接：计划要访问什么？
     26             xhr.open("GET","/ajaxdemo/ServletDemo1?time="+ new Date().getTime());
     27             //4、发出请求
     28             xhr.send(null);//null代表没有请求正文，get方式不可能有正文数据。
     29         }
     30     }
     31 
     32 </script>
     33 </head>
     34 <body>
     35     <input type="button" id="bt1" value="测试与服务器的异步交互"/>
     36 </body>
     37 </html>

Servlet就一个输出：

public class ServletDemo1 extends HttpServlet {
    
        protected void doGet(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
            System.out.println("ServletDemo1执行了");
        }

效果：

![i4xNL4w.png][]

#### 2、向服务器发出POST请求。 ####

![QwCYfKR.png][]

### 五ajax案例demo ###

#### 1：判断用户名是否可用（模仿用户注册时判断用户是否注册） ####

HTML代码

1     <script type="text/javascript" src="js/util.js"></script>
      2     
      3     <script type="text/javascript">
      4         //当用户名失去焦点时，向服务器发出异步请求，监测用户名是否存在
      5         window.onload=function(){
      6             document.getElementById("username").onblur=function(){
      7                 //得到当前用户名的值，做出判断
      8                 var username = this.value;
      9                 if(username.trim()==""){
     10                     alert("请输入用户名");
     11                     this.focus();
     12                     return;
     13                 }
     14                 //用户输入了
     15                 var xhr = getXmlHttpRequest();
     16                 xhr.onreadystatechange=function(){
     17                     //做出处理，把响应正文的内容搞到id=s1中。DOM编程
     18                     if(xhr.readyState==4){
     19                         if(xhr.status==200){
     20                             //获取服务器返回的数据
     21                             var data = xhr.responseText;
     22                             document.getElementById("s1").innerHTML=data;
     23                         }
     24                     }
     25                 }
     26                 xhr.open("POST","/ajaxdemo/ServletDemo3?time="+new Date().getTime());
     27                 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
     28                 xhr.send("username="+username);
     29             }
     30         }
     31     </script>
     32   </head>
     33   
     34   <body>
     35     <form action="" method="post">
     36         用户名：<input type="text" id="username" name="username"/><span id="s1"></span><br/>
     37         密码：<input type="password" id="password" name="password"/><br/>
     38         <input type="submit" value="注册"/>
     39     </form>
     40   </body>

servlet

1 public class ServletDemo3 extends HttpServlet {
      2 
      3     public void doGet(HttpServletRequest request, HttpServletResponse response)
      4             throws ServletException, IOException {
      5         request.setCharacterEncoding("UTF-8");//要求客户端用POST方式提交
      6         response.setContentType("text/html;charset=UTF-8");//告知客户端响应正文的MIME类型和编码
      7         String username = request.getParameter("username");
      8         PrintWriter out = response.getWriter();
      9         if(username.equals("wsj")){
     10             //用户名存在了
     11             out.write("<font color='red'>用户名已经存在了</font>");
     12         }else{
     13             //用户名可以使用
     14             out.write("<font color='green'>用户名可以使用</font>");
     15         }
     16     }

效果：

![16yIJM6.png][]

#### 2：查询所有的商品 ####

HTML

servlet

public class ServletDemo4 extends HttpServlet {
        private List<Product> products = new ArrayList<Product>();
        public void init() throws ServletException {
            products.add(new Product(1001, "打气筒", 10));
            products.add(new Product(1002, "金瓶梅", 20));
            products.add(new Product(1003, "葵花宝典", 30));
            products.add(new Product(1004, "肥皂", 40));
            products.add(new Product(1005, "卫生纸", 50));
        }
        //Servlet控制器；JSP负责显示
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            request.setAttribute("ps", products);
            request.getRequestDispatcher("/listProduct.jsp").forward(request, response);
        }

#### 3:省市二级联动 ####

这里用到了XStream

![Rhpvpe9.png][]

下载jar包后使用

HTML代码

1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <meta charset="UTF-8">
      5 <title>Insert title here</title>
      6     <script type="text/javascript" src="js/util.js"></script>
      7     
      8     <script type="text/javascript">
      9         window.onload=function(){
     10             var xmlDoc;
     11             //在页面加载完毕后，发出异步请求，得到xml数据
     12             var xhr = getXmlHttpRequest();
     13             xhr.onreadystatechange=function(){
     14                 if(xhr.readyState==4){
     15                     if(xhr.status==200){
     16                         xmlDoc = xhr.responseXML;
     17                         //XML DOM解析：取出省份
     18                         var xmlProvinces = xmlDoc.getElementsByTagName("province");
     19                         for(var i=0;i<xmlProvinces.length;i++){
     20                             var provinceName = xmlProvinces[i].getAttribute("name");
     21                             var provinceCode = xmlProvinces[i].getAttribute("code");
     22                             //给省份的下拉选择框添加元素：HTML DOM
     23                             var provinceSelect = document.getElementById("ps");
     24                             var option = new Option(provinceName,provinceCode);//<option value="37">山东</option>
     25                             provinceSelect.add(option);
     26                         }
     27                     }
     28                 }
     29             }
     30             xhr.open("GET","/ajaxdemo/ServletDemo5?time="+new Date().getTime());
     31             xhr.send(null);
     32             
     33             //给省份下拉选择添加变更事件
     34             document.getElementById("ps").onchange=function(){
     35                 var citySelect = document.getElementById("cs");
     36                 citySelect.length=1;
     37                 //根据选择的省份，显示对应的城市
     38                 var provinceCode = this.value;
     39                 //找xml文档，
     40                 var xmlProvinces = xmlDoc.getElementsByTagName("province");
     41                 for(var i=0;i<xmlProvinces.length;i++){
     42                     if(xmlProvinces[i].getAttribute("code")==provinceCode){
     43                     //在xml中找到了对应的省份
     44                         var xmlCitys = xmlProvinces[i].getElementsByTagName("city");
     45                         for(var j=0;j<xmlCitys.length;j++){
     46                             
     47                             var option = new Option(xmlCitys[j].getAttribute("name"),xmlCitys[j].getAttribute("code"));//<option value="37">山东</option>
     48                             citySelect.add(option);
     49                         }
     50                     }
     51                 }
     52             }
     53             
     54         }
     55         
     56     </script>
     57   </head>
     58   
     59   <body>
     60     <select id="ps">
     61         <option value="">--请选择--</option>
     62     </select>
     63      <select id="cs">
     64         <option value="">--请选择--</option>
     65     </select>
     66   </body>
     67 </html>

Servlet

1 package wsj;
      2 
      3 import java.io.IOException;
      4 import java.io.PrintWriter;
      5 import java.util.ArrayList;
      6 import java.util.List;
      7 
      8 import javax.servlet.ServletException;
      9 import javax.servlet.http.HttpServlet;
     10 import javax.servlet.http.HttpServletRequest;
     11 import javax.servlet.http.HttpServletResponse;
     12 
     13 
     14 
     15 
     16 import wsj.domain.City;
     17 import wsj.domain.Province;
     18 
     19 import com.thoughtworks.xstream.XStream;
     20 
     21 public class ServletDemo5 extends HttpServlet {
     22     private List<Province> provinces = new ArrayList<Province>();
     23     public void init() throws ServletException {
     24         Province sd = new Province();
     25         sd.setCode("37");
     26         sd.setName("山东省");
     27         
     28         City jn = new City();
     29         jn.setCode("0531");
     30         jn.setName("济南市");
     31         
     32         City qd = new City();
     33         qd.setCode("0532");
     34         qd.setName("青岛市");
     35         
     36         sd.getCitys().add(jn);
     37         sd.getCitys().add(qd);
     38         
     39         Province hb = new Province();
     40         hb.setCode("42");
     41         hb.setName("湖北省");
     42         
     43         City wh = new City();
     44         wh.setCode("027");
     45         wh.setName("武汉市");
     46         
     47         City jz = new City();
     48         jz.setCode("0716");
     49         jz.setName("荆州市");
     50         
     51         hb.getCitys().add(wh);
     52         hb.getCitys().add(jz);
     53         
     54         provinces.add(sd);
     55         provinces.add(hb);
     56     }
     57 
     58     public void doGet(HttpServletRequest request, HttpServletResponse response)
     59             throws ServletException, IOException {
     60         response.setContentType("text/xml;charset=UTF-8");
     61         PrintWriter out = response.getWriter();
     62         //把省份和城市以xml的形式返回给客户端
     63         /*
     64         <provinces>
     65           <province name="山东省" code="37">
     66             <city code="0531" name="济南市"/>
     67             <city code="0532" name="青岛市"/>
     68           </province>
     69           <province name="湖北省" code="42">
     70             <city code="027" name="武汉市"/>
     71             <city code="0716" name="荆州市"/>
     72           </province>
     73         </provinces>
     74          */
     75         XStream xs = new XStream();
     76         xs.alias("provinces", List.class);
     77 //      xs.alias("province", Province.class);
     78 //      xs.alias("city", City.class);
     79         xs.autodetectAnnotations(true);//自动检测相关类的注解
     80         String xml = xs.toXML(provinces);
     81         out.write(xml);
     82     }
     83 
     84     public void doPost(HttpServletRequest request, HttpServletResponse response)
     85             throws ServletException, IOException {
     86         doGet(request, response);
     87     }
     88 
     89 }

结果：

![caf1r0J.png][]

### 六Json ###

Json是一种轻量级的格式。  
有三种形式：

*  定义对象var j = \{name:”liuyou”,gender:”man”\}；
 *  定义数组 var j = \[\{name:”liuyou”,gender:”man”\},\{name:”liuyou”,gender:”man”\}\];
 *  定义含有数组的对var j = \{name:”liuyou”,gender:”man”，hobby:\[“吃饭”,”泡妞”,”打豆豆”\]\}；取值方式J.name j\[1\].name (角标从1开始)

这里用到jsonlib相关的jar包实现JSon串的返回和处理

jar包：在Apache官网和JSon官网都可以下载

![nlwkqP7.png][]

JSONDemo测试类

1 public class JSONDemo {
      2     @Test
      3     public void test1(){
      4         Product p = new Product(10001, "西门外传", 10);
      5         JSONArray  ja = JSONArray.fromObject(p);//[{"name":"西门外传","num":10001,"price":10}]
      6         System.out.println(ja);
      7     }
      8     @Test
      9     public void test2(){
     10         Product p = new Product(10001, "西门外传", 10);
     11         JSONObject  ja = JSONObject.fromObject(p);//{"name":"西门外传","num":10001,"price":10}
     12         System.out.println(ja);
     13     }
     14     @Test
     15     public void test3(){
     16         List<Product> products = new ArrayList<Product>();
     17         products.add(new Product(1001, "打气筒", 10));
     18         products.add(new Product(1002, "金瓶梅", 20));
     19         products.add(new Product(1003, "葵花宝典", 30));
     20         products.add(new Product(1004, "肥皂", 40));
     21         products.add(new Product(1005, "卫生纸", 50));
     22         JSONArray  ja = JSONArray.fromObject(products);
     23         System.out.println(ja);
     24     }
     25     //属性过滤
     26     @Test
     27     public void test4(){
     28         Product p = new Product(10001, "西门外传", 10);
     29         JsonConfig jc = new JsonConfig();
     30         jc.setExcludes(new String[]{"num","price"});
     31         JSONObject  ja = JSONObject.fromObject(p,jc);//{"name":"西门外传","price":10}
     32         System.out.println(ja);
     33     }
     34 }

改写商品列表：

HTML

1    <script type="text/javascript" src="js/util.js"></script>
      2     
      3     <script type="text/javascript">
      4         window.onload=function(){
      5             document.getElementById("a1").onclick=function(){
      6                 var xhr = getXmlHttpRequest();
      7                 xhr.onreadystatechange=function(){
      8                     if(xhr.readyState==4){
      9                         if(xhr.status==200){
     10                             var data = xhr.responseText;//JSON串当做了文本对待
     11                             //把文本转成js代码
     12                             var products = eval("("+data+")");      
     13                             //HTML DOM（挑浏览器）或XML DOM编程
     14                             for(var i=0;i<products.length;i++){
     15                                 var tr = document.getElementById("t1").insertRow();//<tr></tr>
     16                                 var td1 = tr.insertCell();//<td></td>
     17                                 td1.innerHTML=products[i].num;// <td>1001</td>
     18                                 var td2 = tr.insertCell();//<td></td>
     19                                 td2.innerHTML=products[i].name;// <td>XXX</td>
     20                                 var td3 = tr.insertCell();//<td></td>
     21                                 td3.innerHTML=products[i].price;// <td>10</td>
     22                             }   
     23                         }
     24                     }
     25                 }
     26                 xhr.open("GET","/day21_00_ajax/servlet/ServletDemo6?time="+new Date().getTime());
     27                 xhr.send(null);
     28             }
     29         }
     30     </script>
     31   </head>
     32   
     33   <body>
     34     <a id="a1" href="javascript:void(0)">显示商品信息</a>
     35     <hr/>
     36     <div id="d1">
     37         <table id="t1" border="1" width="438">
     38             <tr>
     39                 <th>编号</th>
     40                 <th>名称</th>
     41                 <th>价格</th>
     42             </tr>
     43             
     44         </table>
     45     </div>
     46   </body>

Servlet

public class ServletDemo6 extends HttpServlet {
    
        private List<Product> products = new ArrayList<Product>();
        public void init() throws ServletException {
            products.add(new Product(1001, "打气筒", 10));
            products.add(new Product(1002, "金瓶梅", 20));
            products.add(new Product(1003, "葵花宝典", 30));
            products.add(new Product(1004, "肥皂", 40));
            products.add(new Product(1005, "卫生纸", 50));
        }
        //组成JSON串打给客户端
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            response.setContentType("text/plain;charset=UTF-8");
            PrintWriter out = response.getWriter();
            JSONArray ja = JSONArray.fromObject(products);
            out.write(ja.toString());
        }

[F5EopK1.png]: https://i.imgur.com/F5EopK1.png
[Zin1cAN.png]: https://i.imgur.com/Zin1cAN.png
[MWUq0y0.png]: https://i.imgur.com/MWUq0y0.png
[KbmATMJ.png]: https://i.imgur.com/KbmATMJ.png
[D1b16sk.png]: https://i.imgur.com/D1b16sk.png
[i4xNL4w.png]: https://i.imgur.com/i4xNL4w.png
[QwCYfKR.png]: https://i.imgur.com/QwCYfKR.png
[16yIJM6.png]: https://i.imgur.com/16yIJM6.png
[Rhpvpe9.png]: https://i.imgur.com/Rhpvpe9.png
[caf1r0J.png]: https://i.imgur.com/caf1r0J.png
[nlwkqP7.png]: https://i.imgur.com/nlwkqP7.png