脚本化HTTP

1、HTTP，超文本传输协议，规定了Web浏览器如何从Web服务器请求文档，如何向服务器提交表单内容，如何响应这些请求和传送。

2、在现代浏览器中，XMLHttpRequest对象得到很好的支持，并且提供对HTTP协议的完全访问，包括POST、GET和HEAD请求的能力。

3、XMLHttpRequest可以同步或异步的返回Web服务器的请求并且能够以文本或者一个DOM文档的形式返回内容。

4、使用ajax脚本化HTTP的三个步骤：

①创建一个XMLHttpRequest对象

一般，我们能通过本地的XMLHttpRequest构造函数来创建对象：var request = new XMLHttpRequest();

但在ie7之前的版本，并没有一个本地的XMLHttpRequest构造函数，我们应该通过ActiveXObject()构造函数来创建这个对象：

var request = new ActiveXObject("Msxml2.XMLHTTP");

var request = new ActiveXObject("Microsoft.XMLHTTP");//不同版本的Microsoft XML HTTP库，参数不同，可以通过判断是否存在来创建相应的对象

②指定HTTP请求并向一个Web服务器提交

创建完一个XMLHttpRequest对象后，我们接下来就需要向Web服务器提交一个请求

A、调用open()方法来指定所请求的URL和请求的HTTP方法：

request.open("GET",url,false);

[open默认的情况下是异步的获取服务器的响应，false代表同步的获取服务器的响应，open并不实际的向服务器发送请求，只是保存参数，等实际发送请求时再使用]

B、向服务器发送请求：

request.send(null);

[send()函数参数是请求体，对于GET请求，参数为null且不可省略，对于POST请求，参数总是包含要发送给服务器的表单数据]

③同步或异步的获得服务器的响应

A、获取一个同步响应

当在open方法中指定了false参数时，则send是同步的，此时会阻塞直到服务器响应到达为之

XMLHttpRequest对象不仅保存了http请求的细节还代表着服务器的响应，我们可以通过status属性来检查服务器所返回的HTTP状态代码

——状态200代表请求成功并且响应能获得

——状态404代表请求的url不存在时所发生的“未找到”错误

当一个请求时同步的，我们通过判断对象的状态来判断服务器响应的情况，则send后的代码为

if(request.status == 200){

alert(request.responseText);

}else{

alert("ERROR"+request.status+":"+request.responseText);

}

同步的弊端：若Web服务器停止响应，则send函数会阻塞很长一段时间，js执行停止，Web浏览器看上去像挂起，而一旦请求发送，客户端JS的单线程执行模式不允许脚本中断一个XMLHttpRequest请求，即不允许执行“停止”。

B、获取一个异步响应

当在open方法中指定了true或省略该参数时，send是异步的，此时，send方法向服务器发送请求后并不会阻塞而是立即返回，当服务器的响应到达后再通过相关属性调用

在XMLHttpRequest中，来自服务器的异步响应，我们需要用onreadystatechange属性来控制，在任何时候，只要readyState状态一改变，事件句柄函数onreadystatechange就被调用

readyState是HTTP请求状态的整数值表示：

——0  代表 open函数还没被调用

——1 代表 open函数已经被调用，但是send函数还没被调用

——2 代表 send函数已经被调用，但服务器还没响应

——3 代表 正在从服务器接收数据

——4 代表 服务器响应完成

实例：

var request;//创建XMLHttpRequest对象，兼容iefunction creatXmlHttpRequest(){if(window.XMLHttpRequest){request = new XMLHttpRequest();}else if(window.ActiveXObject){request = new ActiveXObject("Microsoft.XMLHTTP");}}//function 123(){creatXmlHttpRequest();request.open("GET","123.php",true);onreadyStatechange = function(){if(request.readyState == 4&&request.status == 200){document.write(request.responseText);}}request.send(null);}