HTTP請求封裝：Ajax、RESTful API及Promise

標籤：常見   理解   window   pre   header   www   accept   一個   本文   

一、HTTP請求

　　HTTP即超文字傳輸通訊協定 (HTTP)，用以進行HTML 檔案、 圖片檔案、 查詢結果等的網路傳輸。

• 一個完整的HTTP請求包括：請求行、要求標頭、空行和請求資料（請求資料可以為空白）
• HTTP請求方式有：GET, POST, PUT, HEAD, DELETE, CONNECT, TRACE, OPTIONS

　　請求行和要求標頭裡包含URL、Request Method、Accept、Cookie、User Agent等等資訊。實際使用中，即使只確定一個url，用戶端也會發出完整的HTTP請求。服務端也會返回HTTP響應（Response），包含響應本文以及Status Code、Content Type、Date等等資訊。其中狀態代碼（Status Code）常見的有：

• 200  請求成功
• 400  用戶端請求的語法錯誤，伺服器無法理解
• 401  許可權錯誤，身份認證失敗
• 404  請求的資源（網頁等）不存在
• 500  內部伺服器錯誤 

二、Ajax技術

　　原始的網頁開發方式是前後端合一的，代碼寫在一起，我請求一個地址，伺服器就以相應本文的形式返回給我一個頁面。Ajax的出現就改變了這一現象，我們可以藉此擷取所需的特定資料，在不重載整個頁面的情況下進行資料更新。

var xmlhttp;if (window.XMLHttpRequest) {    xmlhttp = new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼}else {    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 瀏覽器執行代碼}xmlhttp.onreadystatechange = function () {    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;    }}xmlhttp.open("GET", "/try/ajax/ajax_info.txt", true);xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xmlhttp.send();

　　如上例所示，Ajax中最重要的就是XMLHttpRequest對象，它以多種方法來定義HTTP請求、處理HTTP響應：

 

HTTP請求封裝：Ajax、RESTful API及Promise