AJAX(用法總結(jié)-精華版)

1、精選優(yōu)質(zhì)文檔-傾情為你奉上精選優(yōu)質(zhì)文檔-傾情為你奉上專(zhuān)心-專(zhuān)注-專(zhuān)業(yè)專(zhuān)心-專(zhuān)注-專(zhuān)業(yè)精選優(yōu)質(zhì)文檔-傾情為你奉上專(zhuān)心-專(zhuān)注-專(zhuān)業(yè)1、ajax是什么?ajax: asynchronous javascript and xml: 異步的javascript和xml。ajax是一種用來(lái)改善用戶體驗(yàn)的技術(shù)，其本質(zhì)是利用瀏覽器內(nèi)置的一種特殊的對(duì)象(XMLHttpRequest)異步(即發(fā)送請(qǐng)求時(shí)，瀏覽器不會(huì)銷(xiāo)毀當(dāng)前頁(yè)面，用戶可以繼續(xù)在當(dāng)前頁(yè)面做其它的操作)的向服務(wù)器發(fā)送請(qǐng)求,并且利用服務(wù)器返回的數(shù)據(jù)(不再是一個(gè)完整的頁(yè)面，只是部分的數(shù)據(jù)，一般使用文本或者xml返回)來(lái)部分更新當(dāng)前頁(yè)面。使用ajax技術(shù)之后

2、，頁(yè)面無(wú)刷新，并且不打斷用戶的操作。2、ajax對(duì)象(1)如何獲得ajax對(duì)象?XMLHttpRequest并沒(méi)有標(biāo)準(zhǔn)化，要區(qū)分瀏覽器:function getXhr()var xhr;if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); / 非ie瀏覽器elsexhr = new ActiveXObject(Microsoft.XMLHttp); / ie瀏覽器(2)ajax對(duì)象的屬性a. onreadystatechange: 綁訂一個(gè)事件處理函數(shù)(即: 注冊(cè)一個(gè)監(jiān)聽(tīng)器) 當(dāng)ajax對(duì)象的readyState值發(fā)生了改變(比如， 從0-1

3、)，就會(huì)產(chǎn)生readystatechange事件。b. responseText: 獲得服務(wù)器返回的文本c. responseXML: 獲得服務(wù)器返回的XML dom對(duì)象d. status: 獲得狀態(tài)碼e. readyState: 返回ajax對(duì)象與服務(wù)器通訊的狀態(tài)。返回值是一個(gè)number類(lèi)型的值，不同的值表示不同的含義:0: (為初始化) - 對(duì)象已建立，但是尚未初始化(尚未調(diào)用 open方法)1: (初始化) - 對(duì)象已建立，尚未調(diào)用send方法2: (發(fā)送數(shù)據(jù)) - send方法已調(diào)用3: (數(shù)據(jù)傳送中) - 已接受部分?jǐn)?shù)據(jù)4: (響應(yīng)結(jié)束) - 接收了所有的數(shù)據(jù)(3)ajax編程的基

4、本步驟1) 獲取ajax對(duì)象(XmlHttpRequest)使用 XmlHttpRequest向服務(wù)器發(fā)送請(qǐng)求在服務(wù)器端處理請(qǐng)求在監(jiān)聽(tīng)器當(dāng)中，處理服務(wù)器返回的響應(yīng)1) 獲取ajax對(duì)象(XmlHttpRequest)var xhr = getXhr();2) 發(fā)送請(qǐng)求xhr.open(請(qǐng)求方式, 請(qǐng)求地址, 異步還是同步);請(qǐng)求方式: get/post請(qǐng)求地址:如果是get請(qǐng)求，請(qǐng)求參數(shù)要添加到請(qǐng)求地址的后面。true表示異步請(qǐng)求: ajax對(duì)象發(fā)請(qǐng)求的同時(shí)，用戶可以對(duì)當(dāng)前 頁(yè)面做其它的操作。一般常用異步。false表示同步請(qǐng)求:ajax對(duì)象發(fā)請(qǐng)求的同時(shí),瀏覽器會(huì)鎖訂當(dāng)前頁(yè)面，用戶需要等待處理

5、完成之后才能做下一步操作。方式一: get請(qǐng)求var xhr = getXhr();xhr.open(get, check_name.action?name=zs, true);xhr.onreadystatechange=f1;xhr.send(null);方式二: post請(qǐng)求var xhr = getXhr();xhr.open(post, check_username.action, true);/ 如果發(fā)送的是 post請(qǐng)求，需要設(shè)置消息頭的編碼格式為 “application”xhr.setRequestHeader(content-type, application/x-www-

6、form-urlencoded);xhr.onreadystatechange=f1;xhr.send(username= + $F(username);注意:因?yàn)榘凑説ttp協(xié)議的要求，如果發(fā)送的post請(qǐng)求，請(qǐng)求數(shù)據(jù)包里面，應(yīng)該有一個(gè)消息頭 content-type。但是，ajax對(duì)象默認(rèn)沒(méi)有，所以，需要調(diào)用setRequestHeader方法。3) 編寫(xiě)服務(wù)器端的代碼，服務(wù)器端一般不需要返回完整的頁(yè)面，只需要返回部分的數(shù)據(jù)，比如一個(gè)簡(jiǎn)單的字符串。4) 編寫(xiě)監(jiān)聽(tīng)器function f1()if(xhr.readyState = 4)/獲得服務(wù)器返回的數(shù)據(jù)var txt = xhr.resp

7、onseText;/dom操作function $(id)/ ajax常用函數(shù)的定義return document.getElementById(id);function $F(id)return document.getElementById(id).value;function getXhr()/ 獲取 XMLHttpRequestvar xhr;if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); / 非ie瀏覽器elsexhr = new ActiveXObject(Microsoft.XMLHttp); / ie瀏覽器GET方式:f

8、unction check_name()/ 第一步: 獲得 ajax對(duì)象var xhr = getXhr();/ 第二步: 發(fā)送請(qǐng)求xhr.open(get, check_name.action?name= + $F(uname), true);/ 第三步: ajax函數(shù): 注冊(cè)一個(gè)事件監(jiān)聽(tīng)器xhr.onreadystatechange = function() /此函數(shù)為 匿名函數(shù)，內(nèi)部函數(shù)/ 只有ajax對(duì)象的readyState值為4時(shí)，才能獲得服務(wù)器返回的數(shù)據(jù)if(xhr.readyState = 4)/ 獲得服務(wù)器返回的文本數(shù)據(jù)var txt = xhr.responseText;/

9、 更新頁(yè)面$name_msg.innerHTML = txt;$(name_msg).innerHTML = 正在驗(yàn)證.;/ 第四步: 發(fā)送請(qǐng)求xhr.send(null);POST方式: function check_name()/ 第一步: 獲得 ajax對(duì)象var xhr = getXhr();/ 第二步: 發(fā)送請(qǐng)求xhr.open(post, check_name.action, true);xhr.setRequestHeader(content-type, application/x-www-form-urlencoded);/ 第三步: ajax函數(shù)xhr.onreadystat

10、echange = function() /此函數(shù)為 匿名函數(shù)，內(nèi)部函數(shù)/ 只有ajax對(duì)象的readyState值為4時(shí)，才能獲得服務(wù)器返回的數(shù)據(jù)if(xhr.readyState = 4)/ 獲得服務(wù)器返回的文本數(shù)據(jù)var txt = xhr.responseText;/ 更新頁(yè)面$name_msg.innerHTML = txt;$(name_msg).innerHTML = 正在驗(yàn)證.;/ 第四步: 發(fā)送請(qǐng)求xhr.send(username= + $F(uname);用GET 還是 POST？與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用。然而，在以下情況中，請(qǐng)使

11、用 POST 請(qǐng)求：(1) 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）(2) 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）(3) 發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠ajax編程中的編碼問(wèn)題(1) 發(fā)送get請(qǐng)求: ie瀏覽器內(nèi)置的ajax對(duì)象，對(duì)中文參數(shù)使用gbk編碼，而其它瀏覽器(firefox,chrome)使用utf8編碼。 服務(wù)器端默認(rèn)使用iso-8859-1去解碼。解決方案:1) 服務(wù)器對(duì)get請(qǐng)求中的參數(shù)使用指定的編碼格式進(jìn)行解碼。比如: 對(duì)于tomcat，可修改conf/server.xml(添加URIEncoding=UTF-8)即: 告

12、訴服務(wù)器，對(duì)于所有的get請(qǐng)求，使用utf-8進(jìn)行編碼/解碼2) 對(duì)請(qǐng)求地址，使用encodeURI函數(shù)進(jìn)行統(tǒng)一的編碼(UTF-8)該函數(shù)的作用: 對(duì)請(qǐng)求地址中的中文進(jìn)行“UTF-8”編碼。var uri = check_username.action?username= + $Fusername;var uri2 = encodeURI(uri);/ 進(jìn)行編碼，欺騙瀏覽器，防止出現(xiàn)亂碼xhr.open(get, uri2, true);總結(jié): 解決get請(qǐng)求傳遞中文參數(shù)亂碼問(wèn)題: (1) 修改 tomcat下的 server.xml, 在 Connection后添加 URIEncoding=UTF-8, 告訴服務(wù)器，對(duì)于get請(qǐng)求中的數(shù)據(jù)，使用UTF-8解碼。 (2) 在 ajax在發(fā)送get請(qǐng)求前，添加:var uri = check_uname.action?uname= + $Funame;xhr.open(get, encodeURI(uri), true);用上面2步，可結(jié)果ajax中g(shù)et請(qǐng)求參數(shù) 中文亂碼問(wèn)題(對(duì)所以瀏覽器都適用).(2)發(fā)送post所有瀏覽器內(nèi)置的ajax對(duì)象都會(huì)使用utf-8進(jìn)行編碼。解決方案:request.setCharacterEncoding(utf-8);ajax應(yīng)用中的緩存問(wèn)題: 當(dāng)使用IE瀏覽器時(shí)，如果使用get方式發(fā)請(qǐng)求，瀏覽