由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, 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, 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还有一个原则——按需取数据，能最大程度的减少冗余请求和响应对服务器造成的负担。