标签:
Servlet
package org.zln.ajax.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; /** * Created by coolkid on 2015/6/7 0007. */ public class AjaxServer extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try{ /*使用xml处理*/ response.setContentType("text/xml;charset=UTF-8"); request.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); //取参数信息 String name = request.getParameter("name"); //输入校验 StringBuilder stringBuilder = new StringBuilder(); stringBuilder.append("<message>"); if(name == null || name.length() == 0){ stringBuilder.append("用户名不能为空").append("</message>"); } else{ //逻辑校验与业务处理 if(name.equals("wangxingkui")){ stringBuilder.append("用户名[" + name + "]已经存在,请使用其他用户名").append("</message>"); } else{ stringBuilder.append("用户名[" + name + "]尚未存在,可以使用该用户名注册").append("</message>"); } out.println(stringBuilder.toString()); } /*这些发往HTML的数据会被ajax的回调函数处理*/ out.println("<br/><a href=\"ajax.html\">返回校验页面</a>"); } catch(Exception e){ e.printStackTrace(); } //返回更新数据(而不是跳转到新的视图) } }
js
/** * Created by coolkid on 2015/6/7 0007. */ var xmlHttp = null; function verifyNew(id) { /*获取待打算数据*/ var username = document.getElementById(id).value; /*创建XMLHttpRequest对象*/ if (window.XMLHttpRequest) { /*针对FireFox Mozillar Opera Safair IE7+*/ xmlHttp = new XMLHttpRequest(); /*针对某些版本的Mozillar浏览器的bug修正*/ if (xmlHttp.overrideMimeType) { xmlHttp.overrideMimeType(‘text/xml‘); } } else if (window.ActiveXObject) { /*针对IE6 IE5.5 IE5*/ var activexName = [ ‘MSXML2.XMLHTTP‘, ‘Microsoft.XMLHTTP‘ ]; for (var i = 0; i < activexName.length; i++) { try { /*取出一个空间名进行创建,如果创建成功,就终止循环*/ xmlHttp = new ActiveXObject(activexName[i]); break; } catch (e) { } } } if (!xmlHttp) { alert(‘XMLHttpRequest对象创建失败‘); } else { /*注册回调函数*/ xmlHttp.onreadystatechange = callback; /*设置连接 true表示异步交互 */ xmlHttp.open(‘GET‘, ‘/Lesson5_AJAX_Demo1/AjaxServletDo.do?name=‘ + username, true); /*如果采用POST的方式,需要自己设置请求头*/ /* xmlHttp.open("POST","/Lesson5_AJAX_Demo1/AjaxServletDo.do"+username,true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("name="+username); */ /*发送数据*/ xmlHttp.send(null); /*因为发送的数据已经在url中,所以这里的发送数据参数设置为null*/ } } function callback() { if (xmlHttp.readyState == 4) { /*交互完成*/ //判断http的交互是否成功 if (xmlHttp.status == 200) { //使用responseXML的方式来接收XML数据对象的DOM对象 var domObj = xmlHttp.responseXML; if (domObj) { //<message>123123123</message> //dom中利用getElementsByTagName可以根据标签名来获取元素节点,返回的是一个数组 var messageNodes = domObj.getElementsByTagName(‘message‘); if (messageNodes.length > 0) { //获取message节点中的文本内容 //message标签中的文本在dom中是message标签所对应的元素节点的字节点,firstChild可以获取到当前节点的第一个子节点 //通过以下方式就可以获取到文本内容所对应的节点 var textNode = messageNodes[0].firstChild; //对于文本节点来说,可以通过nodeValue的方式返回文本节点的文本内容 var responseMessage = textNode.nodeValue; //将数据显示在页面上 //通过dom的方式找到div标签所对应的元素节点 var divNode = document.getElementById(‘result‘); //设置元素节点中的html内容 divNode.innerHTML = responseMessage; } else { alert(‘XML数据格式错误,原始文本内容为:‘ + xmlHttp.responseText); } } else { alert(‘XML数据格式错误,原始文本内容为:‘ + xmlHttp.responseText); } } else { alert(‘出错了!!!‘); } } }
标签:
原文地址:http://www.cnblogs.com/sherrykid/p/4574465.html