很早以前,我们要注册一个东西要填完一大堆东西点击提交按钮后才知道自己的用户名是否已被注册,再点击提交后又有什么信息填写的不正确,就这样一次又一次,太麻烦了,但是现在我们填完一栏就会有提示告诉我们信息是否合格。
那这样的变化是怎么回事呢?
很早之前客户端和服务器采用的数据同步交换,后来有了XMLHttpRequest对象就有了异步的数据交换,也就是AJAX技术。
在我们平常注册的页面上用Js来实现这些,关于页面的HTML和CSS可以参考“我们经常注册用的页面是怎么实现的”。
首先,实例化XMLHttpRequest,我们可以把XMLHttpRequest简称为XHR(这个自己可以根据自己的情况来定义),因为IE5 和 IE6 使用 ActiveXObject,所以我们就分情况来写。
var XHR;
function createxmlHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else {
xmlHttp=new XMLHttpRequest();
}
}
这样,第一步就完成了。
接下来,我们就开始发送请求。第一句规定请求的类型、URL 以及是否异步处理请求。括号里最后一个表示异步还是同步,异步时就为true,一般我们默认为异步也可不写这句,后面这句则是将请求发送到服务器。
XHR.open("GET",url,true);
XHR.send();
如果是post请求,我们还可以像下面这样写,中间这句是向请求添加http头,括号里分别是头名称和头的值,send() 方法中规定您希望发送的数据。当然,post请求也可以像get请求一样只用那两句话。
XHR.open("POST","ajax_test.asp",true);
XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");
XHR.send("fname=Bill&lname=Gates");
下面对服务器的响应进行监听,if里的判断就是readyState和status状态请求成功时我们做的事情,里面的responseText返回响应的一种形式
XHR.onreadyStatechange=function(){
if((XHR.readyState==4)&&(XHR.status==200)){
msg.innerHTML=XHR.responseText;
}
}
这就是一个异步请求的一个过程。自己在学习过程中和大家的一些分享,如果有更好的理解和看法,欢迎一起来探讨学习。