Ajax 及裏面的XStream《黑馬程序員_超全面的JavaWeb視頻教程vedio》
阿新 • • 發佈：2017-06-11
客戶端 新的 請求 mes cit 局部刷新 查詢 數據交換格式 必須
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
Ajax 及裏面的XStream《黑馬程序員_超全面的JavaWeb視頻教程vedio》