ajax的全称是AsynchronousJavaScript and XML,异步JavaScript及 XML,它有别于传统web开发中采用的同步的方式,这也正是Ajax的真正意义所在,起到了一个缓冲剂的作用,不管速度有多慢都不会让用户觉得服务没有响应或者已经中断了,很友好,大大的提高了用户的体验.
官方上讲,异步传输是面向字符的传输,它的单位是字符,同时它将比特分成小组来进行传送。一般每个小组是一个8位字符,在每个小组的头部和尾部都有一个开始位和一个停止位,而且在传送过程中接收方和发送方的时钟不要求一致;而同步传输是面向比特的传输,它的单位是桢,在传输的时候需要接受方和发送方的时钟保持一致。
我觉得论坛中这个例子比喻的挺恰当的,说:如果现在你们村里因某种情况而面临停水,现在有关部门公布了两种方案,一是完全停水24个小时,在这24个小时内完全停水,24个小时后恢复正常。二是不完全停水48个小时,在这48个小时内水没有完全断,只是流量比原来小了很多,在48个小时后恢复正常流量,问:如果是你你会选择哪种方式呢?
我想大部分人会选择第二种方案,在这两天内并不会断水,只是水流量小了,这种方案就是异步的表现,不会影响到人们的正常生活;而第一种方案呢,在村里还好点,基本上每家每户都有一个大水缸用来存水,就算停一天的水也够用了,要是在城镇里就不一样了,楼房里基本上除了饮水机里有存水,水壶,水杯里有存水之外,我想就不会有其他的地方存水了,这种方案其实是同步的表现,如果停一整天的水肯定会影响到人们的正常生活.
现在大家应该能体会到异步给我们带来的好处,在服务器忙不过来的时候,他能掩盖问题所在,让用户误认为服务器始终都没有中断,这样用户心里会舒服很多,就像打开软件或者网页,下载东西......的时候因为种种原因,速度相当的慢,有时甚至会怀疑它是不是在动,这时候进度条就起到了很大的作用,它就是我们前边说到的缓冲剂,能很好的调节用户的心情,哪怕它速度慢的没法再慢了,也会给人一种它还在努力加载的状态.这样用户心里会舒服很多的.所以说这是非常有必要的,而且未来它带来的影响会无法让人想象.
运用到代码中,区分同步传输,异步传输需要在.open()方法的参数中控制一下,说到这,咱们还需要回忆一下open方法
语法:(http请求).open(bstrMethod,bstrUrl,varAsync,bstrUser,bstrPassword);
参数:
1.bstrMethod
http方法,例如:POST、GET、PUT等。对大小写不敏感。
2.bstrUrl
请求的URL地址,可以为绝对地址也可以为相对地址。
3.varAsync[可选]
布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会用onreadystatechange属性指定的回调函数。
4.bstrUser[可选]
如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
5.bstrPassword[可选]
验证信息中的密码部分,如果用户名为空,则此值将被忽略。
到目前为止,也只是使用到前三个参数,后两个省略了,再回到上边说的,异步传输,open()方法的使用上,如果你是异步传输,那可以将第三个参数直接省略,因为它的默认值即表示异步传输,如果你是同步传输,需要将第三个参数的值改为false即可.还有一点也特别重要的地方就是,异步传输需要onreadystatechange事件处理函数,且值为"4"时再继续执行后边的操作,而同步传输不需要此事件处理函数,JS会等待请求返回获得status.
//同步传输模式
function createXmlHttpRequest(nProducttemp,nCountrytemp) {
var xmlhttp;
// 判断是否把XMLHTTPRequest实现为一个本地javascript对象
if (window.XMLHttpRequest) {
// FireFox,Opera等浏览器支持的创建方式
xmlhttp = new XMLHttpRequest();
}
// 判断是否支持ActiveX控件
else if (window.ActiveXObject) {
// IE浏览器支持的创建方式
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var URL = "http://write.blog.csdn.net/postlist";
xmlhttp.open("GET",URL,false); //同步传输
xmlhttp.send(null);
var result = xmlhttp.status;
if (result == 200) {
document.getElementById("控件的id").innerHTML = xmlhttp.responseText;
}
}
示例2(异步传输):
//异步传输模式
function RequestByGet(nProducttemp,true);//异步传输
xmlhttp.onreadystatechange = callBack;
xmlhttp.send(null);
}
//创建用户检测的回调函数
function callBack() {
//判断对象的状态是否交互完成
if (xmlhttp.readyState == 4) {
//判断http的交互是否成功
if (xmlhttp.status == 200) {
document.getElementById("控件的id").innerHTML = xmlhttp.responseText;
}
}
}