您的位置：首页 > 其它

合并ajax请求

2016-04-13 22:52 204 查看

最小化 Ajax 请求

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

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

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

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

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

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

var url = "get_count.php";
var options = {
method: "post",
parameters: {},
onSuccess: secondCallbackFunction,
onFailure: secondCallbackFunction
}
new Ajax.Request(url, options);

清单 3 和清单
4 显示的是对应的 JSON 格式的 HTTP 请求。

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

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

清单 4 显示的是报告总记录数的响应。

清单 4. 第二个响应：总记录数

{"total_records": 95}

将这两个 Ajax 请求分开是浪费资源，它们可以合并到一个请求中，并生成以下清单 5 的响应。

清单 5. 高效响应：记录总数和数组

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

这样做不仅使所需的 HTTP 请求和响应更少，而且也减少了用于响应 Ajax 请求的服务器端脚本。

本例演示非常简单 — 应用程序越复杂，减少所用的 Ajax 请求数量就越重要。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航