CODEWITHSUNDEEP
javascriptjqueryajaxperformance
user502052
user502052

Reputation: 15257

How to handle multiple AJAX behaviors in one HTTP request?

I am using jQuery. I have implemented a multipart web page where a list of links* are rendered and each link is periodically updated through AJAX HTTP requests. That is, on the page there are many links of which each one is "timer-triggered" through JavaScript so to perform a HTTP request to the URL pointed by the link itself and, on response success, to replace those links with the retrieved data (the updated links).

This implementation works but it is "performance less" in cases when the page contains many links: one AJAX request is executed per link resulting in many hits to the server. In order to solve that performance issue I thought to make the JavaScript code to execute a unique AJAX request that retrieves the whole set of links and then to replace DOM data.

However I do not know how to implement the "unique request" mostly due to the practice/technique that I have to use and since it is the first time I notice this kind of problem. What can I do? Should I implement a JavaScript handler for event-registration or what?

* In my case link elements are used (<a></a> HTML tags) but those can be anything associated with a URL.

Update after the jfriend00 answer

If the solution is to build a JSON array as jfriend00 describes in his answer then I should implement the page behavior so to update the JSON array dynamically. Since my HTML links are even rendered dynamically along with some JavaScript code then that JavaScript code could update the JSON array dynamically by "registering"/"unregistering" links. If this is a solution in my case, how can I implement it?

I render links as "partial templates" along with the JavaScript code which JavaScript makes those links to execute AJAX requests. HTML-JS code per each link (the mentioned "partial templates") looks like the following:

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

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

Upvotes: 0

Views: 238

Answers (1)

jfriend00
jfriend00

Reputation: 707466

It seems like you can just send some JSON that is your array of links to request and then receive JSON back that is an object where each key is the requested link and the data is the server response for that particular link.

If the links you want to process look something like this:

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

It could look something like this:

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

Updating my answer now that you've disclosed your "partial templates".

To process them all at once, change this type of structure which processes them one at a time:

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

to this which finds them all in the DOM and process them all at once:

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

Upvotes: 1

Related Questions