利用XMLHttpRequest对象接受与处置XML数据
利用XMLHttpRequest对象接受与处理XML数据
1.新建一个html文件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ajaxxml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/verifyxml.js"></script> </head> <body> <h3> 用户名输入校验的例子 </h3> <input name="username" type="text" id="username"> <br> <input type="button" value="检验" onclick="verify()"> <div id="result"></div> </body> </html>
2.创建服务器端servlet程序
package com.zchen.ajax.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; //返回XML数据 public class AJAXXMLServlet extends HttpServlet { private static final long serialVersionUID = 3611240119854641367L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { //修改点1:响应的Content-Type必须是text/xml response.setContentType("text/xml;charset=utf-8"); PrintWriter out = response.getWriter(); String old = request.getParameter("name"); //修改点2:返回数据需要拼装成xml格式 StringBuilder builder = new StringBuilder(); builder.append("<message>"); if (old == null || old.length() == 0) { out.println("用户名不能为空"); } else { String name = new String(old.getBytes("ISO-8859-1"), "UTF-8"); if (name.equals("chenzhen")) { builder.append("用户名[" + name + "]已经存在。").append("</message>"); } else { builder.append("用户名[" + name + "]尚未存在。").append("</message>"); } out.println(builder.toString()); } } catch (Exception e) { e.printStackTrace(); } } }
3.将servlet映射配置到web.xml文件中。
4.新建客户端js文件
//用户名校验的方法 //这个方法是用XMLHTTPRequest对象来进行AJAX的异步数据交互 var xmlhttp; function verify(){ //1.使用dom的方式获取文本框的值 //document.getElementById("username")是dom中获取元素节点的一种方法,一个元素节点对应HTML页面的一个标签,例如<input > //.value可以获取一个元素节点的value属性值 var username = document.getElementById("username").value; //2.创建XMLHTTPRequest对象 //这XMLHTTPRequest是对象内部使用中最复杂的一步 //需要针对IE和其他类型的游览器建立这个对象的不同使用方式 if(window.XMLHttpRequest){ //针对FireFox、Mozillar、Opera、safari、IE7、IE8 xmlhttp = new XMLHttpRequest(); if(xmlhttp.overrideMineType){ //针对某些特定版本的mozillar游览器的BUG进行修正 xmlhttp.overrideMimeType("text/html"); } }else if(window.ActiveXObject){ //针对IE6、IE5.5、IE5 //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中 //排在前面的版本较新 var activexName = ['MSXML2.XMLHTTP','Microsoft.XMLHTTP']; for(var i=0;i<activexName.length;i++){ try{ //取出一个控件名进行创建,如果创建成功就终止循环 //如果创建失败回抛出异常然后可以继续循环继续藏式创建 xmlhttp = new ActiveXObject(activexName[i]); break; }catch(e){ } } } //确认XMLHTTPRequest对象创建成功 if(!xmlhttp){ alert("XMLHTTPRequest对象创建失败!"); }else{ //alert(xmlhttp.readyState); } //3.注册回调函数 //注册回调函数时,只需要函数名不需要括号 //我们需要将函数名之策,如果加上括号就会把函数的返回值注册上这是错误的 xmlhttp.onreadystatechange = callback; //4.设置连接信息 //第一个参数表示http的请求方式,支持所有http的请求方式,只要使用get和post //第二个参数表示请求的url地址,get方式请求的参数也在url中 //第三个参数表示采用异步还是同步方式交互 true表示异步 //xmlhttp.open("GET","servlet/AJAXServer?name="+username,true); //POST方式请求的代码 xmlhttp.open("POST","servlet/AJAXXMLServlet",true); //POST方式需要自己设置http的请求头 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //POst方式发送数据 xmlhttp.send("name="+username); //5.发送数据,开始和服务器端进行交互 //同步方式下,send这句话会在服务器端数据回来后才执行完 //异步方式下,send这句话会立即完成执行 //xmlhttp.send(null); } function callback(){ //alert(xmlhttp.readyState); //6.接受响应的数据 //判断对象的状态时交互完成 //一共有5种状态,4表示完成 if(xmlhttp.readyState == 4){ //判断http的交互是否成功 200表示成功 if(xmlhttp.status == 200){ //使用responseXML的方式来接受XML数据对象的DOM对象 var domObj = xmlhttp.responseXML; if(domObj){ //<message>123456789</message>我们要获取message里面的文本信息 //dom中利用getElementByTagName可以根据标签名来获取元素的节点 var messageNode = domObj.getElementsByTagName("message"); if(messageNode.length > 0){ //获取message节点中的文本内容 //message标签中的文本在dom中是message标签所对应的元素节点的子节点,firstChild可以获取到当前节点的第一个元素 //通过以下方式就可以获得文本内容所对应的节点 var textNode = messageNode[0].firstChild; //对应文本节点来说可以通过nodeValue的方式返回文本节点的文本内容 var responseMessage = textNode.nodeValue; //将数据显示在页面上 //通过dom的方式找到div标签所对应的元素的节点 var divNode = document.getElementById("result"); //设置元素节点中的html内容 divNode.innerHTML = responseMessage; }else{ alert("XML数据格式错误,原始文本内容为:"+xmlhttp.responseMessage); } } }else{ alert("出错了"); } } }
5.测试okay