Ajax:教你如何记住我

来源：互联网发布：sql 当前时间减一天编辑：程序博客网时间：2024/06/07 02:19

Ajax的无状态性

使用

Ajax可以很大程度地提高用户体验，但说到底Ajax带来的页面的变化，仅仅是通过Javascript来修改页面的结构或者内容来实现的，是静态层面上的变化，服务器端并不知道静态页面发生了变化，如果执行了Ajax操作，再刷新页面，那么执行Ajax带来的变化将在刷新完成后消失，因为刷新页面也是对服务器的一次新的请求，而服务器端并不知道前端已经执行了Ajax，所以依然还是返回执行前的页面内容，因此从原则上来讲，Ajax也是无状态的。
我们先看一段Ajax的代码片段：
......
if (XMLHttpReq.readyState==4)
{
if (XMLHttpReq.status==200)
{
var restext=unescape(XMLHttpReq.responseText);

var personlist=document.getElementById("personlist");
personlist.innerHTML=restext;
....
}else
{alert("您所请求的页面有异常!");}
}
.......

对应的HTML代码为：
<div id="personlist"></div>
这点代码片段表示的功能是，向服务器发送一个数据请求，将请求到的数据显示在<div></div>之间。
从代码可以看出，Ajax所作的工作，只是通过XMLHttpRequest对象，请求数据，并通过Javascript来把请求到的数据显示在页面上，但是这种显示仅仅针对现实的当前状态有效，离开该页面请求的数据就不会显示了，因为第一次请求的页面的HTML代码并没有发生变化，如下图：
Ajax:教你如何记住我 - 无余如尘 - 天涯海角

从图中可以看出，请求到数据后，查看源代码<div id=”personlist”></div>之间还是没有空的，但页面上已经显示出了数据，这就说明Ajax并没有真正改变服务器端的原始内容，那么再次刷新（请求）的时候，原先请求到的数据就消失了。
这一点就比较糟糕了，我们并不能强求客户不执行刷新操作，事实上很多用户特别喜欢刷新操作，而且刷新也确实能动态地反应数据的变化情况。
那么针对这个缺陷，我们是不是就束手无策了呢？答案显然是否定的。
虽然Netscape公司现在已经被AOL收归旗下，但不得不承认其在Internet领域所作出的巨大贡献，javascript就是其中之一，而我们要解决Ajax的无状态性也是通过javascript的一个不常用但是在这里却非常实用的类hash。

javascript

的标签

---hash

其实基本上有URL的时候就已经有hash这个概念了。
Hash是指位于URL的尾端，并被预先设计为以一个#符号作为开始的对象，如：
http://localhost:8082/Demo/indexajaxjsp.htm#1
    #1就是Hash对象，事实上这个用法早就出现在普通的网页中，以前的叫法叫锚点，用于标记某个对象在页面中的某个位置，在某个地方设置一个id=xx，那么访问该页面时，在连接后加#xx，则可以直接把页面定位到#xx的位置。
    比如，在index.html页面的底部定义一个<div id=”11”>页面底部</div>
    如果在访问该页面时，链接做成index.html#11,则页面会直接跳转到底部标有id=”11”的地方，这个在页面内容非常多的时候，可以方便地实现在本页面跳转。
    而链接做成index.html#11，则访问的浏览器地址栏也会显示index.html#11，这就为我们保存Ajax的状态提供了机会。
    在javascript中，通过window.location即可取得浏览器的完整地址栏，包括#11，而在通过window.location.hash,则可以获得真正的hash对象，在上述的例子中即#11，同样通过window.location.hash也可以设置hash值。
    写到这里，聪明的读者就应该知道如何使用hash来保存Ajax的状态了。
    只需要我们每次执行ajax的时候，设置好一个至少在本页中是唯一的hash值，设置好后，在每次页面刷新或者需要调用该状态的时候，调用这个hash值，然后再执行一次Ajax函数，即可返回执行Ajax后的状态。
    在这里，举Ajax分页为例说明如何使用hash对象。
    页面中还是
    <div id=”personlist”></div>
    在页面加载时，触发一个loadpage的js函数，
    <body onLoad="loadpage();">
    loadpage的定义为：
    function loadpage()
    {
        var pagehash=window.location.hash;
        if(pagehash=="#")
            pagehash=1;
        else
            pagehash=pagehash.replace("#","");

        var url="ListServlet";
        loadlist(url,pagehash);
    }

   其中pagehash=pagehash.replace("#","");这么做的因为是

    var pagehash=window.location.hash;取得的hash值是以#开头的，所以需要replace成正常的值，作为分页的页码传入loadlist函数内，而loadlist函数则真正来完成请求数据的工作，定义为：
    function loadlist(url,param)
    {
       var location=url+"?iPageNo="+param+"";
        window.location.hash=param;
        sendRequest(null,"get",location);
    }
    同样，在请求之前，需要再重新设置一下hash的值，在分页的页码出现后，点击分页的页码就调用loadlist,并传入url和对应的页码，以实现每翻一页就设置这一页的hash值，这样每次返回的页面都会带一个hash值，那么再次刷新的时候，即触发loadpage，获取hash值，传入对应的页面，调用对应的数据，从而从外观上实现保存了Ajax的状态。

总结

从上文可以看出，Ajax依然是无状态的，但是可以通过js操作hash对象来实现Ajax的有状态性，事实上，这种有状态与无状态并没有本质上的区别，只是通过某个标记来重新提交，重新返回数据。那么很显然，该给这个标记即hash赋什么样的值，在一个有多个ajax请求的页面中，还是很有讲究的。
本文以一个简单的Ajax的分页为例，说明了如何保存Ajax的状态，也仅仅是抛砖引玉，也希望读者能从本文中得到启发，灵活应用hash更好地处理Ajax的状态。

完整源代码下载（Netbeans6.5下开发）