AJAX.Demo

墨蓝 2022-06-04 05:56 181阅读 0赞

#### **ajax发送异步请求（四步操作）** ####

**XMLHttpRequest**  
\*ajax其实只需要学习一个对象：XMLHttpRequest，如果掌握了它，就掌握了ajax！！！  
\*得到XMLHttpRequest  
< 大多数浏览器都支持：var xmlHttp = new XMLHttpRequest();  
< IE6.0：var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);  
< IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

**\*编写创建XMLHttpRequest对象的函数**  
function createXMLHttpRequest() \{  
try \{  
return new XMLHttpRequest();.  
\} catch(e) \{  
try \{  
return new ActiveXObject(“Msxml2.XMLHTTP”);  
\} catch(e) \{  
try \{  
return new ActiveXObject(“Microsoft.XMLHTTP”);  
\} catch(e) \{  
alert(“哥们儿，你用的是什么浏览器啊？”);  
throw e;  
\}  
\}  
\}  
\}

public void doGet(HttpServletRequest request, HttpServletResponse response)
                    throws ServletException, IOException {
               System.out.println("Hello AJAX!");
               response.getWriter().print("Hello AJAX!!!");
         }

#### **发送POST请求(如果发送请求时需要带有参数，一般都用POST请求)** ####

\*open：xmlHttp.open(“POST” ….);

\*添加一步：设置Content-Type请求头：  
< xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

\*send: xmlHttp.send(“username=zhangSan&password=123”);//发送请求时指定请求体

public void doPost(HttpServletRequest request, HttpServletResponse response)
                    throws ServletException, IOException {
               response.setContentType("text/html;charset=utf-8");
               request.setCharacterEncoding("UTF-8");
    
               String username = request.getParameter("username");//获取请求参数
               System.out.println("(POST：) Hello AJAX!" + username);
               response.getWriter().print("(POST：) Hello AJAX!!!" + username);
         }

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"; %>
    
    <script type="text/javascript">
    // 创建异步对象
    function createXMLHttpRequest() {
         try {
               return new XMLHttpRequest();//大多数浏览器
         } catch (e) {
               try {
                    return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
               } catch (e) {
                    try {
                         return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 
                    } catch (e) {
                         alert("哥们儿，您用的是什么浏览器啊？");
                         throw e;
                    }
               }
         }
    }
    window.onload = function() {
       //文档加载完毕后执行
         var btn = document.getElementById("btn");
         btn.onclick = function() {
       //给按钮的点击事件注册监听
               /* ajax四步操作，得到服务器的响应 把响应结果显示到h1元素中 */
               /* 1. 得到异步对象 */
               var xmlHttp = createXMLHttpRequest();
               /* 2. 打开与服务器的连接 * 指定请求方式 * 指定请求的URL * 指定是否为异步请求 */
               /************修改open方法，指定请求方式为POST**************/
               xmlHttp.open("POSt", "<c:url value='/AServlet'/>", true);
               /************设置请求头：Content-Type************/
               xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
               /* 3. 发送请求 */
               /**********发送时指定请求体***********/
               xmlHttp.send("username=张三&password=123");//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！
               /* 4. 给异步对象的onreadystatechange事件注册监听器 */
               xmlHttp.onreadystatechange = function() {
       //当xmlHttp的状态发生变化时执行
                    // 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功）
                    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                         // 获取服务器的响应结束
                         var text = xmlHttp.responseText;
                         // 获取h1元素
                         var h1 = document.getElementById("h1");
                         h1.innerHTML = text;
                    }
               };
         };
    };
    </script>
      </head>
      <body>
    <button id="btn">点击这里</button>
    <h1 id="h1"></h1>
      </body>

#### **注册表单之校验用户是否注册！** ####

**1. 编写页面：**  
\*ajax3.jsp  
< 给出注册表单页面  
< 给用户名文本框添加onblur事件的监听  
<获取文本框的内容，通过ajax4步发送给服务器，得到响应结果  
\*如果为1：在文本框后显示“用户名已被注册”  
\*如果为0：什么都不做！  
**2. 编写Servlet**  
\*ValidateUsernameServlet  
< 获取客户端传递的用户名参数  
< 判断是否为itcast  
\*是：返回1  
\*否：返回0

public void doPost(HttpServletRequest request, HttpServletResponse response)
                    throws ServletException, IOException {
               request.setCharacterEncoding("utf-8");
               response.setContentType("text/html;charset=utf-8");
    
               /*
                * 1. 获取参数username
                * 2. 判断是否为itcast
                *   3. 如果是：响应1
                *   4. 如果不是：响应0
                */
               String username = request.getParameter("username");
               if(username.equalsIgnoreCase("itcast")) {
                    response.getWriter().print("1");
               } else {
                    response.getWriter().print("0");
               }
         }

#### **响应内容为xml数据** ####

**\*服务器端：**  
< 设置响应头：**ContentType**，其值为：text/xml;charset=utf-8  
**\*客户端：**  
< var doc = **xmlHttp.responseXML;**//得到的是Document对象！

public void doGet(HttpServletRequest request, HttpServletResponse response)
                    throws ServletException, IOException {
               String xml = "<students>" +
                    "<student number='ITCAST_1001'>" +
                    "<name>zhangSan</name>" +
                    "<age>18</age>" +
                    "<sex>male</sex>" +
                    "</student>" +
                    "</students>";
    
               response.setContentType("text/xml;charset=utf-8");
               response.getWriter().print(xml);
         }

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"; %>
    
    <script type="text/javascript"> // 创建异步对象 function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch (e) { try { return ActvieXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 } catch (e) { alert("哥们儿，您用的是什么浏览器啊？"); throw e; } } } } window.onload = function() { //文档加载完毕后执行 var btn = document.getElementById("btn"); btn.onclick = function() { //给按钮的点击事件注册监听 /* ajax四步操作，得到服务器的响应 把响应结果显示到h1元素中 */ /* 1. 得到异步对象 */ var xmlHttp = createXMLHttpRequest(); /* 2. 打开与服务器的连接 * 指定请求方式 * 指定请求的URL * 指定是否为异步请求 */ xmlHttp.open("GET", "<c:url value='/BServlet'/>", true); /* 3. 发送请求 */ xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！ /* 4. 给异步对象的onreadystatechange事件注册监听器 */ xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发生变化时执行 // 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功） if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { // 获取服务器的响应结果（xml） var doc = xmlHttp.responseXML; // 查询文档下名为student的所有元素，得到数组，再取下标0元素 var ele = doc.getElementsByTagName("student")[0]; var number = ele.getAttribute("number");//获取元素名为number的属性值 var name; var age; var sex; // 处理浏览器的差异，window.addEventListener如果为true就不是IE if(window.addEventListener) { name = ele.getElementsByTagName("name")[0].textContent;//其他浏览器 } else { name = ele.getElementsByTagName("name")[0].text;//IE支持 } if(window.addEventListener) { age = ele.getElementsByTagName("age")[0].textContent;//其他浏览器 } else { age = ele.getElementsByTagName("age")[0].text;//IE支持 } if(window.addEventListener) { sex = ele.getElementsByTagName("sex")[0].textContent;//其他浏览器 } else { sex = ele.getElementsByTagName("sex")[0].text;//IE支持 } var text = number + ", " + name + ", " + age + ", " + sex; document.getElementById("h1").innerHTML = text; } }; }; }; </script>
      </head>
    
      <body>
    <button id="btn">点击这里</button>
    <h1 id="h1"></h1>
    </body>

#### **省市联动** ####

**1. 页面**  
<select name=”province”>  
<option>===请选择省份===</option>  
</select>  
<select name=”city”>  
<option>===请选择城市===</option>  
</select>

**2. ProvinceServlet**  
\* ProvinceServlet：当页面加载完毕后马上请求这个Servlet！  
<它需要加载china.xml文件，把所有的省的名称使用字符串发送给客户端！

**3. 页面的工作**  
\*获取这个字符串，使用逗号分隔，得到数组  
\*循环遍历每个字符串（省份的名称），使用每个字符串创建一个<option>元素添加到<select name=”province”>这个元素中

**4. CityServlet**  
\*CityServlet：当页面选择某个省时，发送请求！  
\*得到省份的名称，加载china.xml文件，查询出该省份对应的元素对象！，把这个元素转换成xml字符串，发送给客户端

**5. 页面的工作**  
\* 把<select name=”city”>中的所有子元素删除，但不要删除<option>===请选择城市===</option>  
\*得到服务器的响应结果：doc！！！  
\*获取所有的<city>子元素，循环遍历，得到<city>的内容  
\*使用每个<city>的内容创建一个<option>元素，添加到<select name=”city”>  
![这里写图片描述][SouthEast]

**功能介绍**  
![这里写图片描述][SouthEast 1]

**select.jsp**

当select.jsp页面打开时，向服务器发送异步请求，得到所有省份的名称（文本数据）。然后使用每个省份名称创建，添加到中。  
并且为元素添加onchange事件监听。当选择的省份发生变化时，再向服务器发送异常请求，得到当前选中的省份下所有城市（XML数据）。然后客户端解析XML文档，使用每个城市名称创建，添加到元素中。

**代码实现**  
服务器端：使用china.xml保存所有省份和城市名称：  
china.xml

<?xml version="1.0" encoding="utf-8"?>
    <china>
        <province name="北京">
           <city>东城区</city>
           <city>西城区</city>
            ……
        </province>
        <province name="天津">
           <city>和平区</city>
           <city>河东区</city>
            ……
        </province>
        <province name="河北">
           <city>石家庄</city>
           <city>衡水</city>
            ……
        </province>
    ……
    </china>

\*ProvinceServlet：负责把所有省份名称响应给客户端，这需要使用dom4j解析china.xml，得到所有元素的name属性值，连接成一个字符串发送给客户端；  
\*CityServlet：负责得到某个省份元素，然后以字符串形式发送给客户端；

**ProvinceServlet.java**

public class ProvinceServlet extends HttpServlet { 
        public void doGet(HttpServletRequest request, HttpServletResponse response)
               throws ServletException, IOException {
           // 注意设置编码
           response.setContentType("text/html;charset=utf-8");
    
           // 使用DOM4J解析xml文档
           InputStream input = this.getClass().getClassLoader().getResourceAsStream("china.xml");
           SAXReader reader = new SAXReader();
           try {
               Document doc = reader.read(input);
               // xpath查询所有province元素的name属性
               List<Attribute> provinceNameAttributeList = doc.selectNodes("//province/@name");
               // 用来装载所有name属性值
               List<String> provinceNames = new ArrayList<String>();
               // 遍历每个属性，获取属性名称，添加到list中
               for(Attribute proAttr : provinceNameAttributeList) {
                  provinceNames.add(proAttr.getValue());
               }
    // System.out.println(provinceNames);
               // 把list转换成字符串
               String str = provinceNames.toString();
               // 把字符串前后中的[]去除发送给客户端
               response.getWriter().print(str.substring(1, str.length()-1));
           } catch (DocumentException e) {
               throw new RuntimeException(e);
           }
        }
    }

**CityServlet.java**

public class CityServlet extends HttpServlet { 
        public void doPost(HttpServletRequest request, HttpServletResponse response)
               throws ServletException, IOException {
           request.setCharacterEncoding("utf-8");
           // 注意，这里内容类型必须是text/xml，不然客户端得到的就不是xml文档对象，而是字符串了。
           response.setContentType("text/xml;charset=utf-8");
           // 获取省份参数
           String provinceName = request.getParameter("provinceName");
    
           InputStream input = this.getClass().getClassLoader().getResourceAsStream("china.xml");
           SAXReader reader = new SAXReader();
           try {
               Document doc = reader.read(input);
               // 查询指定省份名称的<province>元素
               Element provinceElement = (Element)doc.selectSingleNode("//province[@name='" + provinceName + "']");
    // System.out.println(provinceElement.asXML());
               // 把元素转换成字符串发送给客户端
               response.getWriter().print(provinceElement.asXML());
           } catch (Exception e) {
               throw new RuntimeException(e);
           }
        }
    }

**客户端：**

\*在打开select.jsp页面时就向服务器请求所有省份的名称，添加到<select name=”province”>元素中。  
\*给<select name=”province”>元素添加onchange事件监听，内容为向服务器发送请求，得到XML文档：<province>元素，然后解析它，添加到<select name=”city”>中。  
![这里写图片描述][SouthEast 2]

// 本函数在province的<select>元素发送变化时执行！
    // 本函数会使用当前选中的省份名称为参数，向服务器发送请求，获取当前省份下的所有城市！
    function loadCities() { 
        var proName = this.value;//获取<select>选择的省份名称
        /* AJAX4步 */
        var xmlHttp = createXMLHttpRequest();//创建异常对象
        // 指定回调函数
        xmlHttp.onreadystatechange = function() { 
           if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
               // 得到服务器响应的xml文档对象
               var doc = xmlHttp.responseXML;//注意，这里使用的是resopnseXML属性，不是resopnseText
               // 获取文档中所有city元素
               var cityElementList = doc.getElementsByTagName("city");
               // 获取html元素：city的<select>
               var citySelect = document.getElementById("city");
               // 删除city的<select>元素的所有子元素
               removeChildNodes(citySelect);
    
               // 创建<option>元素，指定文本内容为“请选择”
               var qxzOption = document.createElement("option");
               var textNode = document.createTextNode("===请选择===");
               qxzOption.appendChild(textNode);
               // 把"请选择"这个<option>添加到<select>元素中
               citySelect.appendChild(qxzOption);
    
               // 循环遍历每个服务器端响应的每个<city>元素
               for(var i = 0; i < cityElementList.length; i++) {
                  var cityEle = cityElementList[i];
                  var cityName = null;
                  // 获取<city>元素的文本内容！处理浏览器差异！
                  if(window.addEventListener) {
                      cityName = cityEle.textContent;
                  } else {
                      cityName = cityEle.text;
                  }
                  // 使用城市名称创建<option>，并添加到<select>元素中
                  addCityOption(cityName);
               }
           }
        };
        xmlHttp.open("POST", "/ajaxdemo1/CityServlet", true);//打开与服务器的连接
        // 因为是POST请求，所以要设置Content-Type请求头
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // 参数为当前选中的省份名称
        xmlHttp.send("provinceName=" + proName);  
    }

// 使用proName创建<option>元素添加到<select>元素中
    function addProvinceOption(proName) { 
        var option = document.createElement("option");//创建<option>元素
        var textNode = document.createTextNode(proName);//使用省份名称创建文本节点
        option.appendChild(textNode);//把省份名称的文本节点添加到<option>元素中
        option.setAttribute("value", proName);//使用省份名称来设置<option>元素的value属性
        document.getElementById("province").appendChild(option);//把<option>元素添加到<select>元素中　
    }

// 本函数用来创建城市的<option>，并添加到<select>元素中
    function addCityOption(cityName) { 
        var citySelect = document.getElementById("city");//获取id为city的<select>
        var cityOption = document.createElement("option");//创建<option>元素
        var textNode = document.createTextNode(cityName);//使用城市名称创建文本节点
        cityOption.appendChild(textNode);//把文本节点添加到<option>元素中
        cityOption.setAttribute("value", cityName);//设置<option>元素的value属性为城市名称
        citySelect.appendChild(cityOption);//把<option>元素添加到<select>元素中
    }

//删除指定元素的所有子元素
    function removeChildNodes(ele) { 
        var nodes = ele.childNodes;//获取当前元素的所有子元素集合
        while(nodes.length > 0) {
       //遍历所有子元素
           ele.removeChild(nodes[0]);//删除子元素
        }
    }

[SouthEast]: /images/20220604/3237f4f0b37d4882a89db66ca1aa2f13.png
[SouthEast 1]: /images/20220604/67278e37c251455c834966a0598f9311.png
[SouthEast 2]: /images/20220604/8bff5c7a88e94bb9be29ae4f811b9bf7.png

AJAX.Demo

发表评论取消回复

还没有评论，来说两句吧...

相关阅读