Ajax1——ajax基本属性和dom, 一个基于用户名的验证

表2-1　标准XMLHttpRequest操作

方    法	描    述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method", "url")	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

表2-2　标准XMLHttpRequest属性

属    性	描    述
onreadystatechange	每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，表示为一个串
responseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）
statusText	HTTP状态码的相应文本（OK或Not Found（未找到）等等）

1  用于处理XML文档的DOM元素属性

属性名	描述
childNodes	返回当前元素所有子元素的数组
firstChild	返回当前元素的第一个下级子元素
lastChild	返回当前元素的最后一个子元素
nextSibling	返回紧跟在当前元素后面的元素
nodeValue	指定表示元素值的读/写属性
parentNode	返回元素的父节点
previousSibling	返回紧邻当前元素之前的元素

表3-2　用于遍历XML文档的DOM元素方法

方法名	描述
getElementById(id) (document)	获取有指定惟一ID属性值文档中的元素
getElementsByTagName(name)	返回当前元素中有指定标记名的子元素的数组
hasChildNodes()	返回一个布尔值，指示元素是否有子元素
getAttribute(name)	返回元素的属性值，属性由name指定

 动态创建内容时所用的W3C DOM属性和方法

属性/方法	描述
document.createElement(tagName)	文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素
document.createTextNode(text)	文档对象的createTextNode方法会创建一个包含静态文本的节点
<element>.appendChild(childNode)	appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如，可以增加一个option元素，作为select元素的子节点
<element>.getAttribute(name) <element>.setAttribute(name, value)	这些方法分别获得和设置元素中name属性的值
<element>.insertBefore(newNode, targetNode)	这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面
<element>.removeAttribute(name)	这个方法从元素中删除属性name
<element>.removeChild(childNode)	这个方法从元素中删除子元素childNode
<element>.replaceChild(newNode, oldNode)	这个方法将节点oldNode替换为节点newNode
<element>.hasChildnodes()	这个方法返回一个布尔值，指示元素是否有子元素

var xmlhttp;
function verify(){
    var userName=document.getElementById("userName").value;
    if(window.XMLHttpRequest()){
        xmlhttp=new XMLHttpRequest();
        if(xmlhttp.overrideMimeType){
           xmlhttp.overrideMimeType("text/xml")
        }
    }else if(window.ActiveXObject()){
          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对象创建失败");
       return;
   }else{

   }
    //2注册回调函数我们需要将函数名注册上如果加上括号就会把函数的返回值注册上
   xmlhttp.onreadystatechange=callback;
    //3设置连接信息
   //xmlhttp.open("Get","AJAXServer?name="+ userName,true);
    xmlhttp.open("post","AJAXXMLServer",true);
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
    //4发送数据和服务器端进行交互
    //同步方式下send这句话会在服务器端数据回来后才执行完
    //异步方式下send这句话会立即执行完
    xmlhttp.send("name="+userName);
   //xmlhttp.send(null);
}
function callback(){

    //接受响应数据
   //判断对象的状态是交互完成
    if(xmlhttp.readyState==4){
       //判断http的交互是否成功
        if(xmlhttp.status==200){
          //获取服务器的数据
            var domObj=xmlhttp.responseXML;
            var messageNode=domObj.getElementsByTagName("message");
            if(messageNode.length>0){
            var messageNodevalue=messageNode[0].childNodes[0].nodeValue;
            //将数据显示在页面上
            var divNode=document.getElementById("result");
            divNode.innerHTML=messageNodevalue;
            }else{
                alert("读取xml数据出错元数据为"+xmlhttp.responseText);
            }
        }else{
            alert("出错了")
        }
    }
}

 

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by IntelliJ IDEA.
 * User: Administrator
 * Date: 2009-3-17
 * Time: 13:55:25
 * To change this template use File | Settings | File Templates.
 */
public class AJAXXMLServer extends HttpServlet{
     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          this.doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
                   response.setContentType("text/xml;charset=GB2312");
                   PrintWriter out=response.getWriter();
                   String old=request.getParameter("name");
                   StringBuilder builder=new StringBuilder();
                   builder.append("<message>");
                   if(old==null||old.length()==0){
                       builder.append("用户名不能为空").append("</message>");
                   }else{
                       String name=new String(old.getBytes("ISO8859-1")) ;
                       if(name.equals("yf")){
                           builder.append("用户名["+name+"]已经存在").append("</message>");
                       }else{
                           builder.append("用户名["+name+"]尚未存在").append("</message>");
                       }
                   }
                   out.println(builder.toString());

               } catch (IOException e) {
                   e.printStackTrace();
               }

    }
}