Question

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

此实现有效但在页面包含许多链接的情况下“性能较低”：每个链接执行一个AJAX请求，导致服务器有很多命中。为了解决这个性能问题，我想让JavaScript代码执行一个唯一的AJAX请求，检索整个链接集，然后替换DOM数据。

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

*在我的情况下，使用链接元素（<a></a> HTML标记），但这些元素可以是与URL相关联的任何内容。

jfriend00 回答后

更新

如果解决方案是构建一个JSON数组，因为 jfriend00 在他的回答中描述了那么我应该实现页面行为，以便动态更新JSON数组。由于我的HTML链接甚至与一些JavaScript代码一起动态呈现，因此该JavaScript代码可以通过“注册”/“取消注册”链接动态更新JSON数组。如果这是我的解决方案，我该如何实现呢？

我将链接呈现为“部分模板”以及JavaScript使这些链接执行AJAX请求的JavaScript代码。每个链接的HTML-JS代码（提到的“部分模板”）如下所示：

<a href="xxx" id="link_1"></a>

<script type="text/javascript">
  (function() {
    var link = $('#link_1')
    ...
  }());
</script>

Answer 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
        })
    });
}

现在，您已经披露了部分模板＆＃34;

，请更新我的答案。

要一次处理所有这些，请更改这种类型的结构，一次处理一个结构：

<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>

，在DOM中查找所有内容并一次处理所有内容：

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

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

1 个答案: