JavaWeb筆記-23-AJAX非同步互動，ajax傳送非同步請求（四步操作）
阿新 • • 發佈：2018-11-03
1）ajax：
asynchronous javascript and xml：非同步的js和xml 作用：能使用js非同步訪問伺服器. （原本只是響應伺服器，不能傳送請求） 應用場景： 1）百度的搜尋框 2）使用者註冊時（校驗使用者名稱是否被註冊過） 3）分頁 ... ajax的優缺點 優點： 1）非同步互動：增強了使用者的體驗。 2）效能提升：伺服器無需再響應整個頁面，只響應部份內容。 缺點： 1）ajax不能應用在所有場景。 2）增多了對伺服器的訪問次數。 伺服器給客戶端的響應背景： 伺服器給客戶端的響應一般是一個完整的html頁面。 但在ajax中因為是區域性重新整理，伺服器只響應響應部分頁面中的請求資料。 響應返回的三種資料格式 text：純文字 xml：配置檔案（可以表示多個物件） json：它是js提供的資料互動格式，在ajax中最受歡迎！
2） 非同步互動和同步互動
同步：
發出一個請求後，需要等待伺服器的響應結束後，才能發第二個請求！
重新整理的是整個頁面！
非同步：
可連續傳送請求，無需等待伺服器的響應
可以使用js接收伺服器的響應，然後使用js來區域性重新整理！
jsp中的非同步案例：使用js完成區域性重新整理案例
//jsp頁面
//為<h1 id="h1"></h1>中新增內容
<script type="text/javascript">
window.onload = function(){ //在文件載入完成後馬上執行 3）通過ajax傳送非同步請求（四步操作）：與伺服器間的資料響應互動
1. 第一步：得到XMLHttpRequest物件
三種方式：
1）var xmlHttp = new XMLHttpRequest(); 大多數瀏覽器都支援
2）IE6.0：var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
3）IE5.5以更早版本的IE：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
ajax的核心：XMLHttpRequest物件。
建立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("請求方式","URL",是否非同步)：用來開啟與伺服器的連線。
引數（三個）：
1）請求方式：GET或POST
2）請求的URL：指定伺服器端資源，例如；/day23_1/AServlet
3）請求是否為非同步：如果為true表示傳送非同步請求，否則同步請求！
eg: xmlHttp.open("GET", "/day23_1/AServlet", true);
3. 第三步（傳送請求）
xmlHttp.send(null)：如果不給可能會造成部份瀏覽器無法傳送！
引數：就是請求體內容！如果是GET請求，必須給出null。
4. 第四步（註冊監聽器）
1)在xmlHttp物件的onreadystatechange事件上註冊監聽器：
2)雙重判斷狀態，獲取伺服器響應內容
xmlHttp.onreadystatechange = function() {//xmlHttp的5種狀態都會呼叫本方法
//雙重判斷：判斷是否為4狀態，而且還要判斷是否為200
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// 獲取伺服器的響應內容
var text = xmlHttp.responseText;
}
};4）ajax傳送請求的相關知識點
xmlHttp物件的三個方法:
1）得到xmlHttp物件的狀態：
var state = xmlHttp.readyState; //可能是0、1、2、3、4
2）得到伺服器響應的狀態碼
var status = xmlHttp.status;//例如為200(成功)、404、500
3）得到伺服器響應的內容1
var content = xmlHttp.responseText;//得到伺服器的響應的文字格式的內容
var content = xmlHttp.responseXML;//得到伺服器的響應的xml格式的內容，它是Document物件！
xmlHttp物件的5個狀態：
0狀態：剛建立，還沒有呼叫open()方法;
1狀態：請求開始：呼叫了open()方法，但還沒有呼叫send()方法
2狀態：呼叫完了send()方法了；
3狀態：伺服器已經開始響應，但不表示響應結束了！
4狀態：伺服器響應結束。（重點關心此狀態）