原生js發送ajax請求

時間 2019-11-12

原文原文鏈接

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

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

言歸正傳。從頁面向服務器發送請求，固然少不了ajax方法。此處咱們再也不從頭至尾扯歷史、扯概念，直接上手，一切向生產力看齊。一般發送ajax請求，都會使用jQuery方法，可是大做業裏不容許使用任何js框架，因此此處使用原生js發送請求。前端

概括起來步驟以下：web

1. 創建XMLHttpRequest對象ajax

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

1 <script>
2     var xmlHttp;
3     if(window.XMLHttpRequest){
4         xmlHttp = new XMLHttpRequest();
5     }else{//對IE7及如下版本瀏覽器作兼容
6         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
7     }
8 </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對象，以便在程序中使用。完整的代碼以下：

 1 <script>
 2     var xmlHttp;
 3     if(window.XMLHttpRequest){ 
 4         xmlHttp = new XMLHttpRequest();
 5     }else{
 6         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 7     }
 8     request.open("GET", "http://study.163.com/fafhfg",true);
 9     request.send(null);
10     request.onreadystatechange = function() {
11         if (request.readyState==4) {
12             if (request.status==200) { 
13                 var data = JSON.parse(request.responseText);
14                 if (data.success) { 
15                     document.getElementById("XXX").innerHTML = data.msg;
16                 } else {
17                     document.getElementById("XXX").innerHTML = "出現錯誤：" + data.msg;
18                 }
19             } else {
20                 alert("發生錯誤：" + request.status);
21             }
22         } 
23     }
24 </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版本。