• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > JavaScript >

最大限度利用 JavaScript 和 Ajax 性能(2)

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-02-07点击:

  Ajax 请求彻底改变了传统 web 应用程序的样子,它让 JavaScript 开发人员能创建高度动态化、交互性强、响应迅速的应用程序,就像在桌面应用程序中体验到的那样。结果,在现代的 web 应用程序中,Ajax 请求随处可见。有时候很容易忘记这点,尽管用户看不到页面加载,但 Ajax 请求执行的是完整的 HTTP 请求,它与常规页面加载一样。因此,应该多加关注,减少所使用的 Ajax 请求的数量。

  这方面的一个例子是搜索结果分页。我经常看到在应用程序中,用一个 Ajax 请求以 JSON 数组形式返回搜索结果,再用一个请求返回数据库中结果条数,用于分页逻辑。清单 1 和 清单 2 显示的是这两个请求的基本样例(使用 Prototype 框架)。

  清单 1. 第一个请求:获取表记录

  1. var url = "get_data.php"
  2. var options = { 
  3.     method: "post"
  4.     parameters: {"page":1,"rows":5}, 
  5.     onSuccess: firstCallbackFunction, 
  6.     onFailure: firstCallbackFunction 
  7. new Ajax.Request(url, options); 

   显示的是第二个获取总记录数的请求。

  清单 2.第二个请求:获取总记录数

  1. var url = "get_count.php"
  2. var options = { 
  3.     method: "post"
  4.     parameters: {}, 
  5.     onSuccess: secondCallbackFunction, 
  6.     onFailure: secondCallbackFunction 
  7. new Ajax.Request(url, options); 

  和 显示的是对应的 JSON 格式的 HTTP 请求。

  清单 3. 第一个响应:记录数组

  1.     "records": [ 
  2.         {"id":1,"name":"John","email":"john@example.com"}, 
  3.         {"id":2,"name":"Mary","email":"mary@example.com"}, 
  4.         {"id":3,"name":"Tony","email":"tony@example.com"}, 
  5.         {"id":4,"name":"Emma","email":"emma@example.com"}, 
  6.         {"id":5,"name":"Alan","email":"alan@example.com"
  7.     ] 

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ