成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端校招準(zhǔn)備--Ajax原理及其實(shí)現(xiàn)

binaryTree / 960人閱讀

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

前言

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

正文 Ajax介紹

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

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

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

Ajax實(shí)現(xiàn)過程

?ajax實(shí)現(xiàn)異步請求的過程可以分為以下幾個步驟：

創(chuàng)建XmlHttpRequest對象

初始化參數(shù)

發(fā)送信息

接收信息

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

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

?方法：

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

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

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

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

?屬性：

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

reposeText: 從服務(wù)器返回數(shù)據(jù)的字符串格式

reposeXML: 從服務(wù)器返回兼容DOM的文檔數(shù)據(jù)對象

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

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

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

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

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

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

Ajax請求過程的代碼實(shí)現(xiàn) 
    //封裝一個ajax請求
    function ajax(options){
      //創(chuàng)建XMLHttpRequest對象
      if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest
      }else{
        var xhr = new ActiveXObject()
      }

      //初始化參數(shù)的內(nèi)容
      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){//請求成功后的回調(diào)函數(shù)
        console.log(text)
      },
      fail: function(status){////請求失敗后的回調(diào)函數(shù)
        console.log(status)
      }
    })
總結(jié)

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

參考文章

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99487.html

相關(guān)文章

  • "雙非"應(yīng)屆生校招如何獲得大廠青睞?（內(nèi)附前端大廠面經(jīng)+技術(shù)崗超全求職攻略）

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

    jeffrey_up 評論0 收藏0

  • "雙非"應(yīng)屆生校招如何獲得大廠青睞?（內(nèi)附前端大廠面經(jīng)+技術(shù)崗超全求職攻略）

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

    lindroid 評論0 收藏0

  • 騰訊前端求職直播課——筆試篇

    摘要：主講人黎騰年加入騰訊，技術(shù)面試官引入面試是一個讓面試官認(rèn)識你的過程，盡全力展現(xiàn)的你就好，正常發(fā)揮沒通過再接再厲，失常發(fā)揮沒通過實(shí)為遺憾要求要求找準(zhǔn)定位，重視基礎(chǔ)前端發(fā)展日新月異，打牢基礎(chǔ)原生，才能以不變應(yīng)萬變?nèi)缧阅埽踩笥酶h(yuǎn)的視角去看 主講人：黎騰(Litten)：13年加入騰訊， 技術(shù)面試官 1.引入 面試是一個讓面試官認(rèn)識你的過程，盡全力展現(xiàn)100%的你就好，正常發(fā)揮沒通過...

    Sunxb 評論0 收藏0

  • 騰訊前端求職直播課——筆試篇

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

    cnTomato 評論0 收藏0

  • 騰訊前端求職直播課——筆試篇

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

    yintaolaowanzi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<