Set timeout on ajax call when using main javascript

Question

I have a JavaScript function to call ajax. Now I need to add a timeout to this function, for example, when I called the service, it took longer than the de-commit time. Ajax call should expire and display the default message. I do not want to use jQuery.

here is my code:

AJAX = function (url, callback, params) { var dt = new Date(); url = (url.indexOf('?') == -1) ? url + '?_' + dt.getTime() : url + '&_' + dt.getTime(); if (url.indexOf('callback=') == -1) { ajaxCallBack(url, function () { if (this.readyState == 4 && this.status == 200) { if (callback) { if (params) { callback(this.responseText, params); } else { callback(this.responseText); } } } }); } else { var NewScript = d.createElement("script"); NewScript.type = "text/javascript"; NewScript.src = url + '&_' + Math.random(); d.getElementsByTagName('head')[0].appendChild(NewScript); } }, ajaxCallBack = function (url, callback) { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = callback; xmlhttp.open("GET", url, true); xmlhttp.send(); } 

Answer 1

Here is an example of how you can handle the timeout:

 var xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET", "http://www.example.com", true); xmlHttp.onreadystatechange=function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { clearTimeout(xmlHttpTimeout); alert(xmlHttp.responseText); } } // Now that we're ready to handle the response, we can make the request xmlHttp.send(""); // Timeout to abort in 5 seconds var xmlHttpTimeout=setTimeout(ajaxTimeout,5000); function ajaxTimeout(){ xmlHttp.abort(); alert("Request timed out"); } 

In IE8, you can add a timeout event handler to the XMLHttpRequest object.

 var xmlHttp = new XMLHttpRequest(); xmlHttp.ontimeout = function(){ alert("request timed out"); } 

Use the javascript framework to do this, although I don’t know why you aren’t using it, do you like the undeserved work? :)

Answer 2

If you just want to add a timeout, you can add it to the first function in three places:

  setTimeout(function() {callback(this.responseText, params)}, 1000) 

And your callback will complete in about 1 second. The second step is the second callback call.

The third place I would suggest is to wrap this function as shown above:

  ajaxCallBack(url, function () { if (this.readyState == 4 && this.status == 200) { if (callback) { if (params) { callback(this.responseText, params); } else { callback(this.responseText); } } } }); 

Usually, when I connect to testing my Internet connection, I rather add throttling to chrome creation tools, such as:

Here is your code with the first approach:

  AJAX = function (url, callback, params) { var dt = new Date(); url = (url.indexOf('?') == -1) ? url + '?_' + dt.getTime() : url + '&_' + dt.getTime(); if (url.indexOf('callback=') == -1) { ajaxCallBack(url, function () { if (this.readyState == 4 && this.status == 200) { if (callback) { if (params) { console.log(new Date()); setTimeout(function() {callback(this.responseText, params)}, 2000); } else { console.error((new Date()).getSeconds()); setTimeout(function() {callback(this.responseText)}, 2000); } } } }); } else { var NewScript = d.createElement("script"); NewScript.type = "text/javascript"; NewScript.src = url + '&_' + Math.random(); d.getElementsByTagName('head')[0].appendChild(NewScript); } }, ajaxCallBack = function (url, callback) { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = callback; xmlhttp.open("GET", url, true); xmlhttp.send(); } AJAX('http://ip.jsontest.com/', function() {console.error((new Date()).getSeconds()); }); 

Answer 3

Maybe the answer to this question will help. XMLHttpRequest Timeout

since from what I understand you need to set a timeout for xmlhttprequest, you can use xmlhttp.timeout = /*some number*/