使用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的值。而在真正的应用程序里,你需要以一种有用且有意义的方式进行恢复(比如显示备用内容或警告用户有问题,具体看哪种更适合应用程序)