JQuery中Ajax功能的使用技巧二则

最近在做工作室的网站，留言模块采用纯HTML+JQuery+ASHX对数据库进行无刷新操作。虽然数据能够读出来，但是还是有一些小BUG出现：

1、留言板的计数器第一次打开的时候已做更新，但是点击刷新按钮就无动于衷了。

2、点击 回复 链接弹出输入管理员回复的框，在里面输入回复的留言之后点击提交之后页面上不会显示新添加的留言回复（实际上已经写入到数据库）。

3、显示回复内容有点问题。留言表和回复留言的表是不同的两张表，通过留言本的ID去关联。当系统用AJAX读取留言的时候自动通过留言表的ID去查找对应的回复并显示出来，这里却显示不了！（这里嵌套了一层AJAX操作）

第一个和第二个问题大概就是系统缓存的问题了。在IE选项里面把缓存禁用之后就一切正常了，但客户的客户端浏览器并不会如此设置，所以我们还必须在页面代码里面禁用缓存。

第三个问题则应该涉及到异步和同步的问题吧。

仔细研究了一下JQuery的AJAX部分，发现$.ajax()下有很多参数，其中async参数主要是用来设置是同步还是异步。async默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程）。当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后会按顺序一直执行下来只有单线程操作。

因此，对于第三个问题只需要在调用查询留言表对应的留言回复的函数中加入async:false，之后就一切搞定了。

/*   获取对应留言的回复内容  传入的是留言ID */ var GetMsgRly = function(MsgID) {     $.ajax({         url: '/Ashx/GetMsgRly.ashx',         type: "GET",         data: { MsgID: MsgID },         dataType: 'json', async: false,//这个$.ajax可以有返回值的，返回值是xmlhttprequest对象 但是为了能够让返回值正确赋值，你必须把ajax设置为同步的，而非异步的。         beforeSend: function() {

        },         error: function() {             alert('获取系统留言回复失败');         },         success: function(rly) {             if (rly != "0") {                 var rlydata = rly.table;                 rlystr = "";                 $.each(rlydata, function(i, r) {                     rlystr += "<span class='Msg_rly'><span class='Msg_rly_line'></span>";                     rlystr += "<span class='msg_rly_manager'>管理员回复：</span><br/>";                     rlystr += "<span class='Msg_rly_content'>" + r.Content + "</span> ";                     rlystr += "<span class='Msg_rly_Dt'>于" + r.Dt + "</span></span>";                 });                 str += rlystr;             }         }     }); }

PS：关于JQuery如何解析Json数据格式，请参照我博客里面的其它文章。

第一个和第二个问题的解决方式也很简单，研究了JQuery的AJAX部分就知道里面有一个参数cache，专门是用来设置本次和服务器进行的传输是否加载缓存。既然第一个第二个问题显示异常是由于读取系统IE缓存所致，那么就把cache设置为false就搞定了。语句如下：

cache:false

相关代码如下：

$(document).ready(function() {     $.ajax({         url: '/Ashx/ModifySysCou.ashx',         type: "GET",         data: { ID: 1, Count: 1 },   //红色的1代表浏览一次页面计数器加1         dataType: 'text', cache:false,   //在这里禁用缓存，则每次页面dom加载完毕之后就会和服务器进行交互而不通过缓存         beforeSend: function() {             // $("#loading").show();         },         error: function() {             alert('系统错误，获取系统计数器失败');         },         success: function(msg) {             if (msg != "0") {                 //alert(msg);                 $("#Count").html(msg);             }             else {                 alert('获取系统计数器失败');             }         }     }) })

我发现利用JQuery来做AJAX真的很方便，在以后的项目运用中我会用到它很多地方，AJAX中很多参数确实值得去研究...

版权所有，转载请注明作者（梦心）及文章博客地址（http://mengxin523.cnblogs.com），谢谢。