由Ajax对比同步传输和异步传输

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.


示例1(同步传输):
//同步传输模式   
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;
        }
    }
}

通过这几种形式对比一下这两种传输方式的不同,简单的体会它存在的意义,等到用的时候相信你还能更深层的体会它存在的意义.

其实异步传输只是Ajax的优点之一,它还有很多优点,比如说页面无刷新,在页面内与服务器通信,给用户的体验非常好,可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本,并且减轻服务器的负担,ajax还有一个原则——按需取数据,能最大程度的减少冗余请求和响应对服务器造成的负担。

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 😃 https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: "./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...