1、準備工作

因為AJAX也需要請求伺服器，非同步請求也是請求伺服器，所以我們需要先寫好伺服器端程式碼，即編寫一個Servlet！

這裡，Servlet很簡單，只需要輸出“HelloAJAX!”。

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、AJAX核心（XMLHttpRequest）

其實AJAX就是在Javascript中多添加了一個物件：XMLHttpRequest物件。所有的非同步互動都是使用XMLHttpRequest物件完成的。也就是說，我們只需要學習一個Javascript的新物件即可。

注意，各個瀏覽器對XMLHttpRequest的支援也是不同的！

大多數瀏覽器都支援DOM2規範，都可以使用：var xmlHttp = new XMLHttpRequest()來建立物件；

但IE有所不同，IE5.5以及更早版本需要：varxmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)

而IE6中需要：var xmlHttp = new ActiveXObject(“Msmxl2.XMLHTTP”)來建立物件；

而IE7以及更新版本也支援DOM2規範。

為了處理瀏覽器相容問題，給出下面方法來建立XMLHttpRequest物件：

function createXMLHttpRequest() {
		var xmlHttp;
		// 適用於大多數瀏覽器，以及IE7和IE更高版本
		try{
			xmlHttp = new XMLHttpRequest();
		} catch (e) {
			// 適用於IE6
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				// 適用於IE5.5，以及IE更早版本
				try{
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e){}
			}
		}			
		return xmlHttp;
	}
 

3、開啟與伺服器的連線（open方法）

當得到XMLHttpRequest物件後，就可以呼叫該物件的open()方法開啟與伺服器的連線了。open()方法的引數如下：

open(method,url, async)：

• method：請求方式，通常為GET或POST；
• url：請求的伺服器地址，例如：/ajaxdemo1/AServlet，若為GET請求，還可以在URL後追加引數；
• async：這個引數可以不給，預設值為true，表示非同步請求；

var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "/ajaxdemo1/AServlet", true);

4、傳送請求

當使用open開啟連線後，就可以呼叫XMLHttpRequest物件的send()方法傳送請求了。send()方法的引數為POST請求引數，即對應HTTP協議的請求體內容，若是GET請求，需要在URL後連線引數。

注意：若沒有引數，需要給出null為引數！若不給出null為引數，可能會導致FireFox瀏覽器不能正常傳送請求！

	xmlHttp.send(null);

5、接收伺服器響應

當請求傳送出去後，伺服器端Servlet就開始執行了，但伺服器端的響應還沒有接收到。接下來我們來接收伺服器的響應。

XMLHttpRequest物件有一個onreadystatechange事件，它會在XMLHttpRequest物件的狀態發生變化時被呼叫。下面介紹一下XMLHttpRequest物件的5種狀態：

0：初始化未完成狀態，只是建立了XMLHttpRequest物件，還未呼叫open()方法；

1：請求已開始，open()方法已呼叫，但還沒呼叫send()方法；

2：請求傳送完成狀態，send()方法已呼叫；

3：開始讀取伺服器響應；

4：讀取伺服器響應結束。

onreadystatechange事件會在狀態為1、2、3、4時引發。

　　下面程式碼會被執行四次！對應XMLHttpRequest的四種狀態！

xmlHttp.onreadystatechange = function() {
			alert('hello');
		};

但通常我們只關心最後一種狀態，即讀取伺服器響應結束時，客戶端才會做出改變。我們可以通過XMLHttpRequest物件的readyState屬性來得到XMLHttpRequest物件的狀態。

xmlHttp.onreadystatechange = function() {
			if(xmlHttp.readyState == 4) {
				alert('hello');	
			}
		};

其實我們還要關心伺服器響應的狀態碼是否為200，其伺服器響應為404，或500，那麼就表示請求失敗了。我們可以通過XMLHttpRequest物件的status屬性得到伺服器的狀態碼。

最後，我們還需要獲取到伺服器響應的內容，可以通過XMLHttpRequest物件的responseText得到伺服器響應內容。

xmlHttp.onreadystatechange = function() {
			if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				alert(xmlHttp.responseText);	
			}
		};

6、AJAX第一例小結

• 建立XMLHttpRequest物件；
• 呼叫open()方法開啟與伺服器的連線；
• 呼叫send()方法傳送請求；
• 為XMLHttpRequest物件指定onreadystatechange事件函式，這個函式會在XMLHttpRequest的1、2、3、4，四種狀態時被呼叫；

XMLHttpRequest物件的5種狀態：

0：初始化未完成狀態，只是建立了XMLHttpRequest物件，還未呼叫open()方法；

1：請求已開始，open()方法已呼叫，但還沒呼叫send()方法；

2：請求傳送完成狀態，send()方法已呼叫；

3：開始讀取伺服器響應；

4：讀取伺服器響應結束。

通常我們只關心4狀態。

XMLHttpRequest物件的status屬性表示伺服器狀態碼，它只有在readyState為4時才能獲取到。

XMLHttpRequest物件的responseText屬性表示伺服器響應內容，它只有在readyState為4時才能獲取到！

如果對你有幫助，記得點贊哦~歡迎大家關注我的部落格，可以進群366533258一起交流學習哦~