AJAX總結（二），手寫AJAX

娣辯孩發(fā)布于2019-08-20 13:41 / 2166人閱讀

摘要：創(chuàng)建對象指定響應函數(shù)打開連接指定請求發(fā)送請求創(chuàng)建響應函數(shù)注第三步是使用對象的方法，字面意思是打開的意思，即打開連接。

前言

博主博客：Stillwater的博客
知乎專欄：前端汪汪
本文為作者原創(chuàng)轉載請注明出處：
http://hiztx.top/2017/01/12/a...

在前端面試的時候經(jīng)常會有如下情景。AJAX會嗎？能不能手寫個AJAX？第一個問題可以參見我的另一篇博客，AJAX總結（一），AJAX概述。這篇博文我們來回答第二個問題，手寫AJAX。

一、手寫AJAX的步驟

??手寫AJAX并沒有一個固定的標準的答案，但是AJAX的關鍵步驟就那么幾步，我會先用文字介紹關鍵步驟，然后給出兩個版本的手寫AJAX的代碼及注釋。幫助大家很好地理解和記憶。


創(chuàng)建XMLHttpRequest對象

指定響應函數(shù)

打開連接（指定請求）

發(fā)送請求

創(chuàng)建響應函數(shù)

注：第三步是使用XMLHttpRequest對象的open（）方法，字面意思open是打開的意思，即打開連接。但是準確的說應該是指定Http請求。因為瀏覽器在使用AJAX技術與服務通信時，發(fā)送的是Http請求，那么就要指定Http的請求方法，url等信息。

二、參考代碼（W3C）

var xmlhttp=null;//聲明一個變量，用來實例化XMLHttpRequest對象
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();// 新版本的瀏覽器可以直接創(chuàng)建XMLHttpRequest對象
  }
  
else if (window.ActiveXObject)
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE5或IE6沒有XMLHttpRequest對象，而是用的ActiveXObject對象
  }
  
  
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;//指定響應函數(shù)為state_Change
  xmlhttp.open("GET","/example/xdom/note.xml",true);//指定請求，這里要訪問在/example/xdom路徑下的note.xml文件，true代表的使用的是異步請求
  xmlhttp.send(null);//發(fā)送請求
  } 
else
  {
  alert("Your browser does not support XMLHTTP.");
  }

//創(chuàng)建具體的響應函數(shù)state_Change
function state_Change()
{
if (xmlhttp.readyState==4)
  {
  if (xmlhttp.status==200)
    {
    // 這里應該是函數(shù)具體的邏輯
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}

創(chuàng)建XMLHttpRequest對象（1-10行代碼）

指定響應函數(shù)（第15行代碼）

打開連接（指定請求）（第16行代碼）

發(fā)送請求（第18行代碼）

創(chuàng)建響應函數(shù)（25-38行代碼）

??這個是W3C上講解AJAX的代碼，比較權威，我做了一些注釋，方便大家理解。面試的時候?qū)戇@段代碼應該是沒有問題的。
W3C原文鏈接

三、參考代碼（MDN）



  Make a request

創(chuàng)建XMLHttpRequest對象（第13行代碼）

指定響應函數(shù)（第19行代碼）

打開連接（指定請求）（第21行代碼）

發(fā)送請求（第23行代碼）

創(chuàng)建響應函數(shù)（29-37行代碼）

??這個是MDN上講解AJAX的代碼，我做了一些注釋，方便大家理解。
MDN原文鏈接

四、總結

這篇文章講解了如何較為規(guī)范的手寫AJAX，下篇文章我會具體介紹XMLHttpRequest對象的有關知識以及AJAX相關的Http請求的知識。

云服務器 GPU云服務器 ajax() ajax? ajax _AJAX

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81185.html

laravel5.5手寫教程4Eloquent ORM分頁及軟刪除

摘要：從而達到了軟刪除。不過，你可以通過在查詢中調(diào)用方法來強制查詢已被軟刪除的模型方法也可以被用在關聯(lián)查詢只取出軟刪除數(shù)據(jù)會只取出軟刪除數(shù)據(jù)恢復被軟刪除的模型有時候你可能希望取消刪除一個已被軟刪除的模型。 Laravel 有三寶，路由、容器和 Eloquent ORM，Eloquent ORM。我個人一直比較推薦于在實際操作中學習，之前簡單了解了路由和Eloquent ORM的基本用法，今天...

mindwind 2019-07-01 14:20 評論0 收藏0
同源策略與CORS跨域

摘要：所以瀏覽器認為這是安全的。如果你細心的話你會發(fā)現(xiàn)，其實請求已經(jīng)發(fā)送出去了，你只是拿不到響應而已。所以瀏覽器這個策略的本質(zhì)是，一個域名的，在未經(jīng)允許的情況下，不得讀取另一個域名的內(nèi)容。但瀏覽器并不阻止你向另一個域名發(fā)送請求。同源策略與CORS跨域 PS:這篇文章是緊接著JSONP原理和Ajax學習與理解寫的,有些內(nèi)容是承接了上兩篇文章.這篇文章只算是我的個人學習筆記,內(nèi)容沒有經(jīng)過精心排...

ninefive 2019-08-23 10:34 評論0 收藏0
手寫 AJAX

摘要：在事件中，我們規(guī)定當服務器響應已做好被處理的準備時所執(zhí)行的任務。當?shù)扔谇覡顟B(tài)為時，表示響應已就緒完整版可以加個簡化版看前面的就行了請求成功看前面的就行了在 onreadystatechange 事件中，我們規(guī)定當服務器響應已做好被處理的準備時所執(zhí)行的任務。當 readyState 等于 4 且狀態(tài)為 200 時，表示響應已就緒： //完整版 var request = new XM...

brianway 2019-08-26 10:15 評論0 收藏0
前端基礎匯總

摘要：及相關問題數(shù)據(jù)類型函數(shù)中指向原型作用域閉包面向?qū)ο髮ο髣?chuàng)建模式繼承嚴格模式與對象轉換的方法添加屬性，根據(jù)原型創(chuàng)建區(qū)別新特性解構賦值簡化對象寫法剪頭函數(shù)三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區(qū)別淺拷貝的幾種方法實現(xiàn) js及es相關問題數(shù)據(jù)類型函數(shù)中this指向——————原型作用域閉包——————面向?qū)ο髮ο髣?chuàng)建模式繼承——————Es5嚴格模式Json與j...

2json 2019-08-23 16:58 評論0 收藏0
前端基礎匯總

摘要：及相關問題數(shù)據(jù)類型函數(shù)中指向原型作用域閉包面向?qū)ο髮ο髣?chuàng)建模式繼承嚴格模式與對象轉換的方法添加屬性，根據(jù)原型創(chuàng)建區(qū)別新特性解構賦值簡化對象寫法剪頭函數(shù)三點運算符模板字符串形參默認值異步過程深拷貝與淺拷貝賦值與淺拷貝的區(qū)別淺拷貝的幾種方法實現(xiàn) js及es相關問題數(shù)據(jù)類型函數(shù)中this指向——————原型作用域閉包——————面向?qū)ο髮ο髣?chuàng)建模式繼承——————Es5嚴格模式Json與j...

laznrbfe 2019-08-29 18:38 評論0 收藏0