ajax实例2

来源：互联网发布：vscode 自动补全编辑：程序博客网时间：2024/05/16 15:53

二、用户名校验服务器返回XML数据的Ajax实例

1.register.html。

Html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户名校验ajax-xml实例</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="register.js"></script>
</head>
<body>
用户名： <br/>
<input type="text" id="userName" onkeypress="checkUsername(event)"/>
<input type="button" value="定位文本框，按Enter校验"/>
<span id="result"></span>
</body>
</html>

2.JS代码(register.js)

Js代码

//创建AJAX引擎
var xmlhttp;
function createXmlhttp () {
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) {
//针对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){
}
}
}
}
//向servlet发送请求内容
function sendRequest ( url, content ) {
createXmlhttp ();
xmlhttp.onreadystatechange = processResponse; //回调方法，注意没有()
xmlhttp.open( "post",url,true );
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send(content);
}
//处理返回XML
function processResponse() {
if ( xmlhttp.readyState == 4 ) {
if ( xmlhttp.status == 200 || xmlhttp.status==0) {
//调用xml的解析方法
parserXML();
}
}
}
//解析xml
function parserXML() {
var xmldoc = xmlhttp.responseXML.documentElement;
//xml内容：<root><message>true</message></root>，在有的情况下<message>有多个
//dom中利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组
var message_nodes = xmldoc.getElementsByTagName( "message" );
//获取message节点中的文本内容
//message标签中的文本在dom中是message标签所对应的元素节点的字节点，firstChild可以获取到当前节点的第一个子节点
//通过以下方式就可以获取到文本内容所对应的节点
var textNode = message_nodes[0].firstChild;
//对于文本节点来说，可以通过nodeValue/data的方式返回文本节点的文本内容
var hasUser_txt = textNode.data;
var respname_obj = window.document.getElementById("result");
var font_obj=window.document.createElement("font"); //创建字体dom元素
var result_obj;
respname_obj.value="";
if ( hasUser_txt=="false" ) {
//创建文本节点
result_obj=window.document.createTextNode("恭喜您！该用户名未被注册！");
font_obj.appendChild(result_obj);
font_obj.setAttribute("color","green"); //设置字体属性
}else {
result_obj=window.document.createTextNode("对不起！该用户名已被注册过了！");
font_obj.appendChild(result_obj);
font_obj.setAttribute("color","red"); //设置字体属性
}
respname_obj.appendChild(font_obj);
}
//用来清空提示错误留下来的信息
function clearErrorResp(response_obj ) {
//取得父对象的子节点的个数
var size = response_obj.childNodes.length;
//从后往前，删除每个子节点
for( var i=size-1; i>=0; --i){
response_obj.removeChild(response_obj.childNodes[i]);
}
}
//检查用户名信息
function checkUsername(evt) {
var userName_obj = window.document.getElementById("userName");
var userName = userName_obj.value;
var response_obj = window.document.getElementById("result");
//是否按ENTER键
if ( evt.keyCode==13 ) {
//判断用户名是否为空
if ( userName.length > 0) {
//用来清空上一次提示错误留下来的信息
response_obj.innerHTML="";
//clearErrorResp(response_obj);
var url = "xmlCheckUsername";
var content = "userName=" + userName;
//调用Ajax请求方法
sendRequest( url, content );
} else {
//用来清空上一次提示错误留下来的信息
clearErrorResp(response_obj);
//设置元素节点中的html内容
response_obj.innerHTML="用户名不能为空！请输入用户名！";
//让光标停在用户名文本框中
userName_obj.focus();
return false;
}
}

}

3.Servlet代码(RegisterCheckUsername.java)：

Java代码

package com.ajax;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @author Seany
* <p>
* 类功能:注册账号时，异步校验用户名是否已存在
* </p>
*/
public class RegisterCheckUsername extends HttpServlet {
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
// 服务器响应内容格式为xml
response.setContentType("text/xml");
response.setCharacterEncoding("utf-8");
String userName = request.getParameter("userName");
// 真实开发中为业务层从数据库中获取数据
String userInfo = "hello".equals(userName) ? userName : null;
boolean isExist = false;
if (userInfo == null) {
isExist = false;// "该用户名未被注册！";
} else {
isExist = true; // "该用户名已被注册过了！";
}
PrintWriter out = null;
try {
out = response.getWriter();
out.print("<root>");
out.print("<message>");
out.print(isExist);
out.print("</message>");
out.print("</root>");
} catch (Exception e) {
e.printStackTrace();
} finally {
out.flush();
out.close();
}
}
}

4. web.xml

Xml代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>RCheckUsername</servlet-name>
<servlet-class>com.ajax.RegisterCheckUsername</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>RCheckUsername</servlet-name>
<url-pattern>/xmlCheckUsername</url-pattern>
</servlet-mapping>
</web-app>