（尊重勞動成果，轉載請注明出處：http://blog.csdn.net/QQ_25827845/article/details/55823800冷血之心的博客）

Ajax入門學習（一）

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一起交流學習哦~