Http请求状态及jquery ajax请求异常处理

上一周调优一个项目的Js部分,其中一个严重的问题就是在页面初始化数据时,没有对异常进行处理,

导致Loading一直在等待中,无提示无处理。在用户体验上很不好,即使网络条件无法保证,在出错的情况下,也应该

提示一下用户:比如Gmail就做的很不错。

国内网络环境链接Gmail是不是的就出错。只有能打开gmail,当我们进行查询时,如果GFW给拦截了,Google就会出现提示:

1.正在加载中......

091108_jJU8_1157906.jpg

2.再不行,就会出现,我们正在努力的加载中。

3 最好还不行,就报异常:加载失败,稍后再试。或者使用纯html简单方式浏览。

这就是人性化。

参考另一篇文章: [网页打开慢,真是框架的事情吗?]  


jquery用ajax请求服务的时候,异常情况和http直接请求是一样一样的。

错误代码如下:

XMLHttpRequest.status属性:一些错误代码
HTTP 
1xx-信息提示 
这些状态代码表示临时的响应。客户端在收到常规响应之前,应准备接收一个或多个1xx响应。 
100-继续。 
101-切换协议。 
2xx-成功 
这类状态代码表明服务器成功地接受了客户端请求。 
200-确定。客户端请求已成功。 
201-已创建。 
202-已接受。 
203-非权威性信息。 
204-无内容。 
205-重置内容。 
206-部分内容。 
3xx-重定向 
客户端浏览器必须采取更多操作来实现请求。例如,浏览器可能不得不请求服务器上的不同的页面,或通过代理服务器重复该请求。 
301-对象已永久移走,即永久重定向。 
302-对象已临时移动。 
304-未修改。 
307-临时重定向。 
4xx-客户端错误 
发生错误,客户端似乎有问题。例如,客户端请求不存在的页面,客户端未提供有效的身份验证信息。400-错误的请求。 
401-访问被拒绝。IIS定义了许多不同的401错误,它们指明更为具体的错误原因。这些具体的错误代码在浏览器中显示,但不在IIS日志中显示: 
401.1-登录失败。 
401.2-服务器配置导致登录失败。 
401.3-由于ACL对资源的限制而未获得授权。 
401.4-筛选器授权失败。 
401.5-ISAPI/CGI应用程序授权失败。 
401.7–访问被Web服务器上的URL授权策略拒绝。这个错误代码为IIS6.0所专用。 
403-禁止访问:IIS定义了许多不同的403错误,它们指明更为具体的错误原因: 
403.1-执行访问被禁止。 
403.2-读访问被禁止。 
403.3-写访问被禁止。 
403.4-要求SSL。 
403.5-要求SSL128。 
403.6-IP地址被拒绝。 
403.7-要求客户端证书。 
403.8-站点访问被拒绝。 
403.9-用户数过多。 
403.10-配置无效。 
403.11-密码更改。 
403.12-拒绝访问映射表。 
403.13-客户端证书被吊销。 
403.14-拒绝目录列表。 
403.15-超出客户端访问许可。 
403.16-客户端证书不受信任或无效。 
403.17-客户端证书已过期或尚未生效。 
403.18-在当前的应用程序池中不能执行所请求的URL。这个错误代码为IIS6.0所专用。 
403.19-不能为这个应用程序池中的客户端执行CGI。这个错误代码为IIS6.0所专用。 
403.20-Passport登录失败。这个错误代码为IIS6.0所专用。 
404-未找到。 
404.0-(无)–没有找到文件或目录。 
404.1-无法在所请求的端口上访问Web站点。 
404.2-Web服务扩展锁定策略阻止本请求。 
404.3-MIME映射策略阻止本请求。 
405-用来访问本页面的HTTP谓词不被允许(方法不被允许) 
406-客户端浏览器不接受所请求页面的MIME类型。 
407-要求进行代理身份验证。 
412-前提条件失败。 
413–请求实体太大。 
414-请求URI太长。 
415–不支持的媒体类型。 
416–所请求的范围无法满足。 
417–执行失败。 
423–锁定的错误。 
5xx-服务器错误 
服务器由于遇到错误而不能完成该请求。 
500-内部服务器错误。 
500.12-应用程序正忙于在Web服务器上重新启动。 
500.13-Web服务器太忙。 
500.15-不允许直接请求Global.asa。 
500.16–UNC授权凭据不正确。这个错误代码为IIS6.0所专用。 
500.18–URL授权存储不能打开。这个错误代码为IIS6.0所专用。 
500.100-内部ASP错误。 
501-页眉值指定了未实现的配置。 
502-Web服务器用作网关或代理服务器时收到了无效响应。 
502.1-CGI应用程序超时。 
502.2-CGI应用程序出错。application. 
503-服务不可用。这个错误代码为IIS6.0所专用。 
504-网关超时。 
505-HTTP版本不受支持。 
FTP 
1xx-肯定的初步答复 
这些状态代码指示一项操作已经成功开始,但客户端希望在继续操作新命令前得到另一个答复。 
110重新启动标记答复。 
120服务已就绪,在nnn分钟后开始。 
125数据连接已打开,正在开始传输。 
150文件状态正常,准备打开数据连接。 
2xx-肯定的完成答复 
一项操作已经成功完成。客户端可以执行新命令。200命令确定。 
202未执行命令,站点上的命令过多。 
211系统状态,或系统帮助答复。 
212目录状态。 
213文件状态。 
214帮助消息。 
215NAME系统类型,其中,NAME是AssignedNumbers文档中所列的正式系统名称。 
220服务就绪,可以执行新用户的请求。 
221服务关闭控制连接。如果适当,请注销。 
225数据连接打开,没有进行中的传输。 
226关闭数据连接。请求的文件操作已成功(例如,传输文件或放弃文件)。 
227进入被动模式(h1,h2,h3,h4,p1,p2)。 
230用户已登录,继续进行。 
250请求的文件操作正确,已完成。 
257已创建“PATHNAME”。 
3xx-肯定的中间答复 
该命令已成功,但服务器需要更多来自客户端的信息以完成对请求的处理。331用户名正确,需要密码。 
332需要登录帐户。 
350请求的文件操作正在等待进一步的信息。 
4xx-瞬态否定的完成答复 
该命令不成功,但错误是暂时的。如果客户端重试命令,可能会执行成功。421服务不可用,正在关闭控制连接。如果服务确定它必须关闭,将向任何命令发送这一应答。 
425无法打开数据连接。 
426Connectionclosed;transferaborted. 
450未执行请求的文件操作。文件不可用(例如,文件繁忙)。 
451请求的操作异常终止:正在处理本地错误。 
452未执行请求的操作。系统存储空间不够。 
5xx-永久性否定的完成答复 
该命令不成功,错误是永久性的。如果客户端重试命令,将再次出现同样的错误。500语法错误,命令无法识别。这可能包括诸如命令行太长之类的错误。 
501在参数中有语法错误。 
502未执行命令。 
503错误的命令序列。 
504未执行该参数的命令。 
530未登录。 
532存储文件需要帐户。 
550未执行请求的操作。文件不可用(例如,未找到文件,没有访问权限)。 
551请求的操作异常终止:未知的页面类型。 
552请求的文件操作异常终止:超出存储分配(对于当前目录或数据集)。 
553未执行请求的操作。不允许的文件名。 
常见的FTP状态代码及其原因 
150-FTP使用两个端口:21用于发送命令,20用于发送数据。状态代码150表示服务器准备在端口20上打开新连接,发送一些数据。 
226-命令在端口20上打开数据连接以执行操作,如传输文件。该操作成功完成,数据连接已关闭。 
230-客户端发送正确的密码后,显示该状态代码。它表示用户已成功登录。 
331-客户端发送用户名后,显示该状态代码。无论所提供的用户名是否为系统中的有效帐户,都将显示该状态代码。 
426-命令打开数据连接以执行操作,但该操作已被取消,数据连接已关闭。 
530-该状态代码表示用户无法登录,因为用户名和密码组合无效。如果使用某个用户帐户登录,可能键入错误的用户名或密码,也可能选择只允许匿名访问。如果使用匿名帐户登录,IIS的配置可能拒绝匿名访问。 
550-命令未被执行,因为指定的文件不可用。例如,要GET的文件并不存在,或试图将文件PUT到您没有写入权限的目录。


Jquery以及extjs处理都是类似的。

对jQuery 来说,超时可以直接设置timeout参数,并在error事件中捕获第二个参数,如果是“timeout”则表明捕获了超时事件,非常清楚。

例子:

$.ajax({
       type: "POST",
       contentType: "application/json",
       url: "../ws/MyService.asmx/test",
       data: '{"email":"'+email+'"}',
       timeout: 30000, //超时时间:30秒
       dataType: 'json',
       error: function(XMLHttpRequest, textStatus, errorThrown){
       //TODO: 处理status, http status code,超时 408
       // 注意:如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能
             //是"timeout", "error", "notmodified" 和 "parsererror"。
       },
       success: function(result) {
         // TODO: check result
       }
});

     另外,error事件返回的第一个参数XMLHttpRequest有一些有用的信息:
XMLHttpRequest.readyState: 状态码
 0 - (未初始化)还没有调用send()方法
 1 - (载入)已调用send()方法,正在发送请求
 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
 3 - (交互)正在解析响应内容
 4 - (完成)响应内容解析完成,可以在客户端调用了


ExtJS 的默认超时时间是30s,超过就会ajax请求失败,http status code 408。

设置ExtJS的超时时间方法需要用Ext.data.Connection 对象,并捕捉requestexception事件,例子:

var conn=new Ext.data.Connection({
   url: "../ws/MyService.asmx/test",
   timeout : 60000, //自定义超时时间,这里是60秒 (默认30s)
   autoAbort : false,
   disableCaching : true,
   method : "GET"
});
var proxy = new Ext.data.HttpProxy(conn);
proxy.getConnection().on("requestcomplete", function(sender, response, options){   
   //成功,response.status = 200, response.statusText = 'OK'
});
proxy.getConnection().on("requestexception", function(sender, response, options){
   //异常,捕捉 esponse.status  ( http status code 代码 )和 response.statusText
});
   
var store = new Ext.data.Store({
   proxy: proxy,
   reader: myReader, //需要另外定义一个reader
   baseParams: {myargument:'myargumentValue'}, //改成你的参数名和值
   remoteSort: false
});   
store.load();

编者注:

1、增加异常处理后,再加上其他优化手段,用户体验效果明显增强了

2.异常,不管在什么情况下,都是要处理。不管是后台代码好处,还是js不好处理。都是要处理的。

转载于:https://my.oschina.net/u/1157906/blog/301388

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery是一个流行的JavaScript库,它简化了JavaScript编程的许多任务。其中一个常用的功能是通过Ajax发送HTTP请求。 使用jQueryAjax功能,可以通过异步方式从服务器获取数据,而无需刷新整个页面。以下是使用jQuery进行Ajax请求的基本步骤: 1. 引入jQuery库:在HTML文件中,首先需要引入jQuery库。可以通过以下方式引入: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 2. 发送Ajax请求:使用`$.ajax()`函数发送Ajax请求。该函数接受一个包含请求参数的对象作为参数。以下是一个示例: ```javascript $.ajax({ url: 'http://example.com/api/data', // 请求的URL method: 'GET', // 请求方法(GET、POST等) data: { // 请求参数(可选) param1: 'value1', param2: 'value2' }, success: function(response) { // 请求成功时的回调函数 console.log(response); }, error: function(xhr, status, error) { // 请求失败时的回调函数 console.error(error); } }); ``` 在上述示例中,`url`指定了请求的URL,`method`指定了请求方法(GET、POST等),`data`指定了请求参数(可选)。`success`是请求成功时的回调函数,`error`是请求失败时的回调函数。 3. 处理响应:在成功的回调函数中,可以处理从服务器返回的响应数据。在上述示例中,响应数据通过`response`参数传递给回调函数。 以上是使用jQuery进行Ajax请求的基本步骤。你可以根据具体需求设置更多的参数,如请求头、超时时间等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值