1.ajax概念

2.ajax原理
3.ajax開發步驟
4.示例
5.優化問題？
返回json數據進行優化
返回xml進行優化
javabean對象--------------> XML-----------------(XStream)

一、AJAX是什麽？
AJAX ： 異步 javascript和 XML
AJAX ：帶來用戶體驗改變，是web優化一種主要手段

AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 對象

二、它的優點？
傳統web交互模型，瀏覽器直接將請求發送給服務器，服務器回送響應，直接發給瀏覽器，
Ajax交互模型，瀏覽器首先將請求 發送 Ajax引擎（以XMLHttpRequest為核心），
AJax引擎再將請求發送給 服務器，服務器回送響應先發給Ajax引擎，再由引擎傳給瀏覽器顯示

1、同步交互模式，客戶端提交請求，等待，在響應回到客戶端前，客戶端無法進行其他操作
2、異步交互模型，客戶端將請求提交給Ajax引擎，客戶端可以繼續操作，由Ajax引擎來完成與服務器端通信，
當響應回來後，Ajax引擎（javascript 調用 DOM）會更新客戶頁面，在客戶端提交請求後，用戶可以繼續操作，
而無需等待 。

三、用在哪些地方？
Google ： suggest建議、郵件定時保存、map地圖

四、 Ajax快速入門
1.創建XMLHttpRequest對象
2.將狀態觸發器綁定到函數（回調函數）
3.使用open方法建立與服務器的連接
4.向服務器端發送數據
5.在回調函數中對返回數據進行處理

五、常用對象XMLHttpRequest
方法：
open
send
屬性：
onreadystatechange ：狀態回調函數
responseText/responseXML ：服務器的響應字符串
status：服務器返回的HTTP狀態碼
statusText: 服務器返回的HTTP狀態信息
readyState ：對象狀態 (0,1,2,3,4)

六、客戶端向服務器提交數據
1、get方式發送數據
xmlHttp.open("GET","url?key=value"); // 參數已經在url上
xmlHttp.send(null);
2、post方式發送數據
xmlHttp.open("POST","url"); // 不需要寫參數
xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); // post發送參數前，需要設置編碼格式
xmlHttp.send("name=xxx&pwd=xxx"); // 發送post數據
回調函數編寫
if(xmlHttp.readyState == 4){
// 判斷數據是否正確
if(xmlHttp.status == 200){
// 響應有效
...
}
}

七、針對Ajax 不同三種服務器響應數據類型，進行編程
1、 HTML片段的響應數據
將返回HTML片段 通過 innerHTML 屬性，插入指定元素內部

練習一： 通過離焦發送Ajax請求，驗證用戶名是否存在
var xmlHttp = createXMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState ==4 ){
if(xmlHttp.status == 200){
...
}
}
};
xmlHttp.open("GET","checkUsername?username="+username);
xmlHttp.send(null);

練習二：通過鏈接 獲得table數據，顯示 --- 返回HTML片段
* 通過product.jsp 生成 HTML片段，返回客戶端，客戶端Ajax引擎接收，
通過innerHTML 將tbale元素 嵌入到頁面內部

2、 返回JSON格式數據
去掉多余 HTML標簽元素，只返回有效數據部分，是一種更優的方案

什麽是json， 是一種javascript輕量級數據交互格式，主要應用於Ajax編程

格式一： {key:value,key:value,key:value } 鍵值對直接用 , 分開，鍵值之間用 :
鍵 本身必須是字符串常量
{name : ‘張三‘}
{‘name‘:‘張三‘}

是等價的
值 加不加引號，是有區別的，不加引號是變量，加引號常量字符串

格式二： [值1, 值2 ,值3 ] 數組結構

組合後復雜格式
[{name:‘aaa‘}, {name:‘bbb‘}, {name:ccc}] 表示三個對象數組

JSON應用場景： AJAX請求參數 和響應數據

問題： 服務器端 如何生成 json格式數據 ---- 依賴第三方開源類庫

3、 json-lib使用
是 java類庫 ，支持 javabean map list array 轉換 json格式字符串， 支持將json字符串轉換 javabean對象

導入jar包（6個）

1) 轉換數組 、List集合 到json格式字符串 - 使用JSONArray
String[] arr = {"sada","fdssd","dfsd","sadas"};
JSONArray jsonArray = JSONArray.fromObject(arr);
System.out.println(jsonArray.toString());

2） 將JavaBean/Map解析成JSON串：－ 使用JSONObject
Product p1 = new Product();
p1.setName("三星手機");
p1.setPrice(3999);

JSONObject jsonObject = JSONObject.fromObject(p1);
System.out.println(jsonObject);

3) 通過JsonConfig對象 配置對象哪些屬性不參與轉換
JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{"price"});

JSONObject jsonObject = JSONObject.fromObject(p1, jsonConfig);
System.out.println(jsonObject);

練習三：重寫練習二 返回結果數據是json格式數據
* 客戶端獲得json格式字符串後，轉換為 javascript對象 ------- eval("("+jsonstr+")");

八、XML結果數據生成

問題：服務器端如何將java對象，生成XML格式數據 ？ 需要第三方類庫支持 XStream

XStream is a simple library to serialize objects to XML and back again.

如果實現 對象 --- xml 只需要 xstream-1.3.1.jar
如果實現 xml ---- 對象 需要 xstream-1.3.1.jar 、xpp3_min-1.1.4c.jar (PULL Manifest.xml)

將 xstream-1.3.1.jar 、xpp3_min-1.1.4c.jar 復制工程lib 目錄下

核心方法
xSteam.alias(name,Class); 將類型解析或者序列化 定義一個別名
toXML(obj) 將對象序列化XML
fromXML(inputStream/xml片段) 將xml信息解析對象

提供便捷註解 @Override @Test
@XStreamAlias(別名) 對類和變量設置別名
@XStreamAsAttribute 設置變量生成屬性
@XStreamOmitField 設置變量 不生成到XML
@XStreamImplicit 不會生成集合結點

使註解生效
xStream.autodetectAnnotations(true);

使用 xmlHttp.responseXML 接收解析成為 document對象

Ajax總結