How does JavaScript handle AJAX responses in the background?

by

Below the covers, javascript has an event queue. Each time a javascript thread of execution finishes, it checks to see if there is another event in the queue to process. If there is, it pulls it off the queue and triggers that event (like a mouse click, for example).

The native code networking that lies under the ajax call will know when the ajax response is done and an event will get added to the javascript event queue. How the native code knows when the ajax call is done depends upon the implementation. It may be implemented with threads or it may also be event driven itself (it doesn’t really matter). The point of the implementation is that when the ajax response is done, some native code will know it’s done and put an event into the JS queue.

If no Javascript is running at the time, the event will be immediately triggered which will run the ajax response handler. If something is running at the time, then the event will get processed when the current javascript thread of execution finishes. There doesn’t need to be any polling by the javascript engine. When a piece of Javascript finishes executing, the JS engine just checks the event queue to see if there is anything else that needs to run. If so, it pops the next event off the queue and executes it (calling one or more callback functions that are registered for that event). If nothing is in the event queue, then the JS interpreter has free time (garbage collection or idle) until some external agent puts something else in the event queue and wakes it up again.

Because all outside events go through the event queue and no event is ever triggered while javascript is actually running something else, it stays single threaded.

Here are some articles on the details:

More Related Contents:

  1. How can I upload files asynchronously with jQuery?
  2. How to read a local text file?
  3. Suppress Chrome ‘Failed to load resource’ messages in console
  4. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  5. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
  6. POST data in JSON format
  7. Prevent redirection of Xmlhttprequest
  8. Getting BLOB data from XHR request
  9. Pure JavaScript Send POST Data Without a Form
  10. Find out how long an Ajax request took to complete
  11. In JavaScript how do I/should I use async/await with XMLHttpRequest?
  12. How can I take advantage of callback functions for asynchronous XMLHttpRequest?
  13. Understanding XMLHttpRequest over CORS (responseText)
  14. How to read a local text file in the browser?
  15. CORS request not working in Safari
  16. fetch – Missing boundary in multipart/form-data POST
  17. Show a progress bar for downloading files using XHR2/AJAX
  18. How to get response url in XMLHttpRequest?
  19. Fetch API vs XMLHttpRequest
  20. FormData in IE8/9
  21. Cross-site XMLHttpRequest
  22. XMLHttpRequest cannot load, No ‘Access-Control-Allow-Origin’ header is present on the requested resource [duplicate]
  23. Cross-Origin XMLHttpRequest in chrome extensions
  24. How to Detect Cross Origin (CORS) Error vs. Other Types of Errors for XMLHttpRequest() in Javascript
  25. Browser waits for ajax call to complete even after abort has been called (jQuery)
  26. Proper way to catch exception from JSON.parse
  27. IE10/IE11 Abort Post Ajax Request After Clearing Cache with error “Network Error 0x2ef3”
  28. how to find out if XMLHttpRequest.send() worked
  29. Same Origin Policy – AJAX & using Public APIs
  30. Intercept XMLHttpRequest and modify responseText

Leave a Comment