关于AJAX同步和异步的研究

近日在开发的过程中遇到一些逻辑判断上的需求，例如有时候必须通过AJAX给服务器交互，然后等response的数据来判断下一步的逻辑关系。但是如何都不能把response的内容给取出，有点奇怪。必须要我在callBack内容里面加上对应成功或者失败的function。但其实我使用的这个function就判断请求true或者false就可以了，没必要在里面加function，因为想封装成一个工具类。

然后静下，想了一下AJAX的机制，觉得原因是出在机制上。跟同事讨论了一下后，确定问题所在了。然后再进行调试，结果出来了。所以分享一下。



首先，下面是一个普遍常见的发送XMLRequest请求的一段代码

    var _bool = false;

    request.open("POST", url, true);

    request.onreadystatechange = function callBack(){

           var response = request.responseText;//假设response等于true

           _bool= response;

           /*调试1*/

    }

    request.setRequestHeader("Content-Type",

           "application/x-www-form-urlencoded");

    request.send(parameters);
   
    /*调试2*/

    /*后续操作*/

    if(_bool){

       //对应的操作

    }else{

       //对应的操作

    }

虽然后续操作可以直接放在callBack里面的，但是我们现在姑且这样做吧。实际上也是没什么问题。

操作结果无聊response的值返回的是任何，都返回一个false。开始就以为是赋值，或者变量作用的问题。反思之下觉得没什么错误之处。


在调试1和调试2的位置分别加入alert调试。

顺序是 调试1→调试2


信息分别都是true和false。更加觉得奇怪了。



容易被遗忘的AJAX机制-------同步synchronous和异步asynchronous


同步和异步，总结一下自己的经验：


1、如果是异步的话，注意request某些情况下会被覆盖。即第一个异步请求服务端没返回，第二个提交出去了。而使用同一个request对象的话，第一次 的就被覆盖了。所以永远就只能得到一个返回数据了。所以异步情况下，推荐不使用全局request比较好。但request需要传参囖。并且回调函数使用 完毕的时候记得初始化一下。


2、在异步的情况下，JavaScript代码浏览器是直接全部运行完毕的。那么AJAX服务端返回的response应该谁来接收？刚开始很多人都有这个疑问，都很容易的误认为是JavaScript来接收然后作处理。

其实不然，JavaScript代码执行后，剩下的任务交给了浏览器。一个默默无闻的代码翻译者。是它把一大串乏味的html等代码转换成各种字体，图案，样式给浏览者。

而在同步的情况下，XMLRequest请求发送之后，后续的JavaScript代码不会继续执行，浏览器会一直等response之后在继续。这段时间里面，访问者也不能作其他操作。

其实与AJAX服务端交互的时间十分之快，基本上同步和异步，普通的调试是很难差别所在。除非在服务端进行一下sleep这样的操作。


其实说到这里，之前的问题所在应该就有头绪了。之所以Response获取不了，是因为之后接收的response其实等于一个单独的个体了。也就是AJAX的精髓所在，异步请求的作用。

所以就算顺序是我们想要的，即先alert 调试1的位置，然后调试2。但是值还是获取不了。


上面代码中，只要把

    request.open("POST", url, true);

里面的true改为false。我们想要的结果就实现了。

关于异步和同步，必须记住他们的不同点，然后才能灵活运用。虽然很多情况下是不存在任何差别的。但在不断的开发过程中，他们的细微差别可能对你的程序带来十分大的影响。

评论

1 楼 寒枫无云 2010-06-17  

学习了，谢谢