JavaWeb:AJAX
1. AJAX概述
1.1 什么是AJAX
AJAX(Asynchronous Javascript And XML)翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互,傳輸的數據為XML(當然,傳輸的數據不只是XML)
AJAX還有一個最大的特點就是,當服務器響應時,不用刷新整個瀏覽器頁面,而是可以局部刷新。這一特點給用戶的感受是在不知不覺中完成請求和響應過程
- 與服務器異步交互
- 瀏覽器頁面局部刷新
1.2 同步交互與異步交互
- 同步交互:客戶端發出一個請求后,需要等待服務器響應結束后,才能發出第二個請求;
- 異步交互:客戶端發出一個請求后,無需等待服務器響應結束,就可以發出第二個請求。
1.3 AJAX常見應用情景
當我們在百度中輸入一個“傳”字后,會馬上出現一個下拉列表!列表中顯示的是包含“傳”字的10個關鍵字
其實這里就使用了AJAX技術!當文件框發生了輸入變化時,瀏覽器會使用AJAX技術向服務器發送一個請求,查詢包含“傳”字的前10個關鍵字,然后服務器會把查詢到的結果響應給瀏覽器,最后瀏覽器把這10個關鍵字顯示在下拉列表中
- 整個過程中頁面沒有刷新,只是刷新頁面中的局部位置而已!
當請求發出后,瀏覽器還可以進行其他操作,無需等待服務器的響應!
當輸入用戶名后,把光標移動到其他表單項上時,瀏覽器會使用AJAX技術向服務器發出請求,服務器會查詢名為zhangSan的用戶是否存在,最終服務器返回true表示名為zhangSan的用戶已經存在了,瀏覽器在得到結果后顯示“用戶名已被注冊!”
- 整個過程中頁面沒有刷新,只是局部刷新了
- 在請求發出后,瀏覽器不用等待服務器響應結果就可以進行其他操作
1.4 AJAX的優缺點
優點:
- AJAX使用Javascript技術向服務器發送異步請求
- AJAX無須刷新整個頁面
- 因為服務器響應內容不再是整個頁面,而是頁面中的局部,所以AJAX性能高
缺點:
- AJAX并不適合所有場景,很多時候還是要使用同步交互
- AJAX雖然提高了用戶體驗,但無形中向服務器發送的請求次數增多了,導致服務器壓力增大
- 因為AJAX是在瀏覽器中使用Javascript技術完成的,所以還需要處理瀏覽器兼容性問題
2. AJAX技術
2.1 AJAX第一例
2.1.1 準備工作
因為AJAX也需要請求服務器,異步請求也是請求服務器,所以我們需要先寫好服務器端代碼,即編寫一個Servlet!
這里,Servlet很簡單,只需要輸出“Hello AJAX!”。
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.1.2 AJAX核心:XMLHttpRequest
其實AJAX就是在Javascript中多添加了一個對象:XMLHttpRequest對象。所有的異步交互都是使用XMLHttpRequest對象完成的。也就是說,我們只需要學習一個Javascript的新對象即可
注意,各個瀏覽器對XMLHttpRequest的支持也是不同的!大多數瀏覽器都支持DOM2規范,都可以使用:var xmlHttp = new XMLHttpRequest()來創建對象;但IE有所不同,IE5.5以及更早版本需要:var xmlHttp = 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) {// 適用于IE6try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {// 適用于IE5.5,以及IE更早版本try{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e){}}} return xmlHttp; }2.1.3 打開與服務器的連接
當得到XMLHttpRequest對象后,就可以調用該對象的open()方法打開與服務器的連接了。open()方法的參數如下:
open(method, url, async):
- method:請求方式,通常為GET或POST
- url:請求的服務器地址,例如:/ajaxdemo1/AServlet,若為GET請求,還可以在URL后追加參數
- async:這個參數可以不給,默認值為true,表示異步請求
2.1.4 發送請求
當使用open打開連接后,就可以調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數為POST請求參數,即對應HTTP協議的請求體內容,若是GET請求,需要在URL后連接參數。
注意:若沒有參數,需要給出null為參數!若不給出null為參數,可能會導致FireFox瀏覽器不能正常發送請求!
xmlHttp.send(null);2.1.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); } };2.1.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時才能獲取到!
2.2 AJAX第二例:發送POST請求
2.2.1 發送POST請求注意事項
POST請求必須設置ContentType請求頭的值為application/x-www.form-encoded。表單的enctype默認值就是為application/x-www.form-encoded!因為默認值就是這個,所以大家可能會忽略這個值!當設置了<form>的enctype=” application/x-www.form-encoded”時,等同與設置了Cotnent-Type請求頭。
但在使用AJAX發送請求時,就沒有默認值了,這需要我們自己來設置請求頭:
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");當沒有設置Content-Type請求頭為application/x-www-form-urlencoded時,Web容器會忽略請求體的內容。所以,在使用AJAX發送POST請求時,需要設置這一請求頭,然后使用send()方法來設置請求體內容。
xmlHttp.send("b=B");這時Servlet就可以獲取到這個參數!!!
AServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {System.out.println(request.getParameter("b"));System.out.println("Hello AJAX!");response.getWriter().print("Hello AJAX!");}ajax2.jsp
<script type="text/javascript"> function createXMLHttpRequest() {try {return new XMLHttpRequest();//大多數瀏覽器} catch (e) {try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {return new ActiveXObject("Microsoft.XMLHTTP");}} }function send() {var xmlHttp = createXMLHttpRequest();xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {var div = document.getElementById("div1");div.innerHTML = xmlHttp.responseText;}};xmlHttp.open("POST", "/ajaxdemo1/AServlet?a=A", true);xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xmlHttp.send("b=B"); } </script> <h1>AJAX2</h1> <button onclick="send()">測試</button> <div id="div1"></div>2.3 AJAX第三例:用戶名是否已被注冊
2.3.1 功能介紹
在注冊表單中,當用戶填寫了用戶名后,把光標移開后,會自動向服務器發送異步請求。服務器返回true或false,返回true表示這個用戶名已經被注冊過,返回false表示沒有注冊過。
客戶端得到服務器返回的結果后,確定是否在用戶名文本框后顯示“用戶名已被注冊”的錯誤信息!
2.3.2 案例分析
- regist.jsp頁面中給出注冊表單
- 在username表單字段中添加onblur事件,調用send()方法
- send()方法獲取username表單字段的內容,向服務器發送異步請求,參數為username
- RegistServlet:獲取username參數,判斷是否為“itcast”,如果是響應true,否則響應false
2.3.3 實現代碼
regist.jsp
<script type="text/javascript"> function createXMLHttpRequest() {try {return new XMLHttpRequest();} catch (e) {try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {return new ActiveXObject("Microsoft.XMLHTTP");}} }function send() {var xmlHttp = createXMLHttpRequest();xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {if(xmlHttp.responseText == "true") {document.getElementById("error").innerHTML = "用戶名已被注冊!";} else {document.getElementById("error").innerHTML = "";}}};xmlHttp.open("POST", "/ajaxdemo1/BServlet", true);xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");var username = document.getElementById("username").value;xmlHttp.send("username=" + username); } </script> <h1>注冊</h1> <form action="" method="post"> 用戶名:<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/> 密 碼:<input type="text" name="password"/><br/> <input type="submit" value="注冊"/> </form>RegistServlet.java
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");String username = request.getParameter("username");if("itcast".equals(username)) {response.getWriter().print(true);} else {response.getWriter().print(false);}}2.4 AJAX第四例:省市二級聯動
2.4.1 功能介紹
select.jsp
<h1>省市聯動</h1> 省: <select name="province" id="province"><option>===請選擇===</option> </select> 市: <select name="city" id="city"><option>===請選擇===</option> </select>當select.jsp頁面打開時,向服務器發送異步請求,得到所有省份的名稱(文本數據)。然后使用每個省份名稱創建<option>,添加到<select name=”province”>中
并且為<select name=”province”>元素添加onchange事件監聽。當選擇的省份發生變化時,再向服務器發送異常請求,得到當前選中的省份下所有城市(XML數據)。然后客戶端解析XML文檔,使用每個城市名稱創建<option>,添加到<select name=”city”>元素中
2.4.2 代碼實現
服務器端:使用china.xml保存所有省份和城市名稱:
china.xml
<?xml version="1.0" encoding="utf-8"?> <china><province name="北京"><city>東城區</city><city>西城區</city>……</province><province name="天津"><city>和平區</city><city>河東區</city>……</province><province name="河北"><city>石家莊</city><city>衡水</city>……</province> …… </china>- ProvinceServlet:負責把所有省份名稱響應給客戶端,這需要使用dom4j解析china.xml,得到所有<province>元素的name屬性值,連接成一個字符串發送給客戶端
- CityServlet:負責得到某個省份元素,然后以字符串形式發送給客戶端
ProvinceServlet.java
public class ProvinceServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 注意設置編碼response.setContentType("text/html;charset=utf-8");// 使用DOM4J解析xml文檔InputStream input = this.getClass().getClassLoader().getResourceAsStream("china.xml");SAXReader reader = new SAXReader();try {Document doc = reader.read(input);// xpath查詢所有province元素的name屬性List<Attribute> provinceNameAttributeList = doc.selectNodes("//province/@name");// 用來裝載所有name屬性值List<String> provinceNames = new ArrayList<String>();// 遍歷每個屬性,獲取屬性名稱,添加到list中for(Attribute proAttr : provinceNameAttributeList) {provinceNames.add(proAttr.getValue());} // System.out.println(provinceNames);// 把list轉換成字符串String str = provinceNames.toString();// 把字符串前后中的[]去除發送給客戶端response.getWriter().print(str.substring(1, str.length()-1));} catch (DocumentException e) {throw new RuntimeException(e);}} }CityServlet.java
public class CityServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");// 注意,這里內容類型必須是text/xml,不然客戶端得到的就不是xml文檔對象,而是字符串了。response.setContentType("text/xml;charset=utf-8");// 獲取省份參數String provinceName = request.getParameter("provinceName");InputStream input = this.getClass().getClassLoader().getResourceAsStream("china.xml");SAXReader reader = new SAXReader();try {Document doc = reader.read(input);// 查詢指定省份名稱的<province>元素Element provinceElement = (Element)doc.selectSingleNode("//province[@name='" + provinceName + "']"); // System.out.println(provinceElement.asXML());// 把元素轉換成字符串發送給客戶端response.getWriter().print(provinceElement.asXML());} catch (Exception e) {throw new RuntimeException(e);}} }客戶端:
- 在打開select.jsp頁面時就向服務器請求所有省份的名稱,添加到<select name=”province”>元素中
- 給<select name=”province”>元素添加onchange事件監聽,內容為向服務器發送請求,得到XML文檔:<province>元素,然后解析它,添加到<select name=”city”>中
3. XStream
3.1 XStream的作用
XStream可以把JavaBean對象轉換成XML!
通常服務器向客戶端響應的數據都是來自數據庫的一組對象,而我們不能直接把對象響應給響應端,所以我們需要把對象轉換成XML再響應給客戶端,這時就需要使用XStream組合了。
3.2 XStream入門
為了演示XStream的作用,我們需要先寫兩個類,Province和City。
City.java
public class City {private String name;private String description; …… }Province.java
public class Province {private String name;private List<City> cities = new ArrayList<City>();public void addCity(City city) {cities.add(city);} …… }接下來,我們需要寫一個main(),創建一個List,List中存放兩個Province對象!最終我們把List轉換成XML
Province p1 = new Province("遼寧省"); p1.addCity(new City("沈陽", "shenyang")); p1.addCity(new City("大連", "dalian"));Province p2 = new Province("吉林省"); p2.addCity(new City("長春", "changchen")); p2.addCity(new City("白城", "baicheng"));List<Province> list = new ArrayList<Province>();list.add(p1); list.add(p2);3.2.1 XStream相關JAR包
我們可以到http://xstream.codehaus.org/地址去下載XStream安裝包!
XStream的必導JAR包:
- 核心JAR包:xstream-1.4.7.jar
- 必須依賴包:xpp3_min-1.1.4c(XML Pull Parser,一款速度很快的XML解析器)
3.2.2 使用XStream把Java對象轉換成XML
下面是使用XStream轉換list為XML的代碼:
XStream xstream = new XStream(); String s = xstream.toXML(list); System.out.println(s); <list><cn.itcast.xstream.demo1.Province><name>遼寧省</name><cities><cn.itcast.xstream.demo1.City><name>沈陽</name><description>shenyang</description></cn.itcast.xstream.demo1.City><cn.itcast.xstream.demo1.City><name>大連</name><description>dalian</description></cn.itcast.xstream.demo1.City></cities></cn.itcast.xstream.demo1.Province><cn.itcast.xstream.demo1.Province><name>吉林省</name><cities><cn.itcast.xstream.demo1.City><name>長春</name><description>changchen</description></cn.itcast.xstream.demo1.City><cn.itcast.xstream.demo1.City><name>白城</name><description>baicheng</description></cn.itcast.xstream.demo1.City></cities></cn.itcast.xstream.demo1.Province> </list>也就是說,XStream是根據對象名、類名、屬性名來生成XML文檔的!
3.2.3 alias用法
大家也看到了,生成的XML中,與類名對應的元素名稱包含了包名部分,這很不好看!若想自定義生成的元素名稱,需要使用XStream為類名提供別名:
xstream.alias("province", Province.class); xstream.alias("china", List.class); xstream.alias("city", City.class); <china><province><name>遼寧省</name><cities><city><name>沈陽</name><description>shenyang</description></city><city><name>大連</name><description>dalian</description></city></cities></province><province><name>吉林省</name><cities><city><name>長春</name><description>changchen</description></city><city><name>白城</name><description>baicheng</description></city></cities></province> </china>3.2.4 把子元素變為元素屬性
例如我們需要把子元素變成:樣式,那么需要調用如下方法:
xstream.useAttributeFor(Province.class, "name"); <china><province name="遼寧省"><cities><city><name>沈陽</name><description>shenyang</description></city><city><name>大連</name><description>dalian</description></city></cities></province><province name="吉林省"><cities><city><name>長春</name><description>changchen</description></city><city><name>白城</name><description>baicheng</description></city></cities></province> </china>3.2.5 去除集合屬性對應元素
大家可能已經發現了,因為Pronvice類有一個cities成員,所以生成了<cities>元素,但這個元素對XML文檔而言沒有什么意義,所以我們希望把它去除!
xstream.addImplicitCollection(Province.class, "cities"); <china><province name="遼寧省"><city><name>沈陽</name><description>shenyang</description></city><city><name>大連</name><description>dalian</description></city></province><province name="吉林省"><city><name>長春</name><description>changchen</description></city><city><name>白城</name><description>baicheng</description></city></province> </china>3.2.6 讓類的成員不生成對應XML元素
到現在為止,我們都是每個類,每個成員都有對應的元素(或屬性)存在,但有時我們并不希望某些類的成員在對應的XML文檔中出現,例如我們不希望City類的description成員出現在XML文檔中,可以使用下面方法:
xstream.omitField(City.class, "description"); <china><province name="遼寧省"><city><name>沈陽</name></city><city><name>大連</name></city></province><province name="吉林省"><city><name>長春</name></city><city><name>白城</name></city></province> </china>4. JSON
4.1 什么是JSON
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
JSON是用字符串來表示Javascript對象,例如可以在Servlet中發送一個JSON格式的字符串給客戶端Javascript,Javascript可以執行這個字符串,得到一個Javascript對象。
XML也可以用來佟大為數據交換,前面已經學習過在Servlet中發送XML給Javascript,然后Javascript再去解析XML。
4.2 JSON對象語法
JSON 語法:
- 數據在名稱/值對中
- 數據由逗號分隔
- 花括號保存對象
- 方括號保存數組
注意,key也要在雙引號中!
JSON值:
- 數字(整數或浮點數)
- 字符串(在雙引號中)
- 邏輯值(true 或 false)
- 數組(在方括號中)
- 對象(在花括號中)
- null
帶有方法的JSON對象:
var person = {"name":"zhangSan", "getName":function() {return this.name;}}; alert(person.name); alert(person.getName());4.3 JSON與XML比較
- 可讀性:XML勝出;
- 解碼難度:JSON本身就是JS對象(主場作戰),所以簡單很多;
- 流行度:XML已經流行好多年,但在AJAX領域,JSON更受歡迎。
4.4 把Java對象轉換成JSON對象
apache提供的json-lib小工具,它可以方便的使用Java語言來創建JSON字符串。也可以把JavaBean轉換成JSON字符串。
4.4.1 json-lib核心jar包
json-lib的核心jar包有:
- json-lib.jar
json-lib的依賴jar包有:
- commons-lang.jar
- commons-beanutils.jar
- commons-logging.jar
- commons-collections.jar
- ezmorph.jar
4.4.2 json-lib中的核心類
在json-lib中只有兩個核心類:
- JSONObject
- JSONArray
4.5 JSONObject
JSONObject類本身是一個Map,所以學習它很方便。
JSONObject jo = new JSONObject(); jo.put("name", "zhangSan"); jo.put("age", "18"); jo.put("sex", "male"); System.out.println(jo.toString());Person person = new Person("liSi", 18, "female"); JSONObject jo = JSONObject.fromObject(person); System.out.println(jo.toString());Map map = new HashMap(); map.put("name", "wangWu"); map.put("age", "81"); map.put("sex", "male");JSONObject jo = JSONObject.fromObject(map); System.out.println(jo.toString());String xml = "<person><name>zhaoLiu</name><age>59</age><sex>female</sex></person>"; XMLSerializer serial = new XMLSerializer(); JSONObject jo = (JSONObject)serial.read(xml); System.out.println(jo.toString());4.6 JSONArray
JSONArray本身是一個List,所以使用起來很方便。
JSONArray ja = new JSONArray(); Person p1 = new Person("zhangSan", 18, "male"); Person p2 = new Person("liSi", 23, "female"); ja.add(p1); ja.add(p2);System.out.println(ja.toString());Person p1 = new Person("zhangSan", 18, "male"); Person p2 = new Person("liSi", 23, "female"); List<Person> list = new ArrayList<Person>(); list.add(p1); list.add(p2);JSONArray ja = JSONArray.fromObject(list);System.out.println(ja.toString());Person p1 = new Person("zhangSan", 18, "male"); Person p2 = new Person("liSi", 23, "female"); Person[] persons = {p1, p2};JSONArray ja = JSONArray.fromObject(persons);System.out.println(ja.toString());5. JS解釋服務器發送過來的JSON字符串
服務器發送過來JSON字符串后,客戶端需要對其進行解析。這時客戶端需要使用eval()方法對JSON字符串進行執行!但要注意,eval()方法在執行JSON時,必須把JSON字符串使用一對圓括號括起來。
var json = "{\"name\":\"zhangSan\", \"age\":\"18\", \"sex\":\"male\"}"; var person = eval("(" + json + ")"); alert(person.name + ", " + person.age + ", " + person.sex);6. ajaxutils小工具
// 創建request對象 function createXMLHttpRequest() {try {return new XMLHttpRequest();//大多數瀏覽器} catch (e) {try {return ActvieXObject("Msxml2.XMLHTTP");//IE6.0} catch (e) {try {return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 } catch (e) {alert("哥們兒,您用的是什么瀏覽器啊?");throw e;}}} } /** option對象有如下屬性*//*請求方式*/method, /*請求的url*/ url, /*是否異步*/asyn, /*請求體*/params, /*回調方法*/callback,/*服務器響應數據轉換成什么類型*/typefunction ajax(option) {/** 1. 得到xmlHttp*/var xmlHttp = createXMLHttpRequest();/** 2. 打開連接*/if(!option.method) {//默認為GET請求option.method = "GET";}if(option.asyn == undefined) {//默認為異步處理option.asyn = true;}xmlHttp.open(option.method, option.url, option.asyn);/** 3. 判斷是否為POST*/if("POST" == option.method) {xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");}/** 4. 發送請求*/xmlHttp.send(option.params);/** 5. 注冊監聽*/xmlHttp.onreadystatechange = function() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷var data;// 獲取服務器的響應數據,進行轉換!if(!option.type) {//如果type沒有賦值,那么默認為文本data = xmlHttp.responseText;} else if(option.type == "xml") {data = xmlHttp.responseXML;} else if(option.type == "text") {data = xmlHttp.responseText;} else if(option.type == "json") {var text = xmlHttp.responseText;data = eval("(" + text + ")");}// 調用回調方法option.callback(data);}}; };總結
以上是生活随笔為你收集整理的JavaWeb:AJAX的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JavaWeb:MVC设计模式
- 下一篇: 记住linux terminal下的快捷