天天看點

輕松掌握ajax底層實作原理

原生的ajax雖然在實際開發中很少編寫,但如果想将js進階架構底層學明白,那ajax的原理是必須要求精通的。 本套ajax視訊對ajax底層實作原理講解非常透徹,對ajax發送異步請求的每一步都進行了透徹的分析,讓你徹底搞懂搞透ajax。

課程主要涵蓋的内容: ajax底層實作原理剖析、 ajax跨域,手寫jquery庫、 ajax省市關聯、 ajax實作搜尋聯想、 ajax改造oa項目等,課程在理論層面非常深入,使用大量實戰案例來進行驅動,能夠讓大家在歡快愉悅的環境當中,掌握技術底層的實作原理。

Ajax的目的

首先現在的應用當中的功能都是頁面的局部重新整理,Ajax可以幫助實作頁面的局部重新整理。

如何了解局部重新整理和全部重新整理?

1、頁面全部重新整理

比如說在百度的網站上,搜了一個資訊,展示出下面一些很多資訊,其中有一個東西叫超連結。我一點超連結跳轉到下一個頁面,這就不是頁面局部重新整理,這叫頁面全部重新整理。

簡單點說就是在百度的一個頁面上我點了一個超連結,點完之後跳到另外一個視窗裡,在另外一個視窗當中去浏覽資訊,這叫頁面的全部重新整理。

2、頁面的局部重新整理

比如:百度搜尋框裡面當搜尋一個東西的時候,下面在不停地重新整理。

從軟體實作角度來說,我們輸進去東西,那麼這個東西肯定要發送到伺服器上,伺服器會根據關鍵字進行檢索,下邊展現出的關聯詞,它是實時的從底層從伺服器端擷取回來,展現到前端頁面上的。

當這個關鍵詞發生了改變之後你它又會把這個改變了的關鍵詞也發送給伺服器,伺服器根據新的關鍵詞再去檢索到一些資訊再傳回來,于是這一塊的資訊是就變化了,這就是頁面的局部重新整理,Ajax就是做這件事情。

學習Ajax的作用

它可以讓頁面局部重新整理,這樣做有什麼好處呢?

主要是可以提高使用者的體驗。

輕松掌握ajax底層實作原理

舉個例子:

現在這是一個浏覽器,這邊是愛奇藝正在播放視訊,假如說已經緩沖完了播放到一半了,右邊有一個登入的一個表單,我們通過使用者名密碼點登入,那麼這個登入的請求它是一個頁面全部重新整理,這樣操作會有什麼問題?

一旦我們點選登入那整個頁面全部重新加載,我們的愛奇藝視訊就要從零開始重新緩沖,也就是說如果頁面全部重新整理的話,這個視訊一定是從零開始播放,使用者的體驗中斷了。

但是現在的大部分請求是什麼?

是右邊有一個登入的表單,使用者名密碼寫上點登入,然後隻重新整理登入表單這一塊,登入成功之後顯示您是金牌會員,您是銀牌會員,對整個網頁來說變化的資訊隻有這一塊,别的地方的東西都是不會重新整理的,這叫頁面的局部重新整理,這是為了提高使用者體驗,不讓使用者的體驗間斷,因為頁面全部重新整理的話,如果網速不行,加載全頁面也加載不出來,使用者的體驗是有空白期的。

Ajax就是做這件事情的一種技術,提高使用者的操作體驗。

本套教程的課程亮點

這個視訊裡邊最大的兩個亮點:

  • 手寫jQuery

在前端庫裡邊有一個庫叫jQuery,jQuery這個課程,其實是封裝的一個js檔案,封裝好。

市面上大部分的教育訓練機構講法是什麼?

主要是講庫怎麼去用,把庫引進來,然後告訴學員這裡面由哪個方法去講,但是我們這套課程是基于Ajax,手動封裝一個jQuery的庫出來。

  • 超詳細的跨域的解決方案

視訊中有Ajax跨域這部分内容,在我們整個軟體界來說,跨域是很有名的一個單詞,但市面上還沒有像本套視訊一樣将跨域講的這麼詳細的,能講這麼底層的。

大部分跨域講法是:怎麼解決跨域,我告訴你解決方案就行了,但是杜老師講的視訊不僅要告訴你怎麼去解決跨域的問題,而且告訴真正解決跨域問題的關鍵點在什麼地方,最底層的東西在哪兒,怎麼解決的。

案例

1、省市關聯

例如:省市區,當你選河北省的時候,右邊那個框就會顯示河北省的市區,當你選擇河北省下的某一個市區,比如石家莊市,那麼右邊第三個框就會動态關聯出來,動态的重新整理出來,石家莊市下邊的區。這叫省市關聯效果,這是一個非常經典的案例。

省市關聯操作視訊

2、搜尋聯想和自動補全

什麼叫自動補全?但我們搜尋一個内容時(比如用百度搜尋Java)它不僅能聯想出來,而且當你點完之後,它可以自動給你補全上面的資訊,叫搜尋聯想加自動補全,這是用Ajax做的。

搜尋聯想和自動補全視訊

總體來說,這套課程講的夠深入,不僅講表面怎麼用,我們還講底層的原理,講的特别深入。

課程直擊原理,即使你是零基礎小白,但也不會因為本套課程講得很深入而學不明白。

繼續閱讀