Ajax基本流程
Ajax基本流程
1.???? Web表单中获取数据
2.???? 建立XmlHttpRequest
3.???? 根据XmlHttpRequest中的oper方法来确定发送的请求方式和URL以及是否同步执行。（没有发送请求，要用到send方法才能发送。）
4.???? 设置响应接受后运行函数。
5.???? 用XmlHttpRequest中的send方法来发送请求。Loaded方法来确定是完全接收响应。
编写Ajax简单实例
Text.jsp页面?
?
<body>
?? <form name="form1"?action=""?method="post">
?User Name:<input type="text"?name="username"?value="">
?<input type="button"?name="check"?value="check"?onClick="userCheck()">
</form>
? </body>
?
<script type="text/javascript">
??var?http_request =?false;
??function?send_request(url) {//初始化、指定处理函数、发送请求的函数
?? ????????????????????? ??//开始初始化XMLHttpRequest对象
???if(window.XMLHttpRequest) { //Mozilla 浏览器
?? ?http_request =?new?XMLHttpRequest();
??? }
?? /*
????? XMLHttpRequest 得到了所有现代浏览器较好的支持。
?????????????? 唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。
?????????????? 在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。
?? */
???else if?(window.ActiveXObject) { // IE浏览器
??? ????try?{
??? ???? ?? http_request =?new?ActiveXObject("Msxml2.XMLHTTP");????
??? ??? }?catch?(e) {
??? ?????try?{
??? ???? ?? http_request =?new?ActiveXObject("Microsoft.XMLHTTP");
??? ???? }?catch?(e) {}
??? ??? }
?? }
???if?(!http_request) { //异常，创建对象实例失败
??? window.alert("不能创建XMLHttpRequest对象实例.");
????return false;
?? }
?? http_request.onreadystatechange = processRequest;?? //当属性调用open和send方法的时候，这个onreadystatechange方法就会调用
?? // 确定发送请求的方式和URL以及是否同步执行下段代码
?? http_request.open("GET", url,?true);//open方法已调用，但是 send() 方法未调用。请求还没有被发送。
?? http_request.send(null);//方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 如果是post的方式提示用Send（“username=abc”）这样传值。而get方式只能在uri中加参数
? }
? // 处理返回信息的函数
?????function?processRequest() {
?????????if?(http_request.readyState == 4) { // 判断对象状态?? ? readyState == 4 是判断HTTP响应已经是否完全接收
?????????????if?(http_request.status == 200) { // 信息已经成功返回，开始处理信息
???????????????? alert(http_request.responseText);//当readyState==4时responseText保存了完整的响应体
???????????? }?else?{ //页面不正常
???????????????? alert("您所请求的页面有异常。");
???????????? }
???????? }
???? }
??function?userCheck() {
???var?f = document.form1;
???var?username = f.username.value;
???if(username=="") {
??? window.alert("The user name can not be null!");
??? f.username.focus();
????return false;
?? }
???else?{
??? send_request('check1.jsp?username='+username);
?? }
? }
?</script>
?
?
check1.jsp页面
<%@ page language="java"?import="java.util.*"?pageEncoding="UTF-8"%>
?<%
?String username= request.getParameter("username");
?if("lzz".equals(username)) out.print(username+"用户名已经被注册，请更换一个用户名。");
?else?out.print(username+"用户名尚未被使用，您可以继续。");
?%>
?
对XmlHttpRequest理解
XMLHttpRequest 对象用于和服务器交换数据。
XMLHttpRequest可以提供不重新加载页面的情况下更新网页，在页面加载后在客户端向服务器请求数据，在页面加载后在服务器端接受数据，在后台向客户端发送数据。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM文档形式返回内容。
????? XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。
//注意：在上面实例中有用到XmlHttpRequest中的readyState属性和onreadystatechange事件，以下具体讲了它们是怎么变化和触发的
?? XMLHttpRequest 中的readyState 属性 HTTP 请求的状态.当一个 XMLHttpRequest 创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。下表列出了状态、名称和含义：
|
状态 |
名称 |
描述 |
|
0 |
Uninitialized |
初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
|
1 |
Open |
open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 |
|
2 |
Send |
Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 |
|
3 |
Receiving |
所有响应头部都已经接收到。响应体开始接收但未完成。 |
|
4 |
Loaded |
HTTP 响应已经完全接收。 |
readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 open() 方法。每次这个属性的值增加的时候，都会触发onreadystatechange 事件句柄。