Javascript 如何在一个HTTP请求中处理多个AJAX行为？

我正在使用jQuery。我实现了一个多部分web页面，其中呈现了一个链接列表*，每个链接通过AJAX HTTP请求定期更新。也就是说，页面上有许多链接，每个链接都是通过JavaScript“计时器触发”的，以便对链接本身指向的URL执行HTTP请求，并且在响应成功时，用检索到的数据（更新的链接）替换这些链接

此实现可以工作，但在页面包含多个链接的情况下，它会“降低性能”：每个链接执行一个AJAX请求，从而导致对服务器的多次点击。为了解决这个性能问题，我想让JavaScript代码执行一个独特的AJAX请求，该请求检索整个链接集，然后替换DOM数据

然而，我不知道如何实现“独特请求”，主要是因为我必须使用的实践/技术，而且这是我第一次注意到此类问题。我能做什么？我应该为事件注册实现JavaScript处理程序吗

---

*在我的例子中，使用了链接元素（

（功能（）{
var link=$（“#link_1”）
...
}());

似乎您可以发送一些JSON，这是您要请求的链接数组，然后接收返回的JSON，这是一个对象，其中每个键都是请求的链接，数据是该特定链接的服务器响应

如果要处理的链接如下所示：

<a class="myLink" href="xxx"></a>

function processLinks()
    // assuming you can specify some CSS selector to select the links in your page that
    // you want to target
    // create an array of URLs for the ajax call
    // and an index of arrays --> DOM objects so we know which DOM object goes
    // with a given URL when processing the ajax results
    var urlArray = [];
    var urlIndex = {};
    var urlArray = $(".templateLink").each(function() {
        urlArray.push(this.href);
        urlIndex[this.href] = this;
    });

    $.ajax({
        url: "your ajax url here",
        data: JSON.stringify(urlArray),
        dataType: "json"
    }).done(function(data) {
        // assumes you get data back as {"url1": data1, "url2": data2, ...}
        $.each(data, function(url, urlData) {
            // get DOM object that goes with this URL
            var domObj = urlIndex[url];
            // apply urlData to domObj here
        })
    });
}

---

更新我的答案，现在你已经披露了你的“部分模板”

要一次处理所有数据，请更改这种一次处理一个数据的结构：

<a href="xxx" id="link_1"></a>
<script>
(function() {
  var link = $('#link_1')
  ...
}());
</script>


<a href="yyy" id="link_2></a>
<script>
(function() {
  var link = $('#link_2')
  ...
}());
</script>

（功能（）{
var link=$（“#link_1”）
...
}());
（功能（）{
var link=$（“#link_2”）
...
}());

这将在DOM中找到它们并同时处理它们：

<a href="xxx" class="templateLink"></a>
<a href="yyy" class="templateLink"></a>
<script>
    // process all the template links
    $(document).ready(processLinks);
</script>

//处理所有模板链接
$（文档）.ready（processLinks）；

我是JavaScript方面的新手。你能举个例子吗？我能动态构建JSON数组吗？我的意思是，当链接呈现在页面上时，我能在JSON数组中以某种方式注册链接吗？也许，每个链接都可以与一些JavaScript代码一起呈现，这些JavaScript代码可以动态地将链接注册到JSON数组中……是吗sible？如果是，如何实现？@user502052-是的，JSON数组可以通过CSS选择器查询从页面内容动态构建。请参阅添加到我的答案中的代码。可能可以使用全局JavaScript数组变量来实现它，当呈现链接和相关的“registerer”JavaScript时，再显示“registerer”JavaScript可以根据您提出的解决方案更新数组。

<a href="xxx" class="templateLink"></a>
<a href="yyy" class="templateLink"></a>
<script>
    // process all the template links
    $(document).ready(processLinks);
</script>