I am creating some plugins that use ajax to fetch the information for the page. Now there are different plugins that do different functions.

All the plugins need to be used as stand-alone, but I also want to add the functionality that they can work nice together.

All the different plugins have there own JavaScript file, and functions. This is no problem in terms of HTTP requests, because most people have plugins that merge all the files into one when the website is deplyed.

--

Now for my question. As I say the different plugins get different parts of the website. For example, post counts, user tweets, user - statistics, post ments.

Now can I specify the priority on which this information is called from the website. I can not merge them all into one ajax call I think, because they are all individual working ponents.

Anyone know a good solution how I can spicify to first get the ments, after that the statistics, etc, etc.

My JS framework of choice is jQuery.

I am creating some plugins that use ajax to fetch the information for the page. Now there are different plugins that do different functions.

All the plugins need to be used as stand-alone, but I also want to add the functionality that they can work nice together.

All the different plugins have there own JavaScript file, and functions. This is no problem in terms of HTTP requests, because most people have plugins that merge all the files into one when the website is deplyed.

--

Now for my question. As I say the different plugins get different parts of the website. For example, post counts, user tweets, user - statistics, post ments.

Now can I specify the priority on which this information is called from the website. I can not merge them all into one ajax call I think, because they are all individual working ponents.

Anyone know a good solution how I can spicify to first get the ments, after that the statistics, etc, etc.

My JS framework of choice is jQuery.

• javascript
• jquery
• ajax

• 1 You must use callback functions in Ajax request – fliptheweb Commented Nov 14, 2011 at 19:15

2 Answers 2

One general method would be to implement a priority queue for pending AJAX calls. Each plugin would place their call on the queue, with an associated priority on the call, and an AJAX queue processor would work through the queue in order of priority.

Here's an example of a jQuery priority queue plugin:

http://benalman./code/projects/jquery-message-queuing/docs/files/jquery-ba-jqmq-js.html

Also, here's one already implemented for AJAX requests:

Sequencing ajax requests

2020 update

priority hints are on hold for now

2018 answer

It's still not possible to set explicit priorities on XMLHttpRequest nor window.fetch calls, but there's a new API proposal driven by Google called "Priority Hints".

https://wicg.github.io/priority-hints/#examples

As of now it's not supported by any browser; Chrome 70 has shipped an experimental implementation behind the flag.

Reduce network contention from non-critical Fetch API requests

Priority Hints can be used to lower the priority of non-critical Fetch API requests to avoid them contending with more important ones.

A news site making a critical Fetch API request for article content might end up contending with requests for less important resources like related content.

<script>
 // Critical Fetch request for article content 
 fetch('/api/articles.json').then(/*...*/)

 // Request for related content contending with the above request 
 fetch('/api/related.json').then(/*...*/)
</script>

By using the importance attribute on the second Fetch request, we can hint that the priority of that request is low, reducing the chances of it contending with the Fetch request for article content. We can also explicitly state the priority of the first request is high so that browsers where Fetch requests do not already have a high priority know that it is important to the page.

<script>
 // Critical Fetch request for article content 
 fetch('/api/articles.json', { importance: 'high' }).then(/*...*/)
 
 // Request for related content now reduced in priority
 // reducing the opportunity for contention
 fetch('/api/related.json', { importance: 'low' }).then(/*...*/)
</script>