1. ajax是什麼?
* asynchronous javascript and xml：異步的js和xml
* 它能使用js訪問服務器，而且是異步訪問！
* 服務器給客戶端的響應一般是整個頁面，一個html完整頁面！但在ajax中因為是局部刷新，那麼服務器就不用再響應整個頁面！而只是數據！
> text：純文本
> xml：大家都熟悉！！！
> json：它是js提供的數據交互格式，它在ajax中最受歡迎！
2. 異步交互和同步交互
* 同步：
> 發一個請求，就要等待服務器的響應結束，然後才能發第二個請求！中間這段時間就是一個字“卡”
> 刷新的是整個頁面！
* 異步：
> 發一個請求後，無需等待服務器的響應，然後就可以發第二個請求！
> 可以使用js接收服務器的響應，然後使用js來局部刷新！
3. ajax應用場景
* 百度的搜索框
* 用戶注冊時（校驗用戶名是否被注冊過）
4. ajax的優缺點
優點：
* 異步交互：增強了用戶的體驗！
* 性能：因為服務器無需再響應整個頁面，只需要響應部份內容，所以服務器的壓力減輕了！
缺點：
* ajax不能應用在所有場景！
* ajax無端的增多了對服務器的訪問次數，給服務器帶來了壓力！
==========================================
==========================================
ajax發送異步請求（四步操作）
1. 第一步（得到XMLHttpRequest）
* ajax其實只需要學習一個對象：XMLHttpRequest，如果掌握了它，就掌握了ajax！！！
* 得到XMLHttpRequest
> 大多數浏覽器都支持：var xmlHttp = new XMLHttpRequest();
> IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
> IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
* 編寫創建XMLHttpRequest對象的函數
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
alert("哥們兒，你用的是什麼浏覽器啊？");
throw e;
}
}
}
}
2. 第二步（打開與服務器的連接）
* xmlHttp.open()：用來打開與服務器的連接，它需要三個參數：
> 請求方式：可以是GET或POST
> 請求的URL：指定服務器端資源，例如；/day23_1/AServlet
> 請求是否為異步：如果為true表示發送異步請求，否則同步請求！
* xmlHttp.open("GET", "/day23_1/AServlet", true);
3. 第三步（發送請求）
* xmlHttp.send(null)：如果不給可能會造成部份浏覽器無法發送！
> 參數：就是請求體內容！如果是GET請求，必須給出null。
4. 第四步（）
* 在xmlHttp對象的一個事件上注冊監聽器：onreadystatechange
* xmlHttp對象一共有5個狀態：
> 0狀態：剛創建，還沒有調用open()方法;
> 1狀態：請求開始：調用了open()方法，但還沒有調用send()方法
> 2狀態：調用完了send()方法了；
> 3狀態：服務器已經開始響應，但不表示響應結束了！
> 4狀態：服務器響應結束！（通常我們只關心這個狀態！！！）
* 得到xmlHttp對象的狀態：
> var state = xmlHttp.readyState;//可能是0、1、2、3、4
* 得到服務器響應的狀態碼
> var status = xmlHttp.status;//例如為200、404、500
* 得到服務器響應的內容1
> var content = xmlHttp.responseText;//得到服務器的響應的文本格式的內容
> var content = xmlHttp.responseXML;//得到服務器的響應的xml響應的內容，它是Document對象了！
xmlHttp.onreadystatechange = function() {//xmlHttp的5種狀態都會調用本方法
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷：判斷是否為4狀態，而且還要判斷是否為200
// 獲取服務器的響應內容
var text = xmlHttp.responseText;
}
};
==========================================
==========================================
第二例：發送POST請求(如果發送請求時需要帶有參數，一般都用POST請求)
* open：xmlHttp.open("POST" ....);
* 添加一步：設置Content-Type請求頭：
> xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
* send：xmlHttp.send("username=zhangSan&password=123");//發送請求時指定請求體
==========================================
==========================================
第三例：注冊表單之校驗用戶是否注冊！
1. 編寫頁面：
* ajax3.jsp
> 給出注冊表單頁面
> 給用戶名文本框添加onblur事件的監聽
> 獲取文本框的內容，通過ajax4步發送給服務器，得到響應結果
* 如果為1：在文本框後顯示“用戶名已被注冊”
* 如果為0：什麼都不做！
2. 編寫Servlet
* ValidateUsernameServlet
> 獲取客戶端傳遞的用戶名參數
> 判斷是否為itcast
* 是：返回1
* 否：返回0
==========================================
==========================================
響應內容為xml數據
* 服務器端：
> 設置響應頭：ContentType，其值為：text/xml;charset=utf-8
* 客戶端：
> var doc = xmlHttp.responseXML;//得到的是Document對象！
=====================
第四例：響應內容為xml數據
==========================================
==========================================
第五例：省市聯動
1. 頁面
<select name="province">
<option>===請選擇省份===</option>
</select>
<select name="city">
<option>===請選擇城市===</option>
</select>
2. ProvinceServlet
* ProvinceServlet：當頁面加載完畢後馬上請求這個Servlet！
> 它需要加載china.xml文件，把所有的省的名稱使用字符串發送給客戶端！
3. 頁面的工作
* 獲取這個字符串，使用逗號分隔，得到數組
* 循環遍歷每個字符串（省份的名稱），使用每個字符串創建一個<option>元素添加到<select name="province">這個元素中
4. CityServlet
* CityServlet：當頁面選擇某個省時，發送請求！
* 得到省份的名稱，加載china.xml文件，查詢出該省份對應的元素對象！，把這個元素轉換成xml字符串，發送給客戶端
5. 頁面的工作
* 把<select name="city">中的所有子元素刪除，但不要刪除<option>===請選擇城市===</option>
* 得到服務器的響應結果：doc！！！
* 獲取所有的<city>子元素，循環遍歷，得到<city>的內容
* 使用每個<city>的內容創建一個<option>元素，添加到<select name="city">
==========================================
==========================================
XStream
1. 什麼作用
* 可以把JavaBean轉換為（序列化為）xml
2. XStream的jar包
* 核心JAR包：xstream-1.4.7.jar；
* 必須依賴包：xpp3_min-1.1.4c（XML Pull Parser，一款速度很快的XML解析器）；
3. 使用步驟
* XStream xstream = new XStream();
* String xmlStr = xstream.toXML(javabean);
4. 使用細節
* 別名：把類型對應的元素名修改了
> xstream.alias("china", List.class)：讓List類型生成的元素名為china
> xstream.alias("province", Province.class)：讓Province類型生成的元素名為province
* 使用為屬性：默認類的成員，生成的是元素的子元素！我們希望讓類的成員生成元素的屬性
> xstream.useAttributeFor(Province.class, "name")：把Province類的名為name成員，生成<province>元素的name屬性
* 去除Collection類型的成名：我們只需要Collection的內容，而不希望Collection本身也生成一個元素
> xstream.addImplicitCollection(Province.class, "cities")：讓Province類的名為cities(它是List類型的，它的內容還會生成元素)的成名不生成元素
* 去除類的指定成名，讓其不生成xml元素
> xstream.omitField(City.class, "description")：在生成的xml中不會出現City類的名為description的對應的元素！
==========================================
==========================================
JSON
1. json是什麼
* 它是js提供的一種數據交換格式！
2. json的語法
* {}：是對象！
> 屬性名必須使用雙引號括起來！單引不行！！！
> 屬性值：
* null
* 數值
* 字符串
* 數組：使用[]括起來
* boolean值：true和false
3. 應用json
* var person = {"name":"zhangSan", "age":18, "sex":"male"};
4. json與xml比較
* 可讀性：XML勝出
* 解析難度：JSON本身就是JS對象（主場作戰），所以簡單很多
* 流行度：XML已經流行好多年，但在AJAX領域，JSON更受歡迎。
-----------------------------------
json-lib
1. 是什麼？
* 它可以把javabean轉換成json串
2. jar包
* 略
3. 核心類
* JSONObject --> Map
> toString();
> JSONObject map = JSONObject.fromObject(person)：把對象轉換成JSONObject對象
* JSONArray --> List
> toString()
> JSONArray jsonArray = JSONObject.fromObject(list)：把list轉換成JSONArray對象
