一．Ajax簡(jiǎn)介
Ajax是一種網(wǎng)頁開發(fā)技術(shù)，（Asynchronous Javascript + XML）異步 JavaScript 和 XML；
Ajax是異步交互，局部刷新；
Ajax能減少服務(wù)器壓力；
Ajax能提高用戶體驗(yàn)
二．Ajax交互與傳統(tǒng)交互比較
傳統(tǒng)交互：網(wǎng)頁整體刷新，服務(wù)器壓力大，用戶體驗(yàn)不好；
Ajax交互：局部刷新，服務(wù)器壓力小，用戶體驗(yàn)好。
三.Ajax核心知識(shí)
XMLHttpRequest對(duì)象創(chuàng)建
所有現(xiàn)代瀏覽器均支持XMLHttpRequest對(duì)象（IE5和IE6使用ActiveXObject）。
XMLHttpRequest用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)，這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某個(gè)部分進(jìn)行更新。XMLHttpRequest對(duì)象請(qǐng)求后臺(tái)
open(method,url,async)
規(guī)定請(qǐng)求的類型，url以及是否異步處理請(qǐng)求。
method：請(qǐng)求的類型：get或post
url:文件在服務(wù)器上的位置
async：true(異步)或false(同步)
send(String)
將請(qǐng)求發(fā)送到服務(wù)器
string：僅用于post請(qǐng)求
GET 還是 POST？與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
setRequestHeader(header,value) 向請(qǐng)求添加 HTTP 頭。
header: 規(guī)定頭的名稱 value: 規(guī)定頭的值
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
異步 - True 或 False？
AJAX 指的是異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
為 True 的話，表示的是異步，異步表示程序請(qǐng)求服務(wù)器的同時(shí)，程序可以繼續(xù)執(zhí)行；能提高系統(tǒng)的運(yùn)行效率；為 False 的話，表示同步，JavaScript 會(huì)等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行。如果服務(wù)器繁忙或緩慢，應(yīng)用程序會(huì)掛起或停止。
我們一般都是用 True；
四．XMLHttpRequest對(duì)象響應(yīng)服務(wù)器
onreadystatechange 事件當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。
下面是 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性： onreadystatechange存儲(chǔ)函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。
readyState 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成，且響應(yīng)已就緒 status
200: "OK"
404: 未找到頁面在 onreadystatechange 事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)。
如需獲得來自服務(wù)器的響應(yīng)，請(qǐng)使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。
responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML 獲得 XML 形式的響應(yīng)數(shù)據(jù)。（了解即可）
五.代碼
ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function loadName(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
alert("readState狀態(tài)："+xmlHttp.readyState+",status狀態(tài)"+xmlHttp.status);
//把方法屬性重寫再重新賦個(gè)屬性
xmlHttp.onreadystatechange=function(){
alert("readState狀態(tài)："+xmlHttp.readyState+",status狀態(tài)"+xmlHttp.status);
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
alert(xmlHttp.responseText);
document.getElementById("name").value=xmlHttp.responseText;
}
};
//xmlHttp.open("get", "getAjaxName?name=aaa&age=11", "true");
//xmlHttp.open("post", "getAjaxName?name=aaa&age=11", "true")
//xmlHttp.send();
xmlHttp.open("post", "getAjaxName", "true");
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("name=jack&age=12");
}
</script>
<div>
<input type="button" onclick="loadName()" value="Ajax獲取數(shù)據(jù)"/>
<input type="text" id="name" name="name"/>
</div>
</body>
</html>servlet
GetAjaxNameServlet.java(關(guān)鍵代碼）
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name="+name);
System.out.println("age="+age);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("ajax返回的文本");
out.flush();
out.close();
}web.xml
<servlet> <servlet-name>getAjaxName</servlet-name> <servlet-class>com.icode1024.GetAjaxNameServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>getAjaxName</servlet-name> <url-pattern>/getAjaxName</url-pattern> </servlet-mapping>