1. 程式人生 > >HTTP請求封裝:Ajax、RESTful API及Promise

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

active 技術 scrip XML end delete 我們 encode 完整

一、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