1.創建XMLHttpRequest對象 ( 注意各瀏覽器間的差異 ).
2.注冊回調函數onreadystatechange ( 別加括號 ).
3.open( "get/post","url",true ) ( true 表示異步 )
4.send(null/"...") ( get方式為null，post設置所傳參數 )
5.寫回調函數，處理返回的數據( xml / text ).
* ajax返回的是數據，傳統的web交互返回的是頁面( html+css )。
* xmlHttp.onreadystatechange=callback; 這里的callback不能加()，因為這是將這個方法注冊給onreadystatechange，如果加了()，就相當于把callback的返回值注冊給了onreadystatechange。
* 異步方式，數據回來后就自動調用回調函數，頁面就被改變了。
* ajax不需要表單<form>的提交方式。
* <div>塊級元素，獨占一行。<span> 內聯元素，會連接起來，不會分行。
ajax當前框架：
DOJO，DWR，ext，JQuery，mootools，prototype，script.aculo.us，rico
利用時間戳解決瀏覽器緩存：
只要url一致，瀏覽器就會讀取緩存，不會去再次請求服務器。所以可以用時間做參數，來騙過瀏覽器讀緩存。
function convertURL(url) {
//獲取時間戳 var timestamp = (new Date()).valueOf();
if (url.indexOf("?") >= 0) {
url = url + "&t=" + timestamp; } else { url = url + "?t=" + timestamp;
} return url;
}]]>
* jquery的API，返回的都是jquery對象。
案例：
1) load 方式請求ajax，返回值在div中顯示，載入遠程html文件代碼并插入到DOM中。
ajax_2.jsp：
<%@ page language="java" pageEncoding="UTF-8"%>
<html> <head> <script type="text/javascript" src="jquery-1.2.6-vsdoc-cn.js"></script> <script type="text/javascript"> //用jquery處理ajax請求 function doajax(){ ajax請求的url地址 傳遞到后臺的數組參數 后臺返回來的結果 $('#testja').load('/ajaxTest/jquery-ajax/testajax.do',{param:456},function(responseText){ alert(responseText); }); } </script> </head> <body> <a href="javascript:doajax();">測試jquery-ajax</a> <div id="testja"></div> </body></html>2) get/post 方式請求ajax，上述doajax()代碼可改寫為：
<script type="text/javascript"> function doajax(){ $.get('/ajaxTest/jquery-ajax/testajax.do',{param:456},function(responseText){ $('#testja').html(responseText); }); } </script>3) $.ajax({...}) 更多的控制ajax細節：
//控制細節 function doajax(){ $.ajax({ type: "post", url: "/ajaxTest/jquery-ajax/testajax.do", data: "param=456123&aa=aaa", success: function(responseText){ $('#testja').html(responseText); } }); }4) $.ajaxSetup({...}) 全局設置ajax默認選項，語法等同于$.ajax({...})。
//全局設定ajax $.ajaxSetup({ data: "param=456&aa=aaa" }); //控制細節 function doajax(){ $.ajax({ ---------------------> type: "post", 可以將$.ajax({...})中的設置，全部提到$.ajaxSetup({...})，更加通用。但必須至少保留$.ajax({...}) url: "/ajaxTest/jquery-ajax/testajax.do", //data: "param=456123&aa=aaa", success: function(responseText){ $('#testja').html(responseText); } }); }AjaxTestAction：
public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { String str1 = request.getParameter("param"); StringBuffer sb = new StringBuffer(str1); sb.append("+123"); String responseText = sb.toString(); // 回傳處理的結果，到之前頁面 response.getWriter().println(responseText); <------- 用這種方式將值 傳回給頁面 return null; }5) jquery實現ajax返回XML格式的數據。
function doajax_responseXML() { $.ajax( { type :"post", url :"/ajax_jquery/ajax_jquery/testajax.do?method=doajax_responseXML", dataType :"xml", //在這里設置返回數據的類型 text OR xml. success :callback }); } function callback(responseXML) { var jqueryObj = $(responseXML); //將dom對象，轉化成JQuery對象 var message = jqueryObj.children(); //獲取其中的結點;children("expr") var text = message.text(); $('#testja').html(text); }]]>
【非常好的東東，學會了這個chm文檔，你就能靈活使用jquery了】
點擊這里下載：/Files/huashuai/jquery126.rar
* jquery兼容了各種瀏覽器，不必在擔心瀏覽器兼容問題。
* 遵循W3C的html應該在頁面頂部加上"<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">"
]]>
方法：
.void open(String method,String url,Boolean async); //打開并準備好要發送的請求
//method：分為post、get，post帶的數據量大
//url：ajax所請求的具體地址
//async：true表示異步，才能使用ajax通信，true/false
.void send(String body); //發送請求，也就是說，在這之前要準備好一切
//body：為所要發送的內容體，如果沒有內容體，則傳入null
.void setHeader(String header,String value); //為request設置頭信息
//頭信息的名稱，頭信息的值
.String getResponseHeader(String header); //得到某一條響應的頭信息
//頭信息的名稱
.String getAllResponseHeader(); //以字符串的形式，返回所有響應頭信息
.void abort(); //發出請求后，取消關閉這個請求
屬性：
// 0.表示這個對象沒有被初始化
// 1.調用abort()方法后，會變為1，表示loading
// 2.調用send()方法后，會變為2，表示loaded
// 3.表示已經獲得了部分數據
// 4.完成（成功/失敗） -----------> 其實就關心這個就可以了
.Function onreadystatechange
//是回調函數，在readyState改編后被調用
.String responseText //返回純文本對象(即"字符串")
.XMLDocument responseXML //返回"xml對象"
//都是在readyState為4的時候使用的，獲得response的body內容，xmlhttp.responseText
.Number status String statusText
200 ok //表示 成功
404 notfound //表示 頁面沒有找到，資源沒有找到
500 內部錯誤
]]>
由4部分組成：JS + CSS + DOM + XMLHttpRequest
案例：實現ajax異步通信，局部刷新。開發環境：tomcat服務器(必須)。。
ajax_1_1.html：
<script> var xmlHttp;//創建XMLHttpRequest異步對象function createXMLHttpRequest(){ if(window.ActiveXObject){ // 如果存在ActiveXObject，就是IE瀏覽器 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ // 用于除IE以外的其他瀏覽器 xmlHttp = new XMLHttpRequest(); }}function startCallback() { if(xmlHttp.readyState == 4){ // 請求狀態為４，即請求完成 if(xmlHttp.status == 200){ // 服務器的狀態碼為200,即狀態OK,沒有異常，在這里做你想做的。。 alert(xmlHttp.responseText); } }} function doajax(){ createXMLHttpRequest(); var url = "ajax_2_2.jsp"; xmlHttp.open("GET",url,true); xmlHttp.onreadystatechange=startCallback; xmlHttp.send(null);}</script><input type="button" value="測試異步通信" onclick="doajax();">將上述doajax換成 "POST" 方法請求ajax：
//post方式請求ajax，需要設置setRequestHeader，將參數放置在send中。 function doajax_post() { createXMLHttpRequest(); var par = "abcd"; xmlHttp.open("POST", "/ajax_jquery/ajax_old/testajax.do", true); //需要設置setRequestHeader xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = startCallback; //在send()方法中傳參 xmlHttp.send("param=" + par); }ajax_2_2.jsp：(注意字符編碼問題)
<%@ page language="java" pageEncoding="UTF-8"%>異步測試成功，恭喜您！！！將上述返回值的形式改為 XML： ( 只要改一下回調函數。Action中需要設置response.setContentType("text/xml;charset=utf-8"); )
function callback_responseXML() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { alert(xmlHttp.responseText); var domObj = xmlHttp.responseXML; //返回XML格式的數據 var messageNodes = domObj.getElementsByTagName("message"); //返回的是一個數組 var textNode = messageNodes[0].firstChild; //取到文本內容對應的結點 var messageStr = textNode.nodeValue; //返回文本信息 alert(messageStr); } } }* Action返回給ajax數據的方式：response.getWriter().println("responseText");
]]>