從零開始擼乙個ajax框架

寫這篇文章的初衷：寫了5年**，發現每天的工作都是在像拼積木一樣，拼湊著乙個又乙個功能，但是基本的實現原理可能就那幾把刷子，想著想著就乾脆整理成乙個自己風格的公共庫，既然說了，那就幹唄~

框架的封裝是乙個開發者綜合能力的乙個體現，因為框架的封裝不僅關係到怎麼讓使用者更方便的去使用你封裝的這個方法，更需要乙個開發者從原理上去了解為了實現這種方法所進行的每一步操作，每乙個方法的有效性，能不能用更精簡的語句實現，能不能用更高效的方法實現，或者是為了追求某方面的效能而犧牲某方面的體驗等等…

暫時想不到好的名字，暫時把框架命名為fly.js

根據jquery的原始碼，可見咱們這個框架的封裝一般包括兩個原則：

給大家看一下初始**長成什麼樣，寫好後呢，將咱們的fly掛載到windows上

(
function
(fly);
f.t.util =f.
t.util ||
;var util =f.
t.util;})
(window.
fly= window.fly ||
);

既然框架已經起步，就要先測試一下框架是否能用，咱們先寫乙個test函式測試一下能不能正常的使用:

util.
test
=function()
;

然後呢，咱們在html介面呼叫一下，看下能否正常執行即可，當然很完美，咱們接著下一步 ~

乙個為向伺服器傳送請求和解析伺服器響應提供了流暢的介面。

ajax是乙個老生常談的問題，但是肯定有一部分人只是知道ajax而不知道xmlhttprequest，亦或者是在框架橫行的世代，為了發乙個請求而又不得不把jquery而引入了進來，其實ajax是jquery是為了方便大家使用而封裝的乙個好用而又方便實用的乙個著名的超過

xmlhttprequest本尊的請求工具，在es6的fetch請求之前，傳送乙個完整的請求一般情況下包括5個步驟：

//步驟一:建立非同步物件
;//步驟二:設定請求的url引數,引數一是請求的型別,引數二是請求的url,可以帶引數,動態的傳遞引數starname到服務端
ajax.
open
('get'
,'getstar.php?starname='
+name)
;//步驟三:傳送請求
ajax.
send()
;//步驟四:註冊事件 onreadystatechange 狀態改變就會呼叫
ajax.
onreadystatechange
=function()
}

裡面這個readystate都有哪些含義呢：

響應的http 狀態。

如 200 表示成功，而 404 表示「not found」錯誤。當 readystate 小於 3 的時候讀取這一屬性會導致乙個異常。

http 狀態的說明。

當狀態為 200 的時候它是「ok」，當狀態為 404 的時候它是「not found」。和 status 屬性一樣，當 readystate 小於 3 的時候讀取這一屬性會導致乙個異常。

作為響應主體被返回的文字。

如果 readystate 小於 3，這個屬性就是乙個空字串。當 readystate 為 3，這個屬性返回目前已經接收的響應部分。如果 readystate 為 4，這個屬性儲存了完整的響應體。

作用：傳送請求,引數為傳送的請求體，不傳請求體的話最好傳個null

作用：初始化請求

xhr.open(method,url,async,user,password)

老是這樣寫也不是辦法啊，寫出精神icu的節奏啊，這時候，簡單而又明了的寫法出來了：

$.
ajax(,
// 看後台要什麼格式的，是字串還是物件 json.stringify(obj)
success:
function
(data)
, error:
function()
,});

$.ajax中的乙個物件，包含type、url、data、success、error大大的精簡了**的寫法，簡單明瞭 ~

咱們自己手動實現乙個ajax方法的話，需要考慮哪些方面呢，結合jquery的原始碼，並且和原生的xmlhttprequest()方法對比，根據咱們實際開發的經驗，乙個完整的請求包括：

首先咱們先把第2項處理掉，怎麼將譬如轉化為?name=yeyu&age=18這樣的字串呢：

/**
* 將引數轉拼接為url鏈結後的傳參
* @returns }
*/util.
json2url
=function
(json)
return arr.
join
('&');
};

/**
* 結合jquery，重新封裝ajax
};

到這裡咱們就實現了乙個ajax的方法，而不用因為僅僅使用ajax而將jquery引入到專案中

最後呢，再封裝兩個方法，乙個post，乙個get，這樣基本上就滿足了我們專案中常用的請求

/**
* post請求
* @returns }
*/util.
post
=function
(jsondata));
};

/**
* get請求
* @returns }
*/util.
get=
function
(jsondata));
};

到這裡，完整的ajax請求就結束了~~~

從零開始擼乙個ajax框架

從零開始擼乙個Fresco之總結

從零開始徒手擼乙個vue的toast彈窗元件

IntelliJ IDEA 從零開始建立乙個專案

從零開始擼乙個ajax框架

從零開始擼乙個Fresco之總結

從零開始徒手擼乙個vue的toast彈窗元件

IntelliJ IDEA 從零開始建立乙個專案

相關推薦