AJAX(用法總結-精華版)

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

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

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

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

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

6、form-urlencoded);xhr.onreadystatechange=f1;xhr.send(username= + $F(username);注意:因為按照http協(xié)議的要求，如果發(fā)送的post請求，請求數(shù)據(jù)包里面，應該有一個消息頭 content-type。但是，ajax對象默認沒有，所以，需要調用setRequestHeader方法。3) 編寫服務器端的代碼，服務器端一般不需要返回完整的頁面，只需要返回部分的數(shù)據(jù)，比如一個簡單的字符串。4) 編寫監(jiān)聽器function f1()if(xhr.readyState = 4)/獲得服務器返回的數(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對象var xhr = getXhr();/ 第二步: 發(fā)送請求xhr.open(get, check_name.action?name= + $F(uname), true);/ 第三步: ajax函數(shù): 注冊一個事件監(jiān)聽器xhr.onreadystatechange = function() /此函數(shù)為 匿名函數(shù)，內部函數(shù)/ 只有ajax對象的readyState值為4時，才能獲得服務器返回的數(shù)據(jù)if(xhr.readyState = 4)/ 獲得服務器返回的文本數(shù)據(jù)var txt = xhr.responseText;/

9、 更新頁面$name_msg.innerHTML = txt;$(name_msg).innerHTML = 正在驗證.;/ 第四步: 發(fā)送請求xhr.send(null);POST方式: function check_name()/ 第一步: 獲得 ajax對象var xhr = getXhr();/ 第二步: 發(fā)送請求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ù)，內部函數(shù)/ 只有ajax對象的readyState值為4時，才能獲得服務器返回的數(shù)據(jù)if(xhr.readyState = 4)/ 獲得服務器返回的文本數(shù)據(jù)var txt = xhr.responseText;/ 更新頁面$name_msg.innerHTML = txt;$(name_msg).innerHTML = 正在驗證.;/ 第四步: 發(fā)送請求xhr.send(username= + $F(uname);用GET 還是 POST？與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。然而，在以下情況中，請使

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

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