Ajax基礎介紹

 

1. 什麼是Ajax

首先來看一下什麼是Ajax，英語全稱Asynchronous JavaScript And XML，翻譯成中文就是異步的JavaScript和XML。也被稱爲異步無刷新技術

 

先來解釋什麼是同步？什麼是異步？

所謂同步，就是發出HTTP請求之後，客戶端只能等待HTTP響應回來纔可以幹其餘的事兒，只要HTTP響應沒有回來，那就什麼都作不了

 

所謂異步，發出HTTP請求之後，客戶端不用非要等到HTTP響應回來，就能夠作其餘的事兒。

 

Ajax並非一門新的語言或者說是新的技術，而是以前已有的技術：JS，XML，DOM，CSS等多種技術的結合。

 

Ajax是一個與服務器端無關的技術

 

哪些地方使用了Ajax？

百度地圖：

 

表單驗證

 

智能提示

 

 

1. Ajax工做原理

傳統Web應用的工做：當用戶每觸發一個HTTP請求，即便只有少許的數據發生變化，其餘部分的內容都沒有變化，一旦提交，頁面仍是會從新刷新

處理—等待—處理—等待

 

Ajax技術實現的是按需獲取數據

 

 

傳統Web應用和Ajax工做原理示意圖：

 

 

 

傳統Web應用                               Ajax工做原理

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 編寫Ajax步驟

 

①
  建立Ajax對象

有兩種不一樣的方式：IE的方式和主流瀏覽器的方式

Ajax中最核心的對象就是XMLHttpRequest對象，最先是由微軟公司於1999年在IE5裏面內嵌的一種技術。如今市面上幾乎全部瀏覽器都內置了這個對象。

 

主流瀏覽器建立XMLHttpRequest對象的方式

 

 

IE瀏覽器建立XMLHttpRequest對象的方式

 

 

經過window.ActiveXObject能夠判斷用戶使用的瀏覽器是IE仍是主流瀏覽器，根據用戶使用的瀏覽器建立不一樣類型的XMLHttpRequest對象

 

 

② 與服務器創建鏈接而且向服務器發送請求

何時創建服務器鏈接並向服務器發送請求，這裏咱們須要經過JS事件來進行判斷

創建與服務器的鏈接，經過XMLHttpRequest對象的open()

該函數接收3個參數：1. 鏈接服務器的方式  2. 鏈接地址  3. 同步仍是異步

GET示例：以下

 

這裏是採用get的方式鏈接服務器，服務器的地址爲test.php 向服務器傳輸的數據爲username=xiejie  因爲向服務區傳輸的數據經過get的方式是拼接在url後面的，因此send()方法裏面寫入一個null

 

 

POST示例以下：

 

 

③ 設置回調函數是爲了處理從服務器取回來的數據

在open()方法和send()方法之間須要添加狀態的監聽

經過XMLHttpRequest對象的onreadystatechange屬性就能夠監聽Ajax引擎的工做狀態

Ajax的狀態以下：

0-（未初始化）：尚未調用send（）方法

1-（載入）：已經調用了send（）方法

2-（載入完成）：send（）方法執行完成

3-（交互）：正在解析響應內容

4-（完成）：響應內容已經解析完成，能夠在客戶端使用了

 

經過XMLHttpRequest對象的readyState屬性能夠獲取Ajax運行的狀態值

經過XMLHttpRequest對象的status屬性能夠獲取到返回的HTTP響應的狀態碼

經過XMLHttpRequest對象的responseText屬性能夠獲取從服務器返回的值

 

 

 

服務器端：服務器接收到客戶端提交過來的用戶名，而後進行判斷，最後返回文本數據

 

 

詳細代碼請參見【表單驗證Demo】