<script type="text/javascript" src="jslib/verifyxml.js"></script>
<body>
我的用户名AJAX校验<br>
用户名:<input id="userName" type="text"></input><br>
<input type="button" value="提交" οnclick="verify()"></input>
<div id="result">
</body>
js代码:verifyxml.js
var xmlhttp;
function verify(){
//1.使用dom的方式获取文本框中的值
//document.getElementBuId("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();
//针对某些特定版本的mozillar浏览器的bug修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml")
}
}
else if(window.ActiveXObject){
//微软早期ie版本都用ActiveXObject控件
//针对IE5,IE5.5,IE6(IE7,IE8)
//两个可以用于创建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);
//注册回调函数...
xmlhttp.onreadystatechange = callback;
//get方法
//xmlhttp.open("GET","/AjaxMy/servlet/AjaxServlet?name="+userName,true);
//xmlhttp.send(null);
//post方法
xmlhttp.open("POST","/AjaxMy/servlet/AjaxXmlServlet",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("name="+userName);
}
function callback(){
alert(xmlhttp.readyState);
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
//使用responseXML接收xml数据的dom对象
var domObj = xmlhttp.responseXML;
if(domObj){
//解析xml数据
var messageNodes = domObj.getElementsByTagName("message");
//判断messageNodes是否有节点
if(messageNodes.length>0){
//获取message节点中的文本内容
//message标签中的文本在dom中是message标签对应的元素的子节点,firstChild可以获取到当前节点的第一个子节点
//通过以下方式就可以获得到文本内容所以对应的节点
//文本也是一个节点
var textNode = messageNodes[0].firstChild;
//对于文本节点来说,可以通过nodeValue的方式返回文本节点的文本内容
var textNodeMessage = textNode.nodeValue;
//传回的数据显示在页面上
//通过dom方式找到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = textNodeMessage;
}else {
alert("XML数据格式错误,原始文本内容为:"+xmlhttp.responseText);
}
}else{
alert("XML数据格式错误,原始文本内容为:"+xmlhttp.responseText);
}
}
else alert("rong");
}
}
servlet代码:
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//响应的Content-Type为text/xml;
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
//返回的数据要拼成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
//检查用户名
if(old==null || old.length()==0){
builder.append("用户名为空").append("</message>");
}
else {
if(old.equals("qzy")){
builder.append("用户名["+old+"]已经存在,请用他名").append("</message>");
}else
{
builder.append("用户名["+old+"]未存在,可以使用").append("</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
}
把提交方法改成post提交时,出现了插曲,总结如下:思维真的是短路,昨天在页面中把DOGET方法提交改成DOPOST提交,却发现从SERVLET中传回来的数据不是自己想要的,是一道不知名的数据,很纳闷:这是为什么呢?SERVLET中DEBUG,页面中DEBUG还是无济于事,只能认栽了.早上起来,稍看下日语,开始做事,偶然间发现,自己在SERVLET忘记了DOPOST方法的提交,事情如此突然,不得让我惊叹.很奇怪,在页面改变提交方法时,为什么没有想到在SERVLET中也要添加DOPOST响应呢?而在追踪的时候为什么又没有想到呢?在出现问题DEBUG时想到的解决方法就是:SERVLET是不是传错了?(断点是设在DOGET响应中的),哎,这年头,思路怎么短成这样子了……………………………………………………………………………………………………………………………………………………
……………………………………………………….