1、AJAX技術(shù)什么是Ajax?AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)。不是一種新技術(shù)，是如下幾種技術(shù)的組合應(yīng)用：基于web標(biāo)準(zhǔn)（standards-based presentation）XHTML+CSS的表示；使用 DOM（Document Object Model）進(jìn)行動(dòng)態(tài)顯示及交互；使用 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及相關(guān)操作；使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)查詢、檢索；使用 JavaScript 將所有的東西綁定在一起。Ajax本質(zhì)上是一個(gè)瀏覽器端的

2、技術(shù)。為什么學(xué)習(xí)Ajax?通過異步模式，提升了用戶體驗(yàn) 優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用現(xiàn)在幾乎所有的B/S軟件項(xiàng)目都會(huì)增加Ajax，從而提高用戶體驗(yàn)度。最典型的應(yīng)用：Google Maps!Ajax基本原理創(chuàng)建ajax程序的基本流程(1.html)創(chuàng)建XMLHttpRequest對(duì)象使用XMLHttpRequest對(duì)象創(chuàng)建請(qǐng)求監(jiān)視r(shí)esponse的狀態(tài)，寫回調(diào)函數(shù)處理服務(wù)器返回的數(shù)據(jù)使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求var request;if (window.XMLHttpRequest) / Mozilla,. request = new X

3、MLHttpRequest(); else if (window.ActiveXObject) / IE request = new ActiveXObject(“Msxml2.XMLHTTP”); request.open(get, “testAjaxServlet );request.onreadystatechange = function()if(request.readyState=4)var result = request.responseText; /得到服務(wù)器端返回的數(shù)據(jù)document.getElementById(“div2”).innerHTML=result; /局部

4、刷新;request.send(null); /如果不寫null,火狐會(huì)報(bào)錯(cuò)。課堂練習(xí)(20分鐘)自己動(dòng)手完成第一個(gè)Ajax程序。模仿老師代碼完整的Ajax實(shí)例代碼(2.html)readyState值含義 0 表示XMLHttpRequest已建立，但還未初始化，這時(shí)尚未調(diào)用open方法 1 表示open方法已經(jīng)調(diào)用，但未調(diào)用send方法（已創(chuàng)建，未發(fā)送） 2 表示send方法已經(jīng)調(diào)用，其他數(shù)據(jù)未知 3 表示請(qǐng)求已經(jīng)成功發(fā)送，正在接受數(shù)據(jù) 4 表示數(shù)據(jù)已經(jīng)成功接收。 Http狀態(tài)碼含義 200 請(qǐng)求成功 404 請(qǐng)求資源未找到 500 內(nèi)部服務(wù)器錯(cuò)誤 課堂練習(xí)(15分鐘)完善自己的第一個(gè)aj

5、ax程序Ajax的兩種傳參方式(3.html)Get方式傳參直接通過url傳參注意：get方式提交經(jīng)常會(huì)遇到瀏覽器緩存問題，瀏覽器不對(duì)同樣的url重復(fù)提交。這時(shí)可以在url后面增加參數(shù)：?rand = Math.random() 或者：rand = new Date()Post方式傳參request.open(“post”,url);req.setRequestHeader(Content-Type,application/x-www-form-urlencoded);req.send(a=3&b=中國(guó)); Ajax接受數(shù)據(jù)的幾種方式(4.html)普通文本數(shù)據(jù)req.responseText

6、得到返回的文本數(shù)據(jù)。XML數(shù)據(jù)（testxml.jsp）服務(wù)器端response.setContentType(text/xml;charset=utf-8); /通過ajax寫xml數(shù)據(jù)最好使用utf-8response.getWriter().println(“朱元璋”); /一端完整的xml數(shù)據(jù),有根節(jié)點(diǎn)、形式良好的！客戶端req.responseXML.getElementsByTagName(name)0.firstChild.data; xpath解析xml數(shù)據(jù)： selectNodes、selectSingleNode（只有ie適用！）為了讓火狐也能用，引入：selectNode

7、.js即可！Ajax接受數(shù)據(jù)的幾種方式JSON(javascript object native)嚴(yán)重推薦大家使用JSON!服務(wù)器端sb.append(“var a= name:朱元璋,age:32,zhiye:皇帝; var b = age:1,name:a,age:2,name:b,age:3,name:c;); 客戶端eval(xmlHttp.responseText); /利用eval函數(shù)將返回的文本轉(zhuǎn)化成js對(duì)象alert();課堂練習(xí)(20分鐘)測(cè)試ajax的兩種傳參方式測(cè)試ajax獲得數(shù)據(jù)的三種方式自己封裝Ajax通用工具方法！詳見：5.html, myAjaxUtil.js注意領(lǐng)悟：函數(shù)也