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对象,兼容ie
function 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);
}