1、Ajax Ajax 概述 Ajax原理¤ 注冊時存在問題¤ 什么是Ajax 異步的javaScript和Xml AJAX是一種用來改善用戶體驗的技術，其實質是，使用XMLHttpRequest獨享異步地想服務器放松請求。 服務器返回部分數據，而不是一個完整的頁面，以頁面無刷新的效果更改頁面中的局部內容。¤ Ajax工作原理¤ 如何獲得Ajax對象代碼如下function getXhr()var xhr = null;if(window.XMLHttpRequest)xhr = new XMLHttpRequest();elsexhr = new Acti

2、veXObject( Microsoft.XMLHttp );return xhr; Ajax對象屬性方法¤ 異步對象的屬性和方法¤ onreadystatechange onreadystatechange：綁定一個事件處理函數，該函數用來處理onready -change事件。 注意：當Ajax對象的readyState的值發生了改變，比如，從0變成1，就會產生readystatechange事件。¤ readyState readyState：一共有5個值，分別是0,1,2,3,4 ,分別表示Ajax對象與服務器通信的狀態。 使用Ajax發送異步請求

3、4; 發送異步請求的步驟 獲取Ajax對象：獲取XMLHttpRequest 設置回調函數：為Ajax對象的onreadystatechange事件設定響應函數function fn()if(xhr.readyState = 4 && xhr.satus = 200 )var txt = xhr.responseText;/相應的DOM操作. . 創建請求：調用XMLHttpRequest對象的open方法xhr.open( get , xx.do , true ); 注意： true:表示發送異步請求(當Ajax對象發送請求時，用戶仍然可以對當前頁面做其他的操作)。 fals

4、e：表示發送同步請求(當Ajax對象發送請求時，瀏覽器會鎖定當前頁面，用戶不能對當前頁面做其他操作)。xhr.open( post , xx.do , true );xhr.setRequestHeader(content-type,application/x-www-form-urlencoded); setRequestHeader的作用：因為HTTP協議要求發送post請求時，必須要有content-type消息頭，但是默認情況下xhr中不會添加該消息頭，所以，需要我們調用setRequsetHeader方法，添加這個消息頭。 發送請求：調用Ajax對象的send方法GET 請求：xhr

5、.send(null)POST請求：xhr.send(name=value & name=value.) GET請求：- send方法內傳遞null- 若要提交數據，則在open方法的”URL”后面追加- 如：xhr.open( “get” , “xx.do?name=value&name=value” ,true )¤ 編寫服務器代碼 服務器返回的一般是部分數據，比如一個簡單的文本。¤ Ajax的應用 輸入的值需要檢驗，如檢測注冊的用戶名是否已被占用 搜索時出現的自動提示列表 級聯顯示 數據錄入和列表顯示在同一個頁面 不需要刷新的翻頁 jQuery對AJA

6、X的支持¤ load() 作用：將服務器返回的數據字節添加到符合要求的節點之上 用法： $obj.load( 請求地址 ， 請求參數); 請求參數- “username=tom&age=23”- usernaem:tom , age:22 - 有請求參數時，load方法發送POST請求，否則發送GET請求¤ get() 作用：發送GET類型的請求 用法：$.get( 請求地址，請求參數，回調函數，服務器返回的數據類型 ) 說明：- 回調函數添加的參數是服務器返回的數據- 服務器返回的數據類型：html ：html文本text ：文本JSON ：js對象xml ：xm

7、l文檔script ：javaScript腳本¤ ajax() 用法 ：$.ajax( ); 內可以設置的選項參數：- url ：請求地址- type ：請求方式- data ：請求參數- dataType ：服務器 返回的數據類型- success ：服務器處理正常對應的回調函數- error ：服務器出錯對應的回調函數- async ：true（默認），當值為false時發送同步請求Json JSON 概述 JSON簡介¤ 什么是JSON¤ 與平臺無關的數據交換¤ 輕量級的解決 JSON語法¤ JSON的結構 JSON主要分兩種結構:- “

8、名稱/值”對的集合，不同的語言理解為對象、記錄、結構、字典、哈希表等。- 值的有序列表，大部分語言中理解為數組¤ 使用JSON表示一個對象 屬性名：屬性值 , 屬性名：屬性值 . 注意- 屬性值可以是string , number , boolean(true,false) , null , object- 屬性名必須使用雙引號引起來- 屬性值如果是字符串，必須用雙引號括起來¤ 使用JSON表示一個數組 JSON表示數組的語法是 value , value , value vlaue可以是簡單數據類型，也可以是object、數組類型 例如數組 表示方式“name” : ”J

9、erry” , “age” : 23 ,“name” : “Tom” , “age” : 25 對象 表示方式“name” : ”ROSE” ,“hobby” : “sing”,”dance”,”eat” 使用JSON實現數據交換 數據交換¤ 數據交換原理¤ JSON字符串 -> JavaScript對象方法一： 使用JavaScript語言的原生函數：eval()- 例如var str = “name”:”張三” , “age”:24 ;var obj = eval( “(“+str+”)” ) ;alert () ; 但該方法有風險，需謹慎使用方法二： 使用原生對象JSON提供的parse()方法- 例如var str = “name”:”張三” , “age”:24 ;var obj = JSON.parse( str ) ;alert () ; 如果該對象無效，說明瀏覽器版本太低方法三： 使用JSON.js文件為字符串增加的方法var str = “name”:”張三” , “age”:24 ;var obj = str.parseJSON()