Ajax

Ajax(Asynchronous javascript and xml)
異步的js和xml
ajax使用js異步訪問訪問服務器，服務器響應數據給客戶端text、xml、json
優點：增強用戶體驗，因服務器只用響應部分內容減輕了服務器壓力

Ajax發送異步請求
1、得到XMLHttpRequest對象
2、打開與服務器連接xmlHttp.open()
3、發送請求xmlHttp.send(請求方式,URL,true(異步請求)/..)
4、讀取服務器響應
xmlHttp對象的5個狀態
0：剛創建
1：請求開始
2：請求已發送
3：服務器開始響應
4：服務器響應結束
得到XMLHttp對象狀態
var state = xmlHttp.reaydyState;
得到服務器響應的狀態碼
var status = xmlHttp.status;
得到服務器的相應內容
var content = xmlHttp.responseText;//得到服務器響應的文本格式內容
var content = xmlHttp.responseXML;//得到服務器響應的xml內容（Document對象）
！XMLHttpRequest（異步請求對象）在不同瀏覽器中創佳語法不同

<script type="text/javascript">
function createXMLHttpRequest() {
	try {
		return new XMLHttpRequest();//大多數瀏覽器
	} catch (e) {
		try {
			return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
		} catch (e) {
			try {
				return ActvieXObject("Microsoft.XMLHTTP");//IE5及更早版本	
			} catch (e) {
				throw e;
			}
		}
	}
}
</script>

！發送post請求
open()打開與服務器連接後，設置請求頭
    xmlHttp.setRequestHead("Content-Type","application/x-www-form-urlencoded");
！

-----------------------------------------------------------------------------------------------------------------

發送GET請求

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("UTF-8");
		
		response.getWriter().print("This is AJAX.");
	}

window.onload = function(){
    var btn =document.getElementById("btn");
    btn.onclick = function(){
        //註冊監聽
        //1.得到XMLHttpRequest異步請求對象
        var xmlHttpRequest = createXMLHttpRequest();
        //2.打開與服務器的連接
        xmlHttpRequest.open("GET","<c:url value='/Aservlet'/>",true);
        //3.發送請求
        xmlHttpRequest.send(null);//GET請求沒有請求體，但是必須給null
        //4.給異步請求對象的onreadystatechange事件註冊監聽器
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){
                var text = xmlHttpRequest.responseText;//獲取響應內容
                //將相應內容添加到h1
                var h1 = document.getElementById("h1");
                h1.innerHTML=text;
            }
        };
    };
};

發送POST請求

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		request.setCharacterEncoding("UTF-8");
		
		String username=request.getParameter("username");
		response.getWriter().print(username+"This is AJAX.");
	}

window.onload = function(){
	var btn =document.getElementById("btn");
	btn.onclick = function(){
		//註冊監聽
		//1.得到XMLHttpRequest異步請求對象
		var xmlHttpRequest = createXMLHttpRequest();
		//2.打開與服務器的連接
		xmlHttpRequest.open("POST","<c:url value='/Aservlet'/>",true);
		xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//3.發送請求
		xmlHttpRequest.send("username=Hello!");//GET請求沒有請求體，但是必須給null
		//4.給異步請求對象的onreadystatechange事件註冊監聽器
		xmlHttpRequest.onreadystatechange = function(){
			if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){
				var text = xmlHttpRequest.responseText;//獲取響應內容
				//將相應內容添加到h1
				var h1 = document.getElementById("h1");
				h1.innerHTML=text;
			}
		};
	};
};

響應內容爲XML

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String xml = "<students>" +
				"<student number='ITCAST_1001'>" +
				"<name>zhangSan</name>" +
				"<age>18</age>" + 
				"<sex>male</sex>" +
				"</student>" +
				"</students>";
			
			response.setContentType("text/xml;charset=utf-8");
			response.getWriter().print(xml);
	}

window.onload = function(){
	var btn =document.getElementById("btn");
	btn.onclick = function(){
		//註冊監聽
		//1.得到XMLHttpRequest異步請求對象
		var xmlHttpRequest = createXMLHttpRequest();
		//2.打開與服務器的連接
		xmlHttpRequest.open("GET","<c:url value='/BServlet'/>",true);
		//3.發送請求
		xmlHttpRequest.send(null);//GET請求沒有請求體，但是必須給null
		//4.給異步請求對象的onreadystatechange事件註冊監聽器
		xmlHttpRequest.onreadystatechange = function(){
			if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){
				var doc = xmlHttpRequest.responseXML;//獲取響應內容
				// 處理瀏覽器的差異
				if(window.addEventListener) {
					number = ele.getElementsByTagName("number")[0].textContent;//其他瀏覽器
				} else {
					number = ele.getElementsByTagName("number")[0].text;//IE支持
				}
				if(window.addEventListener) {
					name = ele.getElementsByTagName("name")[0].textContent;//其他瀏覽器
				} else {
					name = ele.getElementsByTagName("name")[0].text;//IE支持
				}
				if(window.addEventListener) {
					age = ele.getElementsByTagName("age")[0].textContent;//其他瀏覽器
				} else {
					age = ele.getElementsByTagName("age")[0].text;//IE支持
				}
				if(window.addEventListener) {
					sex = ele.getElementsByTagName("sex")[0].textContent;//其他瀏覽器
				} else {
					sex = ele.getElementsByTagName("sex")[0].text;//IE支持
				}

				var text = number + ", " + name + ", " + age + ", " + sex;
				
				//將相應內容添加到h1
				var h1 = document.getElementById("h1");
				h1.innerHTML=text;
			}
		};
	};
};