AJAX:如何編寫一個關於AJAX的Hello World?(ajax傳送非同步請求（四步操作）)
用到的一個Servlet類：
package cn.edu.web.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/AServlet") public class AServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //設定編碼 response.setContentType("text/html;charset=utf-8"); //在控制檯輸出Hello AJAX System.out.println("Hello AJAX"); //在瀏覽器裡面點選按鈕區域性重新整理後輸出 response.getWriter().print("Hello AJAX<br />"+"伺服器響應了頁面的區域性重新整理，這就是AJAX"); } }
ajax的jsp程式碼：
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>AJAX的Hello World</title> <script type="text/javascript"> //建立非同步物件的函式 function createXMLHttpRequest(){ try { return new XMLHttpRequest();//大多數瀏覽器 } catch (e) { try { return ActiveXObject("Msxml2.XMLHTTP");//IE6.0 } catch (e) { try { return ActiveXObject("Micrsoft.XMLHTTP");//IE5.5 } catch (e) { alert("哥們兒，你用的是什麼瀏覽器啊?");//太古老了 throw e; } } } } window.onload = function(){//文件載入完畢後執行 var btn = document.getElementById("btn"); btn.onclick = function(){//給按鈕的點選事件註冊監聽器 /* AJAX四步操作,得到伺服器的響應 把響應結果顯示到h1元素中 */ //1.得到非同步物件 var xmlHttp = createXMLHttpRequest();//呼叫建立xmlhttp的函式 /* 2.開啟與伺服器的連線 *指定請求方式 *指定請求的URL *指定是否為非同步請求 //注意：到客戶端時已經沒有了jsp，jstl等標籤，伺服器處理為了html */ //伺服器吧jsp變成了html傳送過來了 xmlHttp.open("GET","<c:url value='/AServlet' />",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> </head> <body> <button id="btn">點選這裡</button> <h1 id="h1"></h1> </body> </html>
瀏覽器的效果如下(點選這裡之後)
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;
}
};