AJAX学习笔记----dom+servlet实现用户名验证
文件一 ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户名校验</title>
<script type="text/javascript" src="/jslib/veryfy.js"></script>
</head>
<body>
<!-- ajax不需要用表单来提交数据，可以使用。。。 -->
<!--ajax不需要name,需要一个id-->
用户名：<input type="text" id="name"/> <br/>
<input type="button" value="button" onclick="veryfy()"/>
<!--div用于服务器返回信息，初始为空-->
<!--id属性是为了dom方式寻找到该节点，进行操作-->
<!--
div,span 不会对文本进行改变
每个div会占一行，span不会
-->
<div id="result"></div>
<div >124</div>
<div >456</div>
<span >123</span>
<span >456</span>
</body>
</html>
文件二 web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>AjaxServer</servlet-name>
<servlet-class>AjaxServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServer</servlet-name>
<url-pattern>/AjaxServer</url-pattern>
</servlet-mapping>
</web-app>
文件三 AjaxServer.java
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;
/**
* Created by IntelliJ IDEA.
* User: czx
* Date: 2008-11-7
* Time: 11:18:29
* To change this template use File | Settings | File Templates.
*/
public class AjaxServer extends HttpServlet {
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doPost(httpServletRequest, httpServletResponse); //To change body of overridden methods use File | Settings | File Templates.
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.取参数信息 2.检查参数是否有问题 3.数据校验
// 4.和传统开发不同，把用户感兴趣的数据返回给页面 而不是转向一个新页面给用户
response.setContentType("text/html;charset=GB2312");
PrintWriter out = response.getWriter();
String name = request.getParameter("name");
if(name == null || name.length() == 0){
out.print("用户名不能为空");
}else{
String newName = new String(name.getBytes("ISO8859-1"));
if(newName.equals("czx")){
out.println("用户名"+newName+"已存在");
}else{
out.println("新用户"+newName+"，可以使用");
}
}
out.println("<br><a href=\"index.html\">返回验证页面</a>");
}
}
文件四 veryfy.js
//该方法使用XMLHttpRequest 使用基本的domAPI
var xmlReq;
function veryfy(){
//1。使用dom方式获取文本框中的值
//document.getElementById("name")是dom获取页面元素节点的方法
// 一个元素节点对应HTML页面的一个标签 如果<input>
// .value。可以获得一个节点的value属性值
var name = document.getElementById("name").value;
//2.创建XHR对象 ，这是XMLHttpRequest对象最复杂的一步，
// 要区分不同的浏览器，根据IE或其他浏览器，创建不同的对象
if(window.XMLHttpRequest){
//如果该对象成立，if条件就成立 Firfox,ie7,ie8,moziller,opera
xmlReq = new XMLHttpRequest();
//以下代码针对firefox的。？？？
if(xmlReq.overrideMimeType){
xmlReq.overrideMimeType("text/html");
}
}else if(window.ActiveXObject){
//针对ie6 ie5.5 ie5
//两个可以用于创建XMLHttpRequest对象的控件名称，保存在js数组中
var activeName = ["Microsoft.XMLHttp","MSXML2.XMLHttp"] ;
for(var i=0;i<activeName.length;i++){
try{
//取出控件名字，创建XHR对象，如果成功，就结束，如果失败
//抛出异常，继续循环
xmlReq = new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
if(!xmlReq){
alert('XMLHttpRequest对象创建失败');
return;
}else{
// alert(xmlReq+'4');
}
//2.注册回调函数 callback后不要加括号 把回调函数的函数名返回给xmlReq，如果加上括号
//就把函数返回值返回给了xmlReq
xmlReq.onreadystatechange = callback;
//3.设置链接信息
//第一个参数是请求方法，一般get post，第二个是url地址，第三个是同步还是异步，如果是false，
//那么只有等服务器做出响应
xmlReq.open("GET","AjaxServer?name="+name,true);
//4.发送数据
//数据已经在url中发送过去了，就不用再发送了，写成null。
//如果open第三个参数是false，那么在send处停止，等待服务器响应
//如果是true，该处不等待，代码继续往下走。
xmlReq.send(null);
//回调函数
function callback(){
//5.接受响应数据
// 判断XHR对象状态已经交互完成。
if(xmlReq.readyState == 4){
//判断 Http交互是否成功
if(xmlReq.status == 200){
//获取服务器返回数据
//获取服务器返回的纯文本文件
var text = xmlReq.responseText;
//将数据显示在页面上
var divNode = document.getElementById("result");
//给div节点赋值,用innerHTML
divNode.innerHTML = text;
}
}
}
}