原生js發送ajax請求

        墮落了一陣子了，今天打開博客，發現連登錄的用戶名和密碼都不記得了。2016年已過半，不能再這么晃盪下去了。

        參加了網易微專業-前端攻城獅 培訓，目前進行到大作業開發階段，感覺舉步維艱。但是無論如何，不管結果怎樣，一定要完成這次任務——畢竟是花了銀子的，不能浪費。所以准備寫一個系列博客，把開發過程中遇到的各種小問題記錄下來，也算是從頭到尾做一個開發備案吧。通讀了開發要求，大致做了一下分解，打算拆分成一個個的小模塊，逐個擊破。今天是准備階段，想先試着調一下接口，看看能否調的通。

        言歸正傳。從頁面向服務器發送請求，當然少不了ajax方法。此處我們不再從頭到尾扯歷史、扯概念，直接上手，一切向生產力看齊。通常發送ajax請求，都會使用jQuery方法，但是大作業里不允許使用任何js框架，所以此處使用原生js發送請求。

        歸納起來步驟如下：

        1. 建立XMLHttpRequest對象

        此處要注意有兼容性問題（對IE7及以下瀏覽器寫法有不同），實現代碼如下：

<script>
    var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else{//對IE7及以下版本瀏覽器做兼容
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
</script>

        2. 建立連接，發送請求及參數

       此處用到ajax的一些方法。其實主要是request.open()方法。請求分為"GET"與"POST"兩種形式。"GET"用來獲取服務器返回的一些參數，而"POST"方法則允許用戶修改服務器上的一些數據。

        

<script>
      /*
       *open方法解釋
       *建立請求  共三個參數
       *第一個參數：使用的方法，GET  or  POST
       *第二個參數：url地址
       *第三個參數：同步方式  or  異步方式，一般置為true，為異步；默認也為異步調用
       */
      request.open("GET","http://study.163.com /webDev/dhuai",true);
      /*
       *send方法解釋
       *發送參數，一般針對於POST方法。使用GET方法時，此參數傳null或不傳值
       */
     request.send(null);
</script>

        3. 建立響應信息

        對服務器返回的狀態進行判斷，若成功，則拿到數據，進行后續的事宜。這里主要是對request.readyState和request.status兩個屬性進行判斷。

        request.readyState：狀態碼屬性，枚舉如下：

        0：請求未初始化，open還沒有調用

        1：服務器連接已建立，open已調用

        2：請求已接收，即收到頭信息了

        3：請求處理中，即接收到響應主體了

        4：請求已完成，且響應已就緒，即響應完成了

        request.status：狀態值，比較多，在文章結尾處貼出全部狀態值枚舉，此處先上代碼。

<script>
 2     request.onreadystatechange = function() {
 3         if (request.readyState==4) {//請求完成
 4             if (request.status==200) { //OK  一切正常
 5                 var data = JSON.parse(request.responseText);//將返回的數據放在data變量中
 6                 if (data.success) { 
 7                     document.getElementById("XXX").innerHTML = data.msg;
 8                 } else {
 9                     document.getElementById("XXX").innerHTML = "出現錯誤：" + data.msg;
10                 }
11             } else {
12                 alert("發生錯誤：" + request.status);
13             }
14         } 
15     }
16 </script>

        至此，一個完整的ajax請求已發送，並對返回信息做了處理。上面用到了JSON.parse方法，意為將字符串解析成json對象，以便在程序中使用。完整的代碼如下：

<script>
    var xmlHttp;
    if(window.XMLHttpRequest){ 
        xmlHttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    request.open("GET", "http://study.163.com/fafhfg",true);
    request.send(null);
    request.onreadystatechange = function() {
        if (request.readyState==4) {
            if (request.status==200) { 
                var data = JSON.parse(request.responseText);
                if (data.success) { 
                    document.getElementById("XXX").innerHTML = data.msg;
                } else {
                    document.getElementById("XXX").innerHTML = "出現錯誤：" + data.msg;
                }
            } else {
                alert("發生錯誤：" + request.status);
            }
        } 
    }
</script>

        親測可用，調起了大作業中的第一個接口，並獲取到了數據。悲催的是，谷歌上沒問題，但是在火狐上發生了跨域攔截。火狐對安全性的要求高，所以有這個限制。嘗試了幾種方法，並沒有解決。不過作業文檔中說不考慮跨域問題，所以此處不再深究了。

        附：state狀態值

　  100 - Continue 初始的請求已經接受，客戶應當繼續發送請求的其余部分。（HTTP 1.1新）
　  101 - Switching Protocols 服務器將遵從客戶的請求轉換到另外一種協議（HTTP 1.1新） 

 

　  200 - OK 一切正常，對GET和POST請求的應答文檔跟在后面。
　  201 - Created 服務器已經創建了文檔，Location頭給出了它的URL。
　  202 - Accepted 已經接受請求，但處理尚未完成。
　  203 - Non-Authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，因為使用的是文檔的拷貝，非權威性信息（HTTP 1.1新）。
　  204 - No Content 沒有新文檔，瀏覽器應該繼續顯示原來的文檔。如果用戶定期地刷新頁面，而Servlet可以確定用戶文檔足夠新，這個狀態代碼是很有用的。
　  205 - Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容（HTTP 1.1新）。
　  206 - Partial Content 客戶發送了一個帶有Range頭的GET請求，服務器完成了它（HTTP 1.1新）

　  300 - Multiple Choices 客戶請求的文檔可以在多個位置找到，這些位置已經在返回的文檔內列出。如果服務器要提出優先選擇，則應該在Location應答頭指明。
　  301 - Moved Permanently 客戶請求的文檔在其他地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。
　  302 - Found 類似於301，但新的URL應該被視為臨時性的替代，而不是永久性的。注意，在HTTP1.0中對應的狀態信息是“Moved Temporatily”。出現該狀態代碼時，瀏覽器能夠自動訪問新的URL，因此它是一個很有用的狀態代碼。注意這個狀態代碼有時候可以和301替換使 用。例如，如果瀏覽器錯誤地請求 http://host/~user （缺少了后面的斜杠），有的服務器返回301，有的則返回302。嚴格地說，我們只能假定只有當原來的請求是GET時瀏覽器才會自動重定向。請參見 307。
　  303 - See Other 類似於301/302，不同之處在於，如果原來的請求是POST，Location頭指定的重定向目標文檔應該通過GET提取（HTTP 1.1新）。
　  304 - Not Modified 客戶端有緩沖的文檔並發出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩沖的文檔還可以繼續使用。
　  305 - Use Proxy 客戶請求的文檔應該通過Location頭所指明的代理服務器提取（HTTP 1.1新）。
　  307 - Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重 定向，即使原來的請求是POST，即使它實際上只能在POST請求的應答是303時才能重定向。由於這個原因，HTTP 1.1新增了307，以便更加清除地區分幾個狀態代碼：當出現303應答時，瀏覽器可以跟隨重定向的GET和POST請求；如果是307應答，則瀏覽器只 能跟隨對GET請求的重定向。（HTTP 1.1新）

　  400 - Bad Request 請求出現語法錯誤。
　  401 - Unauthorized 訪問被拒絕，客戶試圖未經授權訪問受密碼保護的 頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示用戶名字/密碼對話框，然后在填寫合適的Authorization頭后再次 發出請求。IIS 定義了許多不同的 401 錯誤，它們指明更為具體的錯誤原因。這些具體的錯誤代碼在瀏覽器中顯示，但不在 IIS 日志中顯示：
　  401.1 - 登錄失敗。
　  401.2 - 服務器配置導致登錄失敗。
　  401.3 - 由於 ACL 對資源的限制而未獲得授權。
　  401.4 - 篩選器授權失敗。
　  401.5 - ISAPI/CGI 應用程序授權失敗。
　  401.7 – 訪問被 Web 服務器上的 URL 授權策略拒絕。這個錯誤代碼為 IIS 6.0 所專用。
　  403 - Forbidden 資源不可用。服務器理解客戶的請求，但拒絕處理它。通常由於服務器上文件或目錄的權限設置導致。禁止訪問：IIS 定義了許多不同的 403 錯誤，它們指明更為具體的錯誤原因：
　  403.1 - 執行訪問被禁止。
　  403.2 - 讀訪問被禁止。
　  403.3 - 寫訪問被禁止。
　  403.4 - 要求 SSL。
　  403.5 - 要求 SSL 128。
　  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。這個錯誤代碼為 IIS 6.0 所專用。
　  403.19 - 不能為這個應用程序池中的客戶端執行 CGI。這個錯誤代碼為 IIS 6.0 所專用。
　  403.20 - Passport 登錄失敗。這個錯誤代碼為 IIS 6.0 所專用。
　  404 - Not Found 無法找到指定位置的資源。這也是一個常用的應答。
　  404.0 -（無） – 沒有找到文件或目錄。
　  404.1 - 無法在所請求的端口上訪問 Web 站點。
　  404.2 - Web 服務擴展鎖定策略阻止本請求。
　  404.3 - MIME 映射策略阻止本請求。

　  405 - Method Not Allowed 請求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）對指定的資源不適用，用來訪問本頁面的 HTTP 謂詞不被允許（方法不被允許）（HTTP 1.1新）
　  406 - Not Acceptable 指定的資源已經找到，但它的MIME類型和客戶在Accpet頭中所指定的不兼容，客戶端瀏覽器不接受所請求頁面的 MIME 類型（HTTP 1.1新）。
　  407 - Proxy Authentication Required 要求進行代理身份驗證，類似於401，表示客戶必須先經過代理服務器的授權。（HTTP 1.1新）
　  408 - Request Timeout 在服務器許可的等待時間內，客戶一直沒有發出任何請求。客戶可以在以后重復同一請求。（HTTP 1.1新）
　  409 - Conflict 通常和PUT請求有關。由於請求和資源的當前狀態相沖突，因此請求不能成功。（HTTP 1.1新）
　  410 - Gone 所請求的文檔已經不再可用，而且服務器不知道應該重定向到哪一個地址。它和404的不同在於，返回407表示文檔永久地離開了指定的位置，而404表示由於未知的原因文檔不可用。（HTTP 1.1新）
　  411 - Length Required 服務器不能處理請求，除非客戶發送一個Content-Length頭。（HTTP 1.1新）
　  412 - Precondition Failed 請求頭中指定的一些前提條件失敗（HTTP 1.1新）。
　  413 – Request Entity Too Large 目標文檔的大小超過服務器當前願意處理的大小。如果服務器認為自己能夠稍后再處理該請求，則應該提供一個Retry-After頭（HTTP 1.1新）。
　  414 - Request URI Too Long URI太長（HTTP 1.1新）。
　  415 – 不支持的媒體類型。
　  416 – Requested Range Not Satisfiable 服務器不能滿足客戶在請求中指定的Range頭。（HTTP 1.1新）
　  417 – 執行失敗。
　  423 – 鎖定的錯誤。

　  500 - Internal Server Error 服務器遇到了意料不到的情況，不能完成客戶的請求。
　  500.12 - 應用程序正忙於在 Web 服務器上重新啟動。
　  500.13 - Web 服務器太忙。
　  500.15 - 不允許直接請求 Global.asa。
　  500.16 – UNC 授權憑據不正確。這個錯誤代碼為 IIS 6.0 所專用。
　  500.18 – URL 授權存儲不能打開。這個錯誤代碼為 IIS 6.0 所專用。
　  500.100 - 內部 ASP 錯誤。
　  501 - Not Implemented 服務器不支持實現請求所需要的功能，頁眉值指定了未實現的配置。例如，客戶發出了一個服務器不支持的PUT請求。
　  502 - Bad Gateway 服務器作為網關或者代理時，為了完成請求訪問下一個服務器，但該服務器返回了非法的應答。 亦說Web 服務器用作網關或代理服務器時收到了無效響應。
　  502.1 - CGI 應用程序超時。
　  502.2 - CGI 應用程序出錯。
　  503 - Service Unavailable 服務不可用，服務器由於維護或者負載過重未能應答。例如，Servlet可能在數據庫連接池已滿的情況下返回503。服務器返回503時可以提供一個Retry-After頭。這個錯誤代碼為 IIS 6.0 所專用。
　  504 - Gateway Timeout 網關超時，由作為代理或網關的服務器使用，表示不能及時地從遠程服務器獲得應答。（HTTP 1.1新） 。
     505 - HTTP Version Not Supported 服務器不支持請求中所指明的HTTP版本。