Ajax:教你如何记住我

最新推荐文章于 2020-12-06 07:18:28 发布

tmw622

最新推荐文章于 2020-12-06 07:18:28 发布

阅读量690

点赞数

分类专栏： Web开发文章标签： ajax javascript xmlhttprequest 服务器 netbeans url

本文链接：https://blog.youkuaiyun.com/tmw622/article/details/4332239

版权

Web开发专栏收录该内容

6 篇文章

订阅专栏

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 代码并没有发生变化，如下图：

从图中可以看出，请求到数据后，查看源代码 <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下开发）