案列一：從服務器的得到輸出的數據
Jsp界面
<script type="text/javascript" src="test.js"></script> //引入js中的script語句 <body> <form action="AjaxServlet"> //這里提交到哪里和下面的和誰連接沒啥關系，這里改成AjaxServlet1 <input type="button" value="ok" id="ok"> //下面不變照樣能夠得到一樣結果 </form> </body>
AjaxServlet界面
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("connection succces"); response.getWriter().print("connection ok"); //這里為什么是write因為下面是responseText }
test.Js界面
/** * Ajax建立與服務器端的連接 接收服務器的請求 處理服務器返回的數據 * 開發步驟： * 1.創建XMLHttpRequest對象 * 2.打開和服務器的連接 * 3.發送數據 * 4.接收服務器端的響應 */ /** * 1.創建XMLHttpRequest 對象 */ function createXMLHttpRequest() { //萬能模板 var XMLHttpReq; if (window.XMLHttpRequest) { // 是Mozilla瀏覽器 XMLHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject()) { // IE瀏覽器 try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); //因為ie也會出現不兼容所以拋異常 } catch (e) { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); //微軟的，記住就好 } } return XMLHttpReq; } //ok按鈕點擊時觸發事件，這里我和之前所想的思維都不一樣，因為正常情況window.onload一旦加載下面沒有點擊onclick，那么該方法不執行，然而后面當你點擊按鈕時，因為已經加載結束了，按道理來講就算里面為onclick這個方法也不會執行，因為你在window.onload里面，大方法都沒有執行，方法里面的方法是不會執行的，但這里還是觸發了時間，這也說明老師說的window.onload除了有加載情況下，還有監聽的作用，一點觸發事件就會觸發該方法，這點要明白，同時如果當你去window.onload=function，這個外層的方法，就算你觸發事件也不會有反應，因為 document.getElementById("ok")是要放在方法里，而不是放在外面。
window.onload=function(){ //加載時運行，同時具有監聽的作用 document.getElementById("ok").onclick=function(){ //通過按鈕觸發事件 //1.創建XMLHttpRequest對象 var xmlReq=createXMLHttpRequest(); //2.打開和服務器端的連接 xmlReq.open("GET","AjaxServlet",true);//有GTE和POST方法，中間代表連接路徑，true代表異步 //3.發送數據 xmlReq.send(null); //因為采用的是get方法，所以方法為null //4.接收服務器的響應 xmlReq.onreadystatechange=function(){ if(xmlReq.readyState==4){//判斷對象狀態是否完成 if(xmlReq.status==200){ //信息已經成功返回 var xmltext =xmlReq.responseText; //得到AjaxServlet往外輸出的數據 alert("data-"+xmltext); //輸出結果：data-connection ok }
}
}
}
}