淺析Ajax技術

項目中一直在使用Ajax技術,今天抽時間總結一下:

一、什麼是 Ajax
Asynchronous Javascript And Xml,異步的 JavaScript 和 Xml。實質是利用瀏覽器內置的一個特殊對象XMLHttpRequest,(一般稱之爲 Ajax 對象)異步地向服務器發送請求,服務器送回部分數據,在瀏覽器端,可以利用這些數據部分更新當前頁面。整個過程,頁面無刷新,不打斷用戶的操作。之前,都是先銷燬原來的頁面,然後發送請求,等待服務器發送響應,再生成新頁面。

二、同步與異步的區別
1、同步:提交請求-->等待服務器處理-->處理完畢返回,這個期間客戶端瀏覽器不能幹任何事

2、異步:請求通過事件觸發-->服務器處理-->處理完畢,用戶仍然可以對當前頁面作其他的操作 
3、同步是阻塞模式,異步是非阻塞模式。

4、同步(發送方發出數據後,等待接收方發回響應) 異步(發送方發出數據後,不等待接收方發回響應)  

三、Ajax 對象的屬性
1、onreadystatechange:綁定一個事件處理函數(監聽器),該函數用來處理 readystatechange事件。 Ajax 對象的readyState 屬性發生改變,會產生 onreadystatechange 事件。
2、responseText:獲得服務器返回的文本數據。
3、responseXML:獲得服務器返回的 Xml 文檔。
4、status:獲得狀態碼。
5、readyState:返回 Ajax 對象與服務器通訊的狀態,返回值是一個 number 類型的值。
一共有 5 個值,分別是:
(1)0:(未初始化)對象已建立,但是尚未初始化(尚未調用 open 方法)。
(2)1:(初始化)對象已建立,尚未調用 send 方法。
(3)2:(發送數據) send 方法已調用。
(4)3:(數據傳送中)已接收部分數據。
(5)4:(響應結束) Ajax 對象已經獲得了服務器返回的所有的數據。

四、Ajax 的優點
1、頁面無刷新,不打斷用戶的操作。
2、按需要獲取數據,瀏覽器與服務器端之間的數據傳輸量大大減少。
3、是一種標準化的技術,不需要下載任何插件。

五、JSON

JSON是JavaScript Object Natation,一種輕量級的數據交換技術規範。JSON將數據轉換成一種中間的,與平臺無關的數據格式(比如 Xml 或者 JSON 字符串)發送給另外一方來處理。相對於 Xml,所需的數據大小要小的多,並且解析的速度更快。

1、JSON 語法
(1)表示一個對象(鍵值對形式)
{ 屬性名:屬性值,屬性名:屬性值……}
注意:
①屬性名要使用引號括起來。
②屬性值如果是字符串,要使用引號括起來。
③屬性值可以是 string、 number、 boolean、 null、 object。
(2)JavaScript 中創建對象的三種方式:
 方式一:使用 Json 語法來創建
 var p = {'name':'hang','age':24};
 方式二:使用 Object 來創建
 var obj = new Object(); obj.name = 'hang'; obj.age = 24;
 方式三:利用 JavaScript 函數來創建
 function Person(name,age){
 this.name = name;  this.age = age; }
 var person1 = new Person("hang",24)
(3)表示一個對象組成的數組, [ {},{},{},……]

2、使用JSON編寫Ajax

(1)Java 對象轉換成 JSON 字符串
 一般使用 JSON 官方提供的 API( json-lib)來實現轉換
情形一: Java 對象轉換成一個 JSON 字符串,使用 JSONObject.fromObject()
情形二: Java 對象組成的集合轉換成一個 JSON 字符串,使用 JSONArray.fromObject()
情形三: Java 對象組成的數組轉換成一個 JSON 字符串,使用 JSONArray.fromObject()
(2)JSON 字符串轉換成 JavaScript 對象
可以使用以下函數:
① $(id): document.getElementBuId(id);
② $F(id): $(id.value);
③ $(id1,id2,id3...):分別依據 id1,id2...查找對應的節點,然後放到一個數據裏面返回。
④ strip():除掉字符串兩端的空格。
⑤ evalJSON():將 JSON 字符串轉換成對應的 JavaScript 對象或者 JavaScript 對象組成的數組。

發佈了68 篇原創文章 · 獲贊 75 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章