javascript之處理Ajax錯誤

weixin_34292959發表於2016-04-10
JavaScript

使用Ajax須留心兩類錯誤。它們的差別源於視角的不同。

第一類錯誤是從XMLHttpRequest物件的角度看到的問題：某些因素阻止了請求傳送到server，比如DNS無法解析主機名，連線請求被拒絕。或者URL無效。

第二類錯誤是從應用程式的角度看到的問題：它們發生於請求成功傳送至server，server接受請求。進行處理並生成響應，但該對應並不指向你期望的內容時。比如：假設你請求的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>


相關文章