利用XMLHttpRequest对象接受与处理XML数据
1.新建一个html文件。
?2.创建服务器端servlet程序
?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、IE8xmlhttp = 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
