ajax傳送非同步請求(四步操作)
阿新 • • 發佈：2018-12-30
一.第一步(得到XMLHttpRequest)
- ajax其實只需要學習一個物件:XMLHttpRequest,如果掌握了它,就掌握了ajax!!!
1.得到XMLHttpRequest
- 大多數瀏覽器都支援:var xmlHttp=new XMLHttpRequest();
- IE6.0:var xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
- IE5.0以更早版本的IE:var xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
2.編寫建立XMLHttpRequest物件的函式
function 二.第二步(開啟與伺服器的連線)
- xmlHttp.open():用來開啟與伺服器的連線,它需要三個引數:
- 請求方式:可以是GET與POST
- 請求的URL:指定伺服器端資源,例如:/day23_1/AServlet
- 請求是否為非同步:如果為true表示傳送非同步請求,否則同步請求
xmlHttp.open(“GET”,”/day23_1/AServlet”,true);//比如三.第三步(傳送請求)
- xmlHttp.send(null):如果不給可能會造成部分瀏覽器無法傳送!
- 引數:就是請求體內容!如果是GET請求,必須給出null。
- 如果是POST請求,如下
xmlHttp.send(“username=zhangSan&password=123”);四.第四步
- 在xmlHttp物件的一個事件上註冊監聽器:onreadystatechange
xmlHttp物件一共有5個狀態
- 0:初始化未完成狀態,只是建立了XMLHttpRequest物件,還未呼叫open()方法
- 1:請求已開始,open()方法已呼叫,但還沒呼叫send()方法
- 2:請求傳送完成狀態,send()方法已呼叫
- 3:開始讀取伺服器響應
- 4:讀取伺服器響應結束(通常我們只關心最後這個狀態!!!)
得到xmlHttp物件的狀態
var state = xmlHttp.readyState;//可能是0、1、2、3、4- 得到伺服器響應的狀態碼(200:成功 304:狀態沒有改變 404 500:伺服器錯誤)
var status=xmlHttp.status;//例如200、404、500- 得到伺服器響應的內容
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;
}
};
五.例子一:hello ajax
1.服務端程式碼
public class AServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("Hello AJAX");
response.getWriter().print("Hello AJAX!!!");
}
}
2.頁面程式碼
<script type="text/javascript">
//建立非同步物件
function createXMLHttpRequest(){
try{
return new XMLHttpRequest();//大多數瀏覽器
}catch (e) {
try{
return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
}catch (e) {
try {
return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
alert("哥們兒,你用的什麼瀏覽器????");
throw e;
}
}
}
}
window.onload = function(){ //在文件載入完成後馬上執行!
//得到btn元素
var btn = document.getElementById("btn");
//給btn的click事件註冊監聽
btn.onclick = function(){
/*
ajax四步操作,得到伺服器的響應
把響應記過顯示到h1元素中
*/
/*
1.得到非同步物件
*/
var xmlHttp= createXMLHttpRequest();
/*
2.開啟與伺服器的連線
*指定請求方式
*指定請求的URL
*指定是否為非同步請求
*/
xmlHttp.open("GET","/day23_01/AServelt",true);
/*
3.傳送請求
*/
xmlHttp.send(null);//GET請求沒有請求體,但也要給出null,不然FireFox可能會不能傳送!
/*
4.給非同步物件的onreadystatechange事件註冊監聽器
*/
xmlHttp.onreadystatechange = function(){//當xmlHttp的狀態發生變化時執行
//雙重判斷:xmlHttp的狀態為4(伺服器響應結束),以及伺服器響應的狀態碼為200(響應成功)
if(xmlHttp.readyState ==4 && xmlHttp.status ==200 ){
//獲取伺服器的響應結束
var text=xmlHttp.responseText;
//獲取h1元素
var h1=document.getElementById("h1");
h1.innerHTML = text;
}
};
};
};
</script><body>
<button id="btn">點選這裡</button>
<h1 id="h1"></h1>
</body>
點選按鈕後
