Reuse XMLHttpRequest object or create a new one?

by

You misunderstood W3School’s recommendation. I’ll highlight the relevant part:

If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task.

It says that you use one AJAX function to fetch requests. This function will deal with the inconsistencies between IE and other browsers. XMLHttpRequest in standard-compliant browsers, and ActiveXObject in IE.

I recommend to use multiple XHR objects. With one global xhr object, your application can only deal with one request at a given time. It’s also error-prone (eg. XMLHttpRequest launches multiple times without initiating the onreadystatechange function).

W3schools meant something like:

function createXHR() {
    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            return new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
}
var xhr = createXHR();
xhr.open('get', '/test', true);
xhr.send();

Although it’s better to create a function which handles requests, such as jQuery.ajax.

More Related Contents:

  1. Origin is not allowed by Access-Control-Allow-Origin
  2. Add a “hook” to all AJAX requests on a page
  3. Upload file with Ajax XMLHttpRequest
  4. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  5. What is the cleanest way to get the progress of JQuery ajax request?
  6. XMLHttpRequest status 0 (responseText is empty)
  7. Why am I seeing an “origin is not allowed by Access-Control-Allow-Origin” error here? [duplicate]
  8. Is onload equal to readyState==4 in XMLHttpRequest?
  9. How to upload a file using jQuery.ajax and FormData
  10. How can I send the “&” (ampersand) character via AJAX?
  11. What do the different readystates in XMLHttpRequest mean, and how can I use them?
  12. Show a progress bar for downloading files using XHR2/AJAX
  13. WebKit “Refused to set unsafe header ‘content-length'”
  14. Fetch API vs XMLHttpRequest
  15. Intercept fetch() API requests and responses in JavaScript
  16. Cross-site XMLHttpRequest
  17. How can I modify the XMLHttpRequest responsetext received by another function?
  18. XMLHttpRequest to Post HTML Form
  19. Get HTML code using JavaScript with a URL
  20. Is it possible for XHR HEAD requests to not follow redirects (301 302)
  21. Cross-Origin XMLHttpRequest in chrome extensions
  22. How to Detect Cross Origin (CORS) Error vs. Other Types of Errors for XMLHttpRequest() in Javascript
  23. XMLHttpRequest 206 Partial Content
  24. Ajax – 500 Internal Server Error
  25. responseXML always null
  26. Microsoft Edge blocked cross-domain requests sent to IPs in same private network CIDR
  27. IE10/IE11 Abort Post Ajax Request After Clearing Cache with error “Network Error 0x2ef3”
  28. Same Origin Policy – AJAX & using Public APIs
  29. Phantom JS synchronous AJAX request : NETWORK_ERR: XMLHttpRequest Exception 101
  30. Intercept XMLHttpRequest and modify responseText

Leave a Comment