AJAX.Demo

2017-12-06 11:36:51来源:CSDN作者:lwzhang1101人点击

分享

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;
}
}
}
}

<%@ 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='/AServlet'/>", true);           /*           3. 发送请求           */           xmlHttp.send(null);//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>
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");           }     }
<%@ 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 userEle = document.getElementById("usernameEle");     userEle.onblur = function() {           //1.得到异步对象           var xmlHttp = createXMLHttpRequest();           //2.打开连接           xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet'/>", true);           //3.设置请求头:Content-Type           xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");           //4.发送请求,给出请求体           xmlHttp.send("username=" + userEle.value);           //5.给xmlHttp的onreadystatechange事件注册监听           xmlHttp.onreadystatechange = function() {                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断                     //获取服务器的响应,判断是否为1                     // 是:获取span,添加内容:“用户名已被注册”                     var text = xmlHttp.responseText;                     var span = document.getElementById("errorSpan");                     if(text == "1") {                           //得到span元素                           span.innerHTML = "用户名已被注册!";                     } else {                           span.innerHTML = "";                     }                }           };     };};</script>  </head>  <body><h1>演示用户名是否被注册</h1><form action="" method="post">用户名:<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>密 码:<input type="password" name="password"/><br/><input type="submit" value="注册"/></form></body>


响应内容为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”>
这里写图片描述

功能介绍
这里写图片描述

select.jsp

<h1>省市联动</h1>省:<select name="province" id="province">    <option>===请选择===</option></select>市:<select name="city" id="city">    <option>===请选择===</option></select>

当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”>中。
这里写图片描述

// 本函数在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]);//删除子元素    }}

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台