前端校招準備--Ajax原理及其實現

binaryTree 發(fā)布于2019-08-23 13:45 / 1027人閱讀

摘要：實現局部刷新的原理是通過對象來向服務器發(fā)送異步請求，通過操作相應的來更新頁面。在以及都內建了對象，但是和是使用對象。參考文章同源策略及其規(guī)避方法詳解技術原理

前言

?我們在請求數據的時候，往往會使用到ajax，而且一般都是通過引入jQuery庫，再使用。但是，如果我們想直接使用ajax怎么辦呢，這個時候就可以自己寫一個ajax，剛一聽可能會覺得很難，但是看完我的文章后你肯定就會覺得原來這么簡單~

正文 Ajax介紹

?想象一個場景，你在淘寶上看中一件物品，想加入購物車，但是呢，你點擊添加購物車后，整個頁面刷新了，你之前看的物品記錄也沒有了，這樣是不是很煩（這是因為沒有使用ajax更新數據時，會請求整個頁面的數據，重新渲染）。

?碰到這種情況，ajax就出場了，有了它，我們可以在點擊添加商品后，只更新購物車中的物品數量就可以了，根本就不需要更新整個頁面，用官方一點的話來說，就是可以控制網頁的局部刷新。

?ajax實現局部刷新的原理是通過XmlHttpRequest對象來向服務器發(fā)送異步請求，通過js操作相應的DOM來更新頁面。

Ajax實現過程

?ajax實現異步請求的過程可以分為以下幾個步驟：

創(chuàng)建XmlHttpRequest對象

初始化參數

發(fā)送信息

接收信息

?從上面的介紹可以看出，ajax請求的核心在于XmlHttpRequest對象,所以了解了XmlHttpRequest的機制就相當于知道了ajax的執(zhí)行過程。

?在Chrome,Firefox,Opera,Safari以及IE7+都內建了XmlHttpRequest對象，但是IE5和IE6是使用ActiveX對象。

?方法：

abort(): 取消現在的連接，可以將XmlHttpRequest對象的狀態(tài)值重置為0

open(): 初始化http的請求參數，但是不發(fā)送請求

send(): 發(fā)送http請求

setRequestHeader()：給一個打開但是未發(fā)送的請求設置參數

?屬性：

onreadystateChange: 狀態(tài)改變觸發(fā)的回調函數

reposeText: 從服務器返回數據的字符串格式

reposeXML: 從服務器返回兼容DOM的文檔數據對象

status: 從服務器返回的狀態(tài)碼

statusText: 伴隨狀態(tài)碼返回的信息，如status=200時，statusText="OK"

readyState: 對象狀態(tài)值

  0表示XmlHttpRequest對象已創(chuàng)建或者已經被abort()方法重置
  1表示對象已經初始化，但是請求還未發(fā)送（調用了open()方法，send()方法還沒有調用）
  2表示請求已經發(fā)送，沒有接收到響應信息（sed()方法已經被調用）
  3表示已經接收到了所有的響應頭，響應體開始接收但未完成
  4表示響應信息已經全部接收

問題: http狀態(tài)碼（status）和對象的狀態(tài)值(readyState)有什么區(qū)別？

回答：http狀態(tài)碼是指服務器接收到請求后返回的一個狀態(tài)碼，其中比較常見的是200（請求成功），404（請求失敗），500（服務器發(fā)生錯誤），更多參考這里；而對象狀態(tài)值，是針對XmlHttpRequest對象的，前面已經解釋了每個狀態(tài)值代表的含義；它們倆之間的聯系就是只有當請求過程全部完成后，才可以根據服務器返回的狀態(tài)碼調用不同的函數。

Ajax請求過程的代碼實現

    //封裝一個ajax請求
    function ajax(options){
      //創(chuàng)建XMLHttpRequest對象
      if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest
      }else{
        var xhr = new ActiveXObject()
      }

      //初始化參數的內容
      options = options ||{}
      options.type = (options.type ||"GET").toUpperCase()
      options.dataType = options.dataType || "json"
      var params = options.data

      //發(fā)送請求
      if(options.type == "GET"){
        xhr.open("GET",options.url + "?" + params,true)
        xhr.send(null)
      }else if(options.type == "POST"){
        xhr.open("POST",options.url,true)
        xhr.send(params)
        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")//規(guī)定輸出為鍵值對的形式
      }

      //接收請求
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
          var status = xhr.status
          if (status >= 200 && status < 300){
            options.success && options.success(xhr.responseText,xhr.responseXML)
          }else{
            options.fail &&options.fail(status)
          }
        }
      }  
    }

    ajax({
      type: "post",
      dataType: "json",
      data: {},
      url: "https://www.easy-mock.com/mock/5bbd92e0004caf3b6a68db6f/example/api/countEventsLevel",
      success: function(text,xml){//請求成功后的回調函數
        console.log(text)
      },
      fail: function(status){////請求失敗后的回調函數
        console.log(status)
      }
    })

總結

?其實與ajax請求相關的知識點很多，比如它的核心XmlHttpRequest對象，跨域問題等。由于本文中的重點在于手動實現ajax請求，所以這些內容暫時先不涉及，不過我會在文后將參考鏈接奉上，感興趣的可以看看。

參考文章

同源策略及其規(guī)避方法
XmlHttpRequest詳解
ajax技術原理

云服務器 GPU云服務器人工智能原理及其應用 web前端工程師校招 ajax工作原理 web前端 ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/99487.html

"雙非"應屆生校招如何獲得大廠青睞?（內附前端大廠面經+技術崗超全求職攻略）

摘要：拿到秋招的同學，如確定入職需與用人單位簽署三方協議，以保證雙方的利益不受損失。當然每個崗位所要求的側重點不同，但卻百變不離其宗。方法論要想達成某個目標都有其特定的方法論，學習技術也不例外，掌握適當的學習方法才能事半功倍。寫在前面的話筆者從17年的2月份開始準備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結一番，本文適合主動學習的，對自己要學的課程不明確的，對面試有...

jeffrey_up 2019-08-30 14:23 評論0 收藏0
"雙非"應屆生校招如何獲得大廠青睞?（內附前端大廠面經+技術崗超全求職攻略）

摘要：拿到秋招的同學，如確定入職需與用人單位簽署三方協議，以保證雙方的利益不受損失。當然每個崗位所要求的側重點不同，但卻百變不離其宗。方法論要想達成某個目標都有其特定的方法論，學習技術也不例外，掌握適當的學習方法才能事半功倍。寫在前面的話筆者從17年的2月份開始準備春招，其中遇到不少坑，也意識到自己走過的彎路。故寫了這篇文章總結一番，本文適合主動學習的，對自己要學的課程不明確的，對面試有...

lindroid 2019-08-26 17:25 評論0 收藏0
騰訊前端求職直播課——筆試篇

摘要：主講人黎騰年加入騰訊，技術面試官引入面試是一個讓面試官認識你的過程，盡全力展現的你就好，正常發(fā)揮沒通過再接再厲，失常發(fā)揮沒通過實為遺憾要求要求找準定位，重視基礎前端發(fā)展日新月異，打牢基礎原生，才能以不變應萬變如性能，安全要求用更遠的視角去看主講人：黎騰(Litten)：13年加入騰訊，技術面試官 1.引入面試是一個讓面試官認識你的過程，盡全力展現100%的你就好，正常發(fā)揮沒通過...

Sunxb 2019-08-20 18:02 評論0 收藏0
騰訊前端求職直播課——筆試篇

摘要：主講人黎騰年加入騰訊，技術面試官引入面試是一個讓面試官認識你的過程，盡全力展現的你就好，正常發(fā)揮沒通過再接再厲，失常發(fā)揮沒通過實為遺憾要求要求找準定位，重視基礎前端發(fā)展日新月異，打牢基礎原生，才能以不變應萬變如性能，安全要求用更遠的視角去看主講人：黎騰(Litten)：13年加入騰訊，技術面試官 1.引入面試是一個讓面試官認識你的過程，盡全力展現100%的你就好，正常發(fā)揮沒通過...

cnTomato 2019-08-29 12:55 評論0 收藏0
騰訊前端求職直播課——筆試篇

摘要：主講人黎騰年加入騰訊，技術面試官引入面試是一個讓面試官認識你的過程，盡全力展現的你就好，正常發(fā)揮沒通過再接再厲，失常發(fā)揮沒通過實為遺憾要求要求找準定位，重視基礎前端發(fā)展日新月異，打牢基礎原生，才能以不變應萬變如性能，安全要求用更遠的視角去看主講人：黎騰(Litten)：13年加入騰訊，技術面試官 1.引入面試是一個讓面試官認識你的過程，盡全力展現100%的你就好，正常發(fā)揮沒通過...

yintaolaowanzi 2019-08-01 17:09 評論0 收藏0