关于ajax的异步同步问题

关于ajax的异步同步问题

之前一直对于ajax同步和异步不是很理解，直到在实践中遇到问题才明白这是怎么一回事。那么就根据这个实际的问题来说说自己对ajax异步与同步的理解。

问题的起因是这样的，在做一个项目当中有这样一个需求：网站上的一些链接有内外网显示权限，有些链接当用内网访问时可以点开查看，用外网点开弹出提示说：ip限制。然后取消默认的链接跳转行为。

我的解决思路就是给a标签统一添加一个click事件。事件中判断该条消息是否允许打开，那么就要获取客户端的ip才可以。我就用ajax访问服务器调用后台方法获取了客户端的ip，然后将ip传给前台。然后判断这个ip是否在内网网段内，如果在内网网段则链接跳转，如果不在则去掉默认事件，页面不发生跳转。

实现使用jquery的ajax方法，代码如下：

  $.ajax({
                    type: "GET",
                    dataType: "text",
                    url: "../control/getIp.ashx",
                    success: function (data) {
                        client_ip = data;
                        var ip = client_ip.split('.');
                        if (ip[0] != "202" && ip[0] != "219" && ip[0] != "10")  //内网网段
                        {
                            alert("IP限制，仅限内网访问！");
                            event.returnValue = false;
                        }
                        else {
                            event.returnValue = true;
                        }
                    }                       
                });   

但问题来了，确实获取到了ip,也可以做出正确的判断，但页面依然可以正常跳转。起初一直是以为是默认事件取消的代码不对，或是兼容性问题。但做了兼容处理之后问题依然没有得到解决。通过调试测试才发现这是因为代码的执行时间不一致，获取到ip之前还没有进行判断的时候后面页面跳转的代码已经执行了，然后才进行判断弹出禁止访问，去掉默认事件。才意识到这是ajax的异步执行导致的。

那么如何解决呢？

在jquery的ajax方法中，有这么一个参数设置ajax的异步与同步，async.true代表异步，false代表同步。到此，才明白原来异步与同步的区别在这里：ajax异步访问是指发起请求后在还没得到回应前继续执行后面的js代码，那么在这时就没有获取到ip就无法进行正确的判断。然而同步就是ajax向后台发起请求，前台的js代码就会阻塞在这里，直到收到响应的时候才会继续执行。这也是为什么很多ajax调用里的赋值不起作用的原因，现在终于搞明白了~

修改后的代码如下：

  $.ajax({
                    type: "GET",
                    dataType: "text",
                    url: "../control/getIp.ashx",
                    async:false,       //ajax请求默认是异步的，这里得手动修改。
                    success: function (data) {
                        client_ip = data;
                        var ip = client_ip.split('.');
                        if (ip[0] != "202" && ip[0] != "219" && ip[0] != "10")  //内网网段
                        {
                            alert("IP限制，仅限内网访问！");
                            event.returnValue = false;
                        }
                        else {
                            event.returnValue = true;
                        }
                    }                       
                });   

这个是jquery当中的解决办法，那么原生的ajax也可以去设置的， 在ajax对象的open()方法中第三个参数就是设置同步异步的。true代表异步，false代表同步。

ok~,又积累了一点经验。以后就可以根据自己的需求去决定同步请求还是异步请求了。