细谈可刷新Ajax无刷新应用的构建及原理打赏

分类：编程代码 | 2012-12-22 22:34:20 | 浏览(11,198)

12条评论

想必看标题就有一大部分朋友懵了，其实这个标题完全没有错，我要说的就是目前流行的ajax应用的构建。众所周知，ajax应用的核心就是使用javascript异步调用XmlHttp发送请求并接收数据，然后在前台进行局部刷新，从而达到无刷新改变页面内容的效果。但在很多场合，如果使用大量的ajax，虽然可以使应用使用体验更佳，却避免不了用户因为各种因素而进行的全局刷新。

举个例子，有个文章管理页面，完全是由ajax实现的，在默认情况下显示文章列表，点击某按钮或链接的情况下异步加载了文章添加的界面，此时如果用户刷新了页面，先不说已经写下的内容，页面是不是又回到了列表状态呢？没错，这就是我要说的问题。

其实之前就有过此类困扰，后来为了兼顾各方面灵活性，就采用了多页面的方式，部分地方还使用了iframe。最近又做项目使用了大量ajax，同理，遇到同样的问题。因为之前一直在做rtc的扩展开发，朋友建议我采用rtc的方式，就是ajax点击异步请求的同时，在地址栏加上#xxx形式的参数，随便看了看，以为rtc在这些地方采用了同步的请求，还搜了搜为什么rtc加参数的地方不是？却是#。苦于rtc的中文文档不多，没找到答案。

昨天将应用又改回服务器端处理了，改动的同时忽然想到了#号的作用，其实熟悉html的朋友应该知道，#xxx形式的不是参数，而是指定的页内链接(又称锚点)，这下问题全解决了。可能很多朋友用过最简单的返回顶部方式就是锚点链接了，指定一个头部的锚点或者没有定义的锚点，点击后就会跳回页面顶部，这样的功能刚好满足了我们做ajax的需求，今天又着手按照自己的想法并参考rtc的实现方式，基本上实现了可刷新的无刷新页面，这才发现，原来rtc整个站点依然是ajax异步请求处理的。

说到这里，不得不介绍一下rtc，而说到rtc又不得不提一下dojo以及dojo的widget，没错，rtc的底层实现大部分是以dojo widget形式编写的，dojo widget是dojo提供的图形界面组件库，并且可以自己定义组件，使用方式很灵活，可以完全编程实现，也可以再html标签中指定type供解析并展现，具体dojo widget内容请参见《dojo widget生命周期及使用详解》，这里不多做介绍了。关于rtc，我只知道是ibm的大型项目，涵盖了软件工程各个阶段的管理等功能，这里不多做功能上的介绍，朋友们想了解的可以自己查看相关资料。总之，rtc就是结合dojo widget实现的全异步ajax应用，它的展现方式是无刷新的，但在网络阻塞等情况下，用户刷新后还在原先的页面。在某些区域，用户正在编辑的内容也依然存在，当然，这要用到一些本地存储的功能，也不在本篇介绍范围。

rtc的实现是采用了大量的widget，由于本人对于widget的编写不是很熟悉，所以采用了xhrGet的方式异步请求事先定义好的页面组件，同样实现了ajax页面构建。总体来说，只需多做两步。

第一：异步请求的同时在地址栏url中保留请求参数(之前之后均可)，方法可以选中定义a链接的href="#action=xxx"，也可以定义document.location='#action=xxx'或者window.location='#action=xxx'。至于真正的请求，随便你想怎么做都可以。

第二：定义一个全局的入口，当页面重新载入时，都通过这个入口函数判断location里面是否包含#，是否包含之前所定义的相关参数，并解析出相关参数进行查询、构建页面，其实这个过程只是等于将原有的请求参数全数保留到了地址栏，刷新时再拿来用而已。我的方法是将除了前台组装页面的函数意外的其他请求参数也逐一添加到地址栏，如'#action=xxx&id=1&name=2&age=3'，这样截取后面内容替换#为?，就可以直接拿来做异步Get请求了。

这样，通过锚点链接就实现了可刷新的无刷新应用。其实这个我自己是刚刚琢磨出来，也许看到这篇文章的你早就这么用过，那么还请多多指教，毕竟我随便搜索了一下，发现还是有此类文章的，而且发布日期早在2005年。自愧不如啊。但我的方法毕竟是在没有参考别人文章、教程的情况下自己想到的，还是挺开心，又学会了点新技巧，开心之余还是拿出来给大家分享下吧，高手勿喷。

细谈可刷新Ajax无刷新应用的构建及原理
 文章《细谈可刷新Ajax无刷新应用的构建及原理》二维码
  • 微信打赏
  • 支付宝打赏

已有12条评论

  1. 电子点菜系统

    真是受益匪浅啊

    2013-01-07 17:47 回复
  2. 垃圾站

    哎，看不懂，提前祝你元旦快乐啦！

    2012-12-30 17:28 回复
  3. 润初颜

    这个不太懂呀，圣诞快乐！

    2012-12-25 10:23 回复
  4. 向日葵媒体设计

    面试问我懂Ajax吗，我回答没接触过多少。蛮好随便吹吹的

    2012-12-24 11:21 回复
  5. 篮球比分

    看了内容还是不懂

    2012-12-23 14:10 回复
    • 穷小子

      可以理解为本地存储的一种方式吧

      2012-12-23 17:41 回复
  6. 43度

    弄明白这些的，已经算是高手了，还这么谦虚啊

    2012-12-22 23:18 回复

（必填）

（必填）

（可选）