[置顶] Ajax篇章（二）——核心对象XMLHttpRequest五步学会使用
引言
XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象向http服务器发送请求并使用微软XML文档对象模型DOM处理回应。
同步和异步：
同步:程序的执行顺序与任务的排列顺序是一致的、同步的；提交一个表单必须重载整个页面。
异步：程序的执行顺序与任务的排列顺序是不一致的、异步的。 提交请求与返回数据不可见，不刷新页面而改变当前页面的显示。
一、XMLHttpRequest异步交互过程
Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法(GET或POST)来处理请求，并将目标URL设置到XMLHttpReques对象上。
Ajax如何首先处于异步处理状态?你不想等待，希望数据马上与服务端交互并返回结果。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。
服务器在解析请求参数后，servlet执行必需的应用逻辑，将响应序列化到XML中，并将它写回HttpServletResponse。回到客户端，注册在XMLHttpRequest上的回调函数现在会被调用来处理由服务器返回的XML文档。最后，通过更新用户界面来响应服务器传输过来数据，使用JavaScript来操纵页面的HTML DOM。
二、五步使用XMLhttpRequest
JavaScript
1、创建XMLHttpRequest对象
var xmlhttp;
function submit(){
//1、创建XMLHttpRequest对象
if(window.XMLHttpRequest){
//IE7/8,FireFox,Mozilla,safari,Opera"
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//IE6 IE6.5 IE5
var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
}catch(e){}
}
}
if(xmlhttp==undefined || xmlhttp==null){
alert("当前浏览器不支持穿件XMLHttpRequest对象,请更新浏览器");
return;
}
注意：
不同浏览器的创建方式
一是IE6 及以下版本,需要通过某一个正确的ActiveXObject控件的名称通过new ActiveXObject(控件名)的方式
二是IE7 及以上版本，firefox，chrome等非IE浏览器，直接new XMLHttpRequest()
2、注册回调函数
xmlhttp.onreadystatechange=callback;
//错误写法xmlhttp.onreadystatechange=callback();
//获取文本框中用户输入的内容
var userName=document.getElementById("UserName").value;
注意：
回调函数名后面不加括号。加括号代表将返回值注册给onreadystatechange属性，我们只需要将回调函数的名字注册给这个属性。
详见下篇博客：
实际上每次readyState发生变化时，就会触发回调函数。我们一般只关心状态4，表示响应完全被接收。
3、设置和服务器交互的相应参数
4、设置向服务器端发送的数据，启动和服务器的交互
5、判断和服务端交互是否完成，还要判断服务器端是否正确返回了数据
//3、设置和服务器交互的相应参数
var url = "user?name="+userName;
xmlhttp.open("GET",url,true);
//4、设置向服务器端发送的数据，启动和服务器的交互
xmlhttp.send(null);
}
function callback(){
// 5、判断和服务端交互是否完成，还要判断服务器端是否正确返回了数据
if(xmlhttp.readyState==4 ){ //表示和服务端交互完成
//正确返回了数据
if(xmlhttp.status==200){
//纯文本数据接受方法
var message=xmlhttp.responseText;
//向div标签中天后从文本内容的方法
var div=document.getElementById("message");
div.interHTML=message;
}
}
}
</script>
</head>
<body>
<input type="text" id="UserName"/>
<input type="button" onclick="submit()" value="校验用户名"/>
<br/>
<!--用来接收服务端返回数据-->>
<div id="message"></div>
</body>
</html>
注意事项：
open方法有5个参数，其中前三个必须写。
get方式：参数为位于url中，后面的方法参数直接写null值即可
post方式：先调用setRequestHeader方法，设置Content-Type的值，然后调用send方法，send的参数就是请求的数据。
第五步中的两个判断语句最好分开写，readyState的判断位于外层，status的位于内层。以便于分别处理服务器不是200响应的情况和readyState不是4的情况。
服务端（user.java）
<span style="font-size:18px;">package com.tgb.test;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class user extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
//是将结果以HTML的形式返回给客户端
PrintWriter out = response.getWriter();
try{
//接收请求中传来的“name”参数的值
String old=request.getParameter("name");
if(old==null)
{
out.println("用户名不能为空");
}else{
String name=new String(old.getBytes("ISO8859-1"),"gb2312");
System.out.println(name);
if(name.equals("123")){
//返回界面，html中message来接收
out.println("用户名["+name+"]已经存在，请使用其他用户");
}else{
out.println("用户名["+name+"]尚未存在，可以使用该用户注册");
}
}
}finally{
out.close();
}
}
}</span>
XML
<span style="font-size:18px;"><?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 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_3_0.xsd">
<welcome-file-list>
<welcome-file>userverify.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>user</servlet-name>
<servlet-class>com.tgb.test.user</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>user</servlet-name>
<url-pattern>/user</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app> </span>
注意：
配置文件中的服务器名称必须要与实际相对应。
三、补充
1、readyState：表示XMLHttpRequest对象的状态。
|
状态
|
名称
|
描述
|
|
0
|
Uninitialized
|
初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
|
|
1
|
Open
|
open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
|
|
2
|
Send
|
Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
|
|
3
|
Receiving
|
所有响应头部都已经接收到。响应体开始接收但未完成。
|
|
4
|
Loaded
|
HTTP 响应已经完全接收。
|
2、写好的代码要在服务器端环境下运行，要将写好的东西，部署在本机服务器环境下，通过localhost来访问，方可看到效果，否则会报错！