JQuery的Ajax – 如何检测networking连接错误时，进行Ajax调用

我有一些JavaScript JQuery代码，每5分钟做一个Ajax调用服务器，这是为了保持服务器会话活着，并保持用户login。我在JQuery中使用$.ajax()方法。 这个函数似乎有一个“错误”属性，我试图在用户的互联网连接断开的情况下使用KeepAlive脚本继续运行。 我使用下面的代码：

 var keepAliveTimeout = 1000 * 10; function keepSessionAlive() { $.ajax( { type: 'GET', url: 'http://www.mywebapp.com/keepAlive', success: function(data) { alert('Success'); setTimeout(function() { keepSessionAlive(); }, keepAliveTimeout); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert('Failure'); setTimeout(function() { keepSessionAlive(); }, keepAliveTimeout); } }); } 

当我运行它时，我会在屏幕上每隔10秒在警报框中popup“成功”，这很好。 但是，只要我拔掉网线，我什么也没有，我期待着错误的function被调用，看到一个“失败”提示框，但没有任何反应。

我是否正确地认为“错误”function只适用于从服务器返回的非'200'状态代码？ 在进行Ajax调用时，有没有办法检测networking连接问题？

Answer 1

 // start snippet error: function(XMLHttpRequest, textStatus, errorThrown) { if (XMLHttpRequest.readyState == 4) { // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText) } else if (XMLHttpRequest.readyState == 0) { // Network error (ie connection refused, access denied due to CORS, etc.) } else { // something weird is happening } } //end snippet 

Answer 2

您应该添加： timeout: <number of miliseconds>,在$.ajax({})内的某处。 此外， cache: false,可能会在一些情况下帮助。

$ .ajax是有据可查的 ，你应该检查那里的选项，可能会发现一些有用的东西。

祝你好运！

Answer 3

由于我不能重复的问题，我只能build议尝试在ajax调用超时。 在jQuery中，您可以使用$ .ajaxSetup来设置它（并且它对于所有的$ .ajax调用来说都是全局的），或者您可以为您的调用专门设置它，如下所示：

 $.ajax({ type: 'GET', url: 'http://www.mywebapp.com/keepAlive', timeout: 15000, success: function(data) {}, error: function(XMLHttpRequest, textStatus, errorThrown) {} }) 

jQuery将在您的通话中注册一个15秒的超时时间; 之后，没有从服务器jQuery的http响应代码将执行错误callback与textStatus值设置为“超时”。 有了这个，你至less可以停止ajax呼叫，但是你将无法区分真正的networking问题和连接丢失。

Answer 4

我在这种情况下看到的是，如果我拉客户端机器的网线并进行调用，则调用ajax成功处理程序（为什么，我不知道），data参数是一个空string。 所以，如果你把真正的error handling分解出来，你可以这样做：

 function handleError(jqXHR, textStatus, errorThrown) { ... } jQuery.ajax({ ... success: function(data, textStatus, jqXHR) { if (data == "") handleError(jqXHR, "clientNetworkError", ""); }, error: handleError }); 

Answer 5

如果您正在进行跨域调用使用Jsonp。 否则错误不会返回。

Answer 6

使用

 xhr.onerror = function(e){ if (XMLHttpRequest.readyState == 4) { // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText) selFoto.erroUploadFoto('Erro HTTP: '+XMLHttpRequest.statusText); } else if (XMLHttpRequest.readyState == 0) { // Network error (ie connection refused, access denied due to CORS, etc.) selFoto.erroUploadFoto('Erro de rede:'+XMLHttpRequest.statusText); } else { selFoto.erroUploadFoto('Erro desconhecido.'); } }; 

（更多代码在下面 – 上传图像示例）

 var selFoto = { foto: null, upload: function(){ LoadMod.show(); var arquivo = document.frmServico.fileupload.files[0]; var formData = new FormData(); if (arquivo.type.match('image.*')) { formData.append('upload', arquivo, arquivo.name); var xhr = new XMLHttpRequest(); xhr.open('POST', 'FotoViewServlet?acao=uploadFoto', true); xhr.responseType = 'blob'; xhr.onload = function(e){ if (this.status == 200) { selFoto.foto = this.response; var url = window.URL || window.webkitURL; document.frmServico.fotoid.src = url.createObjectURL(this.response); $('#foto-id').show(); $('#div_upload_foto').hide(); $('#div_master_upload_foto').css('background-color','transparent'); $('#div_master_upload_foto').css('border','0'); Dados.foto = document.frmServico.fotoid; LoadMod.hide(); } else{ erroUploadFoto(XMLHttpRequest.statusText); } if (XMLHttpRequest.readyState == 4) { selFoto.erroUploadFoto('Erro HTTP: '+XMLHttpRequest.statusText); } else if (XMLHttpRequest.readyState == 0) { selFoto.erroUploadFoto('Erro de rede:'+XMLHttpRequest.statusText); } }; xhr.onerror = function(e){ if (XMLHttpRequest.readyState == 4) { // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText) selFoto.erroUploadFoto('Erro HTTP: '+XMLHttpRequest.statusText); } else if (XMLHttpRequest.readyState == 0) { // Network error (ie connection refused, access denied due to CORS, etc.) selFoto.erroUploadFoto('Erro de rede:'+XMLHttpRequest.statusText); } else { selFoto.erroUploadFoto('Erro desconhecido.'); } }; xhr.send(formData); } else{ selFoto.erroUploadFoto(''); MyCity.mensagens.push('Selecione uma imagem.'); MyCity.showMensagensAlerta(); } }, erroUploadFoto : function(mensagem) { selFoto.foto = null; $('#file-upload').val(''); LoadMod.hide(); MyCity.mensagens.push('Erro ao atualizar a foto. '+mensagem); MyCity.showMensagensAlerta(); } }; 

Answer 7

这是我做了什么来提醒用户，以防万一他们的networking发生故障或页面更新失败：

1. 我在当前时间的页面上有一个div标签，每10秒更新一次这个标签。 它看起来像这样： <div id="reloadthis">22:09:10</div>

2. 在更新div标签中的时间的javascript函数结束时，我把这个（在时间更新之后用AJAX）：

    var new_value = document.getElementById('reloadthis').innerHTML; var new_length = new_value.length; if(new_length<1){ alert("NETWORK ERROR!"); } 

而已！ 当然，你可以用任何你想要的东西replace警报部分。 希望这可以帮助。

Answer 8

你尝试过吗？

 $(document).ajaxError(function(){ alert('error'); } 

这应该处理所有的AjaxErrors。 我在这里find了 。 在那里你也可以将这些错误写入你的萤火虫控制台。