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

ajax处理错误(六)的更多相关文章

  1. 框架基础:ajax设计方案(六)--- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布

    距离上一次博客大概好多好多时间了,感觉再不搞点东西出来,感觉就废了的感觉.这段时间回老家学习驾照,修养,然后7月底来上海求职(面了4家,拿了3家office),然后入职同程旅游,项目赶进度等等一系列的 ...

  2. 前端通信:ajax设计方案(六)--- 全局配置、请求格式拓展和优化、请求二进制类型、浏览器错误搜集以及npm打包发布

    距离上一次博客大概好多好多时间了,感觉再不搞点东西出来,感觉就废了的感觉.这段时间回老家学习驾照,修养,然后7月底来上海求职(面了4家,拿了3家office),然后入职同程旅游,项目赶进度等等一系列的 ...

  3. jQuery ajax请求错误返回status 0和错误error的问题

    上周发现一个jQuery ajax请求错误返回status 0和错误error的问题,responseText是"error",状态码是0而不是200: $.ajax({ type ...

  4. 全局配置一个ajax的错误监控

    全局配置一个ajax的错误监控,比如$(document).ajaxError(function(evt, req, settings){    if(req && (req.stat ...

  5. JQuery.Ajax之错误调试帮助信息

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...

  6. 转:JQuery.Ajax之错误调试帮助信息

    今天发现一篇讲Ajax比较好的文章,汇总下,作为自己的知识储备. 下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. typ ...

  7. asp.net ajax 调用错误解决

    ajax调用aspx页面出现如下错误 前台源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  8. [转]JQuery.Ajax之错误调试帮助信息

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...

  9. JQuery.Ajax之错误调试帮助信息介绍

    下面是Jquery中AJAX参数详细列表: timeout Number 设置请求超时时间(毫秒).此设置将覆盖全局设置. async Boolean (默认: true) 默认设置下,所有请求均为异 ...

随机推荐

  1. 用Maven+IDEA+Eclipse组合获得最好的OpenJML体验

    OpenJML+SMTSolver的形式化验证想必大家都已经尝试过了.大家或许体验的更多的是IDEA上命令行输出版本的OpenJML插件,但真正得到官方支持的完全版OpenJML是它的Eclipse版 ...

  2. Hdoj 1176 免费馅饼 【动态规划】

    免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  3. Unity渲染

    我们先大概了解一下对渲染的优先级有影响的几个因素 1.Camera.Depth 不同相机的深度,在渲染顺序的优先度里面是最高的,Depth越大,渲染的图像越靠前 2.Render.SortingOrd ...

  4. Android Bitmap太大导致ImageView不显示的问题

    今天做我们的智能相冊的项目时,遇到了非常奇妙的问题,当照片太大时,导致ImageView.setImageBitmap不显示,上网上搜了非常多办法.感觉都不是那么靠谱.最后使用了简单粗暴的手段: // ...

  5. moble 设备多指手势识别 (tap , double_tap , pinch)

    function(){ elem.addEventListener('touchstart', start , false) elem.addEventListener('touchend', end ...

  6. 22.允许重复的容器(unordered_multiset)

    #include <string> #include <iostream> #include <unordered_set> using namespace std ...

  7. 提高realm存储速率

    我的数据量大约有2.5M,但是完全存储到数据库差不多用了11秒,有没有比较好的方法提高存储效率 提高realm存储速率 >> android这个答案描述的挺清楚的:http://www.g ...

  8. PostgreSQL相关总结

    源码安装PostgreSQL总结 简明安装步骤(其中prefix指定PostgreSQL的安装目录,该目录与数据目录pgdata和PostgreSQL的源代码包目录均无关) yum -y instal ...

  9. iOS ReactiveCocoa 最全常用API整理(可做为手册查询)

    本文适合有一定RAC基础的童鞋做不时的查询,所以本文不做详细解释. 一.常见类 1.RACSiganl 信号类. RACEmptySignal :空信号,用来实现 RACSignal 的 +empty ...

  10. 洛谷 P4180 【模板】严格次小生成树[BJWC2010] LCT

    首次采用了压行,感觉还不错. Code: // luogu-judger-enable-o2 #include <cstdio> #include <algorithm> #i ...