javascript之处理Ajax错误

使用Ajax须留心两类错误。它们的区别源于视角的不同。

第一类错误是从XMLHttpRequest对象的角度看到的问题:某些因素阻止了请求发送到服务器,例如DNS无法解析主机名,连接请求被拒绝,或者URL无效。

第二类错误是从应用程序的角度看到的问题:它们发生于请求成功发送至服务器,服务器接受请求,进行处理并生成响应,但该相应并不指向你期望的内容时。例如:如果你请求的URL不存在,这类问题就会发生。

有三种方式可以处理这些错误,如下代码所示:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<body>
    <div>
        <button>Apples</button>
        <button>Cherries</button>
        <button>Bananas</button>
        <button>Cucumber</button>
        <button id="badhost">Bad Host</button>
        <button id="badurl">Bad URL</button>
    </div>
    <div id="target">
        加载内容
    </div>
    <div id="errormsg"></div>
    <div id="statusmsg"></div>
    <script>
        var buttons=document.getElementsByTagName("button");
        for(var i=0;i<buttons.length;i++){
            buttons[i].onclick=handleButtonPress;
        }
        var httpRequest;
        function handleButtonPress(e){
            clearMessages();
            httpRequest=new XMLHttpRequest();
            httpRequest.onreadystatechange=handleResponse;
            httpRequest.onerror=handleError;
            try{
                switch (e.target.id){
                    //处理请求错误:请求已生成,但主机名不能被DNS解析
                    case "badhost":
                        httpRequest.open("GET","http://a.nodomain/doc.html");
                        break;
                    //处理设置错误:向XMLHttpRequest对象传递了错误的数据,比如格式不正确的URL
                    case "badurl":
                        httpRequest.open("GET","http://");
                        break;
                    //处理应用程序错误:请求已成功完成,但当你请求某个不存在的文档时,会获得404的状态码;
                    default:
                        httpRequest.open("GET", e.target.innerHTML+".html");
                        break;
                }
                httpRequest.send();
            }catch(error){
                displayErrorMsg("try/catch",error.message);
            }
        }
        function handleError(e){
            displayErrorMsg("Error event",httpRequest.status+httpRequest.statusText);
        }
        function handleResponse(){
            if(httpRequest.readyState==4){
                var target=document.getElementById("target");
                if(httpRequest.status==200){
                    target.innerHTML=httpRequest.responseText;
                }else{
                    document.getElementById("statusmsg").innerHTML="Status:"+httpRequest.status+" >>"+httpRequest.statusText;
                }
            }
        }
        function displayErrorMsg(src,msg){
            document.getElementById("errormsg").innerHTML=src+": "+msg;
        }
        function clearMessages(){
            document.getElementById("errormsg").innerHTML="";
            document.getElementById("statusmsg").innerHTML="";
        }
    </script>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-19 05:03:07

javascript之处理Ajax错误的相关文章

【JavaScript】jQuery Ajax 实例 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

【温故而知新-Javascript】使用 Ajax

Ajax 是现代Web 应用程序开发的一项关键工具.它让你能向服务器异步发送和接收数据,然后用 Javascript 解析. Ajax 是 Asynchronous JavaScript and XML (异步JavaScript 与XML)的缩写. Ajax 核心规范的名称继承于用来建立和发起请求的 Javascript 对象:XMLHttpRequest .这个规范有两个等级.所有主流浏览器都实现了第一级,它代表了基础级别的功能.第二级扩展了最初的规范,纳入了额外的事件和一些功能来让它更容易

jQuery之ajax错误调试分析

jQuery之ajax错误调试分析 jQuery中把ajax封装得非常好.但是日常开发中,我偶尔还是会遇到ajax报错.这里简单分析一下ajax报错 一般的jQuery用法如下,ajax通过post方式提交"汤姆和老鼠"这段数据到xxx.php文件中.成功后则打印返回的数据,失败则打印错误原因. 1 2 3 4 5 6 7 8 9 10 $.ajax({     url:"xxx.php",     type:"post",     dataty

《JAVASCRIPT高级程序设计》错误处理与调试

一.错误处理 错误处理在程序设计中的重要性是毋庸置疑的,任何有影响力的web应用程序都需要一套完善的错误处理机制.良好的错误机制可以让用户得到提醒,知道发生了什么事. 1.try-catch语句 try-catch语句是javascript处理异常的一种标准方式,它的结构如下: try{ // 把所有可能出现错误的代码放在try语句中 }catch(err){ // 把用于处理错误的块放在catch语句中 // catch块会接受到一个保存错误信息的对象 // 该对象的message属性是唯一一

JavaScript之Ajax-1 Ajax(Ajax原理、Ajax对象属性和方法)

一.Ajax原理 Ajax简介 - Asynchronous JavaScript And Xml 异步的 JavaScript 和 Xml - Ajax 是一种用来改善用户体验的技术,其实质是,使用XMLHttpRequest对象异步地向服务器发送请求 - 服务器返回部分数据,而不是一个完整的页面,以页面无刷新的效果更改页面中的局部内容 Ajax工作原理 获取Ajax对象 二.Ajax对象属性和方法 异步对象的属性和方法 onreadystatechange - onreadystatecha

javascript实现原生ajax的几种方法

自从js有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何办呢?下面和大家分享几种利用javascript实现原生ajax的方法. 首先实现ajax之前必须要创建一个 XMLHttpRequest 对象的.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下: var xmlHttp; function createxmlHttpReques

Ajax错误 “SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 而导致此项操作无法完成” 的归纳总结

最近在做Asp.net项目的时候,是用Ajax访问服务器数据有时候老是莫名其妙的报错:SCRIPT7002: XMLHttpRequest: 网络错误 0x2ef3, 由于出现错误 00002ef3 而导致此项操作无法完成 .在网上查了查引起这个错误是个非常复杂的问题,也就是说有很多因素会引发这个Ajax错误,最蛋疼的是这个Ajax错误发生后,服务器端不会反回任何状态码和错误消息,所以无法直接跟踪和判断到底是什么原因引发了该错误.这里写一篇文章做一个归纳总结,将已知的错误原因总结出来,如果以后知

力所能及之关于用JavaScript方式写ajax,post与get提交的注意区别

     JavaScript方式写ajax,要注意很多,关于post与get提交方式的区别,小狼整理了一点    在jsp文件中,只需要关注ajax中以get方式提交的代码和以post方式提交的代码的区别.以get方式提交的数据要放到请求连接后面,当做url的参数来传递,而以post提交的根据放在send()方法中的数据提交到服务器端

javascript实现原生ajax

自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何办呢?下面和大家分享javascript实现原生ajax的方法. 实现ajax之前必须要创建一个 XMLHttpRequest 对象.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下: var xmlHttp; function createxmlHttpReque