ajax处理错误

Posted 2020-10-21 Sarah119

使用ajax时必须留心两类错误，他们之间的区别源于视角不同。
一、第一类错误是从XMLHttpRequest对象的角度看到的问题：某些因素阻例如止了请求发送到服务器，例如DNS无法解析主机名，连接请求被拒绝，或者url无效。
二、第二类问题是从应用程序的角度看到的问题而非XMLHttpRequest对象。它们发生于请求成功发送至服务器，服务器接受请求、进行处理并生成响应，但该响应并不指向你期望的内容时。如：如果你请求的URL不存在，这类问题就会发生。

一、处理设置错误

需要处理的第一类问题是向XMLHttpRequest对象传递了错误的数据，比如格式不正确的URL,它们极其容易发生在生成基于用户输入的URL时。这是一种会阻止请求执行的错误，而XMLHttpRequest对象会在发生这类事件时抛出一个错误。这就意味着你需要用一条try...catch语句来围住设置请求的代码，如下所示：

try{
      ...
    httpRequest.open("GET","http://");
    ...
    httpRequest.send();
}catch(error){
    displayErrorMsg("try/catch",error.message)
}

catch子句让你有机会从错误中恢复。可以选择提示用户输入一个值，也可以回退至默认URL，或是简单地丢弃这个请求。

二、处理请求错误

第二类错误发生在请求已生成，但其他方面出错时。注册一个error事件监听器，浏览器就会向你的监听函数发送一个Event对象。httpRequest.onerror=handleError;

function handleError(e){
    displayErrorMsg("Error event",httpRequest.status+httpRequest.statusText)
}

当这类错误发生时，你能从XMLHttpRequest对象获得何种程度的信息取决于浏览器，遗憾的时，大多数情况下你会得到值为0的status和空白的statusText值。
第二个问题是URL和生成请求的脚本具有不同的来源，在默认情况下这是不允许。你通常只能向载入脚本的同源URL发送Ajax请求。浏览器报告这个问题时可能会bu‘jin抛出Error或者触发error事件，不同浏览器处理方式不尽相同。不同浏览器还会在不同的时点检查来源，这就意味着你不一定总是能看到浏览器对同一问题突出显示。你可以使用跨站资源（CORS Cross-Origin Resource Sharing）来绕过同源限制。

三、处理应用程序错误

最后一类错误发生于请求完成（从XMLHttpRequest对象的角度看），但没有返回你想要的数据时。这一过程本身没有错误（因为请求已成功完成），你需要根据status属性来确定发生了什么。当你请求某个不存在的文档时，你会获得404这个状态码，它的意思是服务器无法找到请求的文档，你可以看到我是如何处理200（意思是ok）以外的状态码的：

if(httpRequest.status==200){
    target.innerhtml=httpRequest.responseText;
}else{
    document.getElementById("statusmsg").innerHtml="Status:"+httpRequest.statusText;
}

在这个例子中，我只是简单地显示了status和statusText的值。而在真正的应用程序里，你需要以一种有用且有意义的方式进行恢复（比如显示备用内容或警告用户有问题，具体看哪种更适合应用程序）