最小化 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 请求数量就越重要。

$.when($. ajax (options), $. ajax ({options})).done(function (data1, data2) { //doSomething 二、当未知数量的 ajax .. 本文主要总结一下需要等待多个 ajax 请求 完成后再执行操作的方法最近在做一个英雄榜项目遇到一个问题，需要用到6次 Ajax 来获取各个榜单的数据再进行操作。一、 ajax 嵌套 ajax ，传说中的嵌套金字塔，以及这种方式只能串联发起 ajax 请求 function getDataFun(){$. ajax ({url: "/equip_rank",type:'GET',dataType:'jsonp',success... 在我们平时业务中，经常会遇到一些情况， 请求 频率很高，需要频繁 请求 第三方接口，或者需要频繁操作数据库。比如，如下几个例子：（1）电商系统，秒杀场景 ，需要频繁的去数据库修改库存。（2）业务场景，当前接口需要频繁的调用三方接口，当三方接口有反爬虫，或者有固定时间 请求 次数限制的话，就会导致 请求 报错或者超时。 上面分别是两个 ajax 请求 得到的数据其中，数据的关联性为：上段数据的varName 等于下段数据的variableName! 现在我需要将这些数据 合并 到一个div并将值放入到input便签： 1. 将 Ajax 得到的data数据赋给全局变量 首先自定义一个空的全局变量值： 然后处理 ajax 请求 ： 关键一点就是讲 ajax 的异步加载关闭，更改为同步加... var arr = [ {“id”:“1001”,“name”:“值1”,“value”:“111”}, {“id”:“1001”,“name”:“值1”,“value”:“11111”}, {“id”:“1002”,“name”:“值2”,“value”:“25462”}, {“id”:“1002”,“name”:“值2”,“value”:“23131”}, {“id”:“1002”,“name... 前言  当前的前端开发的优化已经有一套完整的套路，包括js、css优化，HTML优化，首屏数据 请求 优化等，本文主要讨论前端发 送 ajax 请求 的优化思路。浏览器并发 请求 数  浏览器在同一个时间发送的网络 请求 数； 请求 数超过了浏览器的最大并发数时，其余的 请求 只能在后面排队，必须等待前面 的 请求 完成后才能发送，如果一个页面的首屏 请求 数过大就会造成 请求 排队，页面展现时间延长、性能降低，所以需要 合并 js、c 想要实现 ajax 同时调用多个接口，每个接口返回结果保存到一个集合中，然后再进行后续操作该如何实现？一个应用场景应该像这个样子的：接口A返回用户ID，接口B返回用户性别，然后根据用户ID和性别进行后续查询，接口A和接口B是相互独立的回答：使用promise，在jquery的用法如下：使用when方法$.when([$. ajax ('/request1'), $. ajax ('/request2'), $... 在做前端页面优化时，大厂都会通过将多个资源文件以逗号分隔，一次性下载下来，减少 请求 数，从而提升页面加载速度。除了静态资源 请求 外，在页面初始化时，有时我们会用 ajax 发起多个异步 请求 ，若这些 请求 有先后顺序则更难处理，还要确保 请求 A调用结束才可调用 请求 B。一来会增加页面加载时间，还会增加开发难度、影响代码质量。本文讨论 jquery ajax springmvc 如何将多个 请求 封装成一个 请求 。 情景比如：一个load数据的按钮，因为网络比较慢或其他原因，用户一直狂点这个按钮，就会发出N多 ajax 请求 出去。因为网络延迟，多个 ajax 返回的回调处理函数可能会交叉影响，造成意料外的结果。其中一种方式是，对按钮的点击做限制，某个时间段内不允许重复点击，但是治标不治本，网络差的时候，也会发生意外状况。这里想到的是一个目前还相对简单的处理方式，使用jQuery的jQuery ajax Prefilt... Using npm：$ npm install axios --save Using bower:$ bower install axios Using cdn:‘script’ src=“https://unpkg.com/axios/dist/axios.min.js”>‘/script’ http://www.axios-js.com/docs/ axios：它是一个库，基于PROMISE管理的 AJAX 库 提供了对应 请求 方式的方法（get/post function test(){ $. ajax ({ Type:"PSOT",（(默认: "GET") 请求 方式 ("POST" 或 "GET")， 默认为 "GET&amp