Mr.J---重拾Ajax（一）--XMLHttpRequest

去年做页面的时候，提交表单，使用过Ajax：Ajax提交表单

之前的Web页面加载方式：

1. 用户点击页面上的某一部分。
2. 浏览器向服务器发出了一个请求。
3. 服务器发回一个完整的新页面，其中包含所有已修改的信息。
4. 用户点击页面上的另一处。
5. 浏览器再向服务器发出一个请求。
6. 服务器再发回另一个完整的页面。

大多数情况下，我们只是改变了一行文本或者一个图像。在之前的Web加载方式中，这样是很麻烦的。

改进之后的Web页面，使用Ajax：

1. 用户点击页面上的某一部分。
2. 页面创建一个特殊的请求对象，由浏览器发送给服务器。
3. 服务器更新这个请求对象。
4. 只更新页面中已经改变的部分。

利用Ajax，浏览器只会发送和接受页面中需要修改的部分。

有时浏览器根本不必与服务器通信

1. 用户点击页面上的某一部分。
2. 浏览器用脚本文件中的一个函数。
3. 脚本更新图像根本不需要服务端程序。
4. 脚本告诉浏览器如何更新页面，不存在页面的完全刷新。

Ajax为Web应用提供的好处

1. 浏览器可以从服务器同时请求多项内容，利用异步请求，可以确保浏览器在后台工作，避免因完全页面刷新而中断用户的工作。
2. 浏览器请求返回的速度会快很多，请求和响应的速度取决于服务器返回的内容。
3. 只有页面中真正改变的部分会得到更新。
4. 减少服务器数据流量，利用Ajax可以建立更小，更集中的请求。
5. 用户可以在页面更新的同时继续工作。
6. 有时无须与服务器往返通信就可以处理。

同步与异步

同步

异步

例如注册表单中，一边输入一边提示是否密码相同或者用户名是否已被注册等等....

通过使用XMLHttpRequest进行后台与服务器的数据交换和页面的部分更新。

三大模块

1. 运用Html和Css来实现页面，表达信息。
2. 运用XMLHttpRequest和Web服务器进行数据的异步交换。
3. 运用Javascript操作DOM，实现动态局部刷新。

HTTP

查看我的专栏：Http学习笔记，里面有详细的说明，这里主要需要的知识：二，三，四，五。

一个完整的HTTP请求过程：

1. 建立TCP连接
2. Web浏览器向Web服务器发送请求命令
3. Web浏览器发送请求头信息
4. Web浏览器应答
5. Web浏览器发送应答头信息
6. Web浏览器向浏览器发送数据
7. Web浏览器关闭TCP连接

XMLHttpRequest对象

创建对象（兼容所有浏览器版本）

var request;
if(window.XMLHttpRequest){
    request = new XMLHttpRequest(); // IE7+,FireFox,Chrome,Opera....
}else{
    request = new ActiveXObject("Microsoft.XMLHTTP");  //IE6,IE5
}

XMLHttpRequest发送请求

用open可以指定get,post 

一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。

 var url = "login.jsp?user=XXX&pwd=XXX";

 xmlHttpRequest.open("GET",url,true);

 xmlHttpRequset.send(null);

（2）send发送为POST请求 

也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方 法。首部相应概念

xmlHttpRequest.open("POST","login.jsp",true);

xmlHttpRequest.send("user="+username+"&pwd="+password);

XMLHttpRequest获取响应

responseText  获得字符串形式的响应数据

responseXML  获得XML形式的响应数据

status 和 statusText  以数字和文本形式返回HTTP状态码

getAllResponseHeader()  获取所有的响应报头

getResponseHeader()    查询响应中的某个字段的值

readyState

0:请求未初始化，open还没有调用

1:服务器连接已建立，open已经调用了

2:请求已接受，接收到头信息了

3:请求处理中，接收到响应主体了

4:请求已完成，且响应已就绪，响应完成

request.open("POST", "server.php");
request.send(data);
request.onreadystatechange = function() {
		if (request.readyState===4) {
			if (request.status===200) { 
				document.getElementById("createResult").innerHTML = request.responseText;
			} else {
				alert("发生错误：" + request.status);
			}
		} 
	}