1. 程式人生 > >5分鐘學會Ajax基本用法

5分鐘學會Ajax基本用法

引言:

有很多童鞋,在WEB前端面試的時候,常會被Ajax問題難住,其實Ajax沒有你們理解的那麼難,現在原始碼時代H5學科講師帶著大家重新來回顧一下知識點:隨便再給大家普及一下小常識,今天咱們聊的就是怎麼快速掌握Ajax。

小常識科普:

Ajax全稱是:Asynchronous JavaScript and Xml,常用於B/S架構上,是實現客戶端與伺服器端非同步互動的主要手段。通常瀏覽器中的互動模式一般分為:同步和非同步互動兩類。那它們之間有哪些差別呢?

第一、同步互動:

指客戶端向伺服器端傳送請求,到伺服器端進行響應,這個過程使用者不能做其它的事情,只有等待請求完成。

第二、非同步互動:

指客戶端向伺服器端傳送請求,到伺服器端進行響應,這個過程使用者可以做其它的事情,不用等待請求完成。

這些都是請求互動過程中的差別,那麼同步互動和非同步的具體區別是什麼呢?這時候就要把兩者拿出來做比較了,畢竟沒有比較就沒有傷害,那我們開始他們倆者之間的傷害吧!開始!!!

同步互動和非同步互動的區別:

同步互動:

1.執行速度相對非同步互動慢。

2.響應的是完整的HTML頁面。

非同步互動:

1.執行的速度相對同步互動要快。

2.響應的是部分資料。

接下來,我將帶著大家來親自體驗一下Ajax的魅力。再開使用做demo之前,我們還是得來點基本知識點,即然說好了要體驗:那麼我們必須先來做一個,再建立Ajax前,我們必需要了解Ajax的核心物件,XMLHttpRequest,Ajax所有的屬性和方法以及事件都需要在XMLHttpRequest對應中進行呼叫。不然的話,這個事情就辦不成了。

明白了Ajax物件,我們就來建立一個Ajax核心物件。

如何建立Ajax核心物件???

通常情況下,我們會首先建立一個XMLHttpRequest物件的函式,然後在用某個變數去呼叫這個函式進行建立。但是需要注意的是這個函式裡的判斷。那我們就直接來上程式碼:

5分鐘學會Ajax基本用法

再來回顧一下所要用到的知識點:

5分鐘學會Ajax基本用法

5分鐘學會Ajax基本用法

總結:

其實,實現ajax操作非常的簡單,我們現在是以非同步載入的效果為例;所以同學們在學習的時候可以按照下面的幾個步聚去寫:

AJAX請求步驟

1、建立ajax物件

2、配置ajax,建立http連線

3、建立ajax物件變化的監聽

4、向伺服器傳送請求

5、接收伺服器端的響應資料

這幾個步聚小夥伴們都GET到了嗎?沒有理解的同學可以在下面評論區留言哦!

最後,如果有想一起學習web前端,HTML5及JavaScript的可以來一下我的前端群733581373,好友都會在裡面交流,分享一些學習的方法和需要注意的小細節,每天也會準時的講一些前端的炫酷特效,及前端直播課程學習

如果想看到更加系統的文章和學習方法經驗可以關注的微訊號:‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊