Ajax 經典總結
1、ajax是什么?
asynchronous javascript and xml:異步的javascript和xml。
ajax是一種用來改善用戶體驗的技術，其本質是利用瀏覽器內置的一種特殊的對象 (XMLHttpRequest)異步(即發送請求時，瀏覽器不會銷毀當前頁面，用戶可以繼續在當前頁面做其它的操作)的向服務器發送請求,并且利用服務器返回的數據(不再是一個完整的頁面，只是部分的數據，一般使用文本或者xml返回)來部分更新當前頁面。使用ajax技術之后，頁面無刷新，并且不打斷用戶
的操作。
ajax技術的優點：
(1).頁面無刷新
(2).不打斷用戶的操作，用戶的體驗好。
(3).按需獲取數據，瀏覽器與服務器之間數據的傳輸量減少。
(4).是一個標準技術，不需要下載任何的插件。
(5).可以利用客戶端(瀏覽器)的計算能力。
2、ajax對象
(1)如何獲得ajax對象?
XMLHttpRequest并沒有標準化，要區分瀏覽器:
function getXhr(){
var xhr;
if(window.XMLHttpRequest){
//非ie瀏覽器
xhr = new XMLHttpRequest();
}else{
//ie
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
}
ajax經典總結
(2)ajax對象的屬性
a, onreadystatechange : 綁訂一個事件處理函數(注冊監聽器),當
ajax對象的readyState值發生了改變(比如，
從0-->1)，就會產生readystatechange事
件。
b, responseText: 獲得服務器返回的文本
c, responseXML:獲得服務器返回的xml數據
d, status:獲得狀態碼
e, readyState:ajax對象在與服務器進行通訊時，通過readyState屬
性值可以獲取該對象的通訊的狀態，其屬性有5個
(0,1,2,3,4),當屬性值為4時，表示ajax對象已經獲得了
服務器返回的所有的數據。
0:(未初始化)對象已建立（獲得），但是尚未初始化（尚未調用open
方法）
1：（初始化）對象已建立，調用了open方法但尚未調用send方法。
2：（發送數據）send方法一調用。
3：（數據傳送中）已接收部分數據。
4：（響應結束）接收了所有的數據。
ajax經典總結
(3)ajax編程的基本步驟
step1, 先獲得ajax對象
var xhr = getXhr();
step2, 發送請求
xhr.open(請求方式,請求地址,異步還是同步);
請求方式: get/post
請求地址:如果是get請求，請求參數要添加到請求地址的后面。
true表示異步請求 ：ajax對象發請求的同時，用戶可以對當前頁
面做其它的操作。
false表示同步請求:ajax對象發請求的同時,瀏覽器會鎖訂當前頁
面，用戶需要等待處理完成之后，瀏覽器才會
解除鎖定，才能做下一步操作。
方式一：get請求
xhr.open('get',
'check_username.do?username=zs',true);
xhr.onreadystatechange=f1;
xhr.send(null);
方式二：post請求
xhr.open('post');
step3,編寫服務器端的代碼，服務器端一般不需要返回完整的頁面，
只需要返回部分的數據，比如一個簡單的字符串。
step4, 編寫監聽器
function f1(){
if(xhr.readyState == 4){
//獲得服務器返回的數據
var txt = xhr.responseText;
//dom操作
}
}
eg:
function check_username() {
//step1，獲得ajax對象
var xhr = getXhr();
document.write(xhr.readyState+"<br/>");//0
//step2, 發請求
xhr.open('get', 'check_username.do?username=' + $F('username'), true);//建立連接
document.write(xhr.readyState+"<br/>");//1
xhr.onreadystatechange = function() {//綁定事件處理函數（注冊監
聽器）
//只有ajax對象的readyState值為4時，才能獲得服務器返回的完整。
數據
document.write(xhr.readyState+"<br/>");//依次輸出2、3、4
if (xhr.readyState == 4) {
//獲得服務器返回的文本數據
var txt = xhr.responseText;
//更新頁面
$('username_msg').innerHTML = txt;
}
};
xhr.send(null);//向服務發送請求
}
XMLHttpRequest對象xhr通過onreadystatechange屬性綁定了事件處理函數，在整個會話內，onreadystatechange屬性會發生多次變化，依次從0-1-2-3-4，每一次屬性值的變化都會觸發綁定事件函數的執行。
eg:同步、異步問題：
// 驗證驗證碼是否正確
function check_code() {
var flag =false;
// step1，獲得ajax對象
var xhr = getXhr();
// step2, 發請求
var uri = 'check_code.do?checkcode=' + $F('checkcode');
xhr.open('get', encodeURI(uri), false);// 建立連接
xhr.onreadystatechange = function() {// 綁定事件處理函數（注冊監聽器）
// 只有ajax對象的readyState值為4時，才能獲得服務器返回的數據。
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 獲得服務器返回的文本數據
var txt = xhr.responseText;
// 更新頁面
if (txt == "error") {
$('checkcode_msg').innerHTML = "驗證碼錯誤！";
flag = false;
} else {
$('checkcode_msg').innerHTML = "驗證碼正確！";
flag = true;
}
} else {
$('checkcode_msg').innerHTML = '系統繁忙，驗證出錯';
flag = false;
}
}
};
$('checkcode_msg').innerHTML = "正在驗證......";// 當服務器響應比較慢時可以看到此提示
xhr.send(null);// 向服務發送請求
//當ajax對象向服務器發送同步請求時,
//瀏覽器不會向下執行，會等待服務器的響應。
//如果是異步，send后，并不會先執行綁定事件，而是先向下執行
//在監聽事件中返回值有問題，所以沒在其中返回
return flag;
}
當為異步方式時，返回的flag始終是false，flag在監聽事件中被有被改變（監聽事件在return之前沒有執行），所以要設置為同步方式，這樣在return falg之前，監聽事件就會處理完畢，flag的值就會發生相應的改變。
3、ajax編程中的編碼問題
(1)發送get請求:
ie瀏覽器內置的ajax對象，對中文參數使用gbk編碼，而其它瀏覽器
(firefox,chrome)使用utf8編碼。
服務器端默認使用iso-8859-1去解碼。
解決方案:
step1,讓服務器對get請求中的參數使用指定的編碼格式進行解碼。
比如，對于tomcat，可以修改 conf/server.xml，只對get方式有效
<Connector port="8080" protocol="HTTP/1.1"
connectionTimeout="20000"
URIEncoding="utf-8"（要加入的代碼）
redirectPort="8443" />
<!-- A "Connector" using the shared thread pool-->
ajax經典總結
step2,對請求地址，使用encodeURI函數進行統一的編碼(utf-8)
var uri = 'check_username.do?username='+ $F('username');
xhr.open('get',encodeURI(uri),true);
(2)發送post
如果發送方式為post，那么所有瀏覽器內置的ajax對象都會對請求參數
使用utf-8進行編碼，那么只要在服務器端設置：
request.setCharacterEncoding("utf-8");
4、發送post請求
xhr.open('post','check_username.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('username=' + $F('username'));
注意：
因為按照http協議的要求，如果發送的post請求，那么請求數據包里面，
應該有一個消息頭 content-type。但是，ajax對象默認沒有，所以，需
要調用setRequestHeader方法。
5、json (javascript object notation)
(1)json是什么?
是一種輕量級的數據交換標準。
a,什么是數據交換?
簡單地講，就是將要交換的數據先轉換成一個與平臺無關的數據格式(比
如xml或者json字符串)發送給接受方，接受方再進行相應的轉換。
b,輕量級
相對于xml，json解析的速度更快，數據量更小。
(2)json語法格式
1)如何表示一個對象
{屬性名:屬性值,屬性名:屬性值...}
要注意:
a,屬性值的類型可以是string,number,null,boolean, object。
b,屬性名必須使用引號括起來
c,屬性值如果是string，也必須使用引號括起來
2)如何表示一個對象組成的數組
[{},{},{}...]
(3)如何使用json做數據交換
1)java對象(java對象組成的數組或者集合)轉換成對應的json字符串
可以從www.json.org去下載對應語言的工具。
使用的json-lib中提供的兩個類:
JSONObject, JSONArray
2)json字符串轉換成javascript對象
可以使用prototype提供的evalJSON函數。
prototype.js提供了很多有用的函數:
a, $(id): document.getElementById(id);
b, $F(id): document.getElementById(id).value;
c, $(id1,id2,...): 分別查找id為id1,id2...的節點，然后返回一
個數組。
d, strip(): 除掉字符串兩端的空格。
e, evalJSON():將json字符串轉換成對應的javascript對象或者
數 組。
ajax經典總結
練習：熱賣商品動態顯示
step1,建表
create table t_sale(
id int primary key auto_increment,
name varchar(50),
price double,
qty int
);
insert into t_sale(name,price,qty) values('bmwx6',20,30);
insert into t_sale(name,price,qty) values('bmwx5',20,20);
insert into t_sale(name,price,qty) values('bmwx3',20,60);
insert into t_sale(name,price,qty) values('bmwx1',20,40);
查詢銷量前三的sql:
select * from t_sale order by qty desc limit 3;
step2, 實體類 Sale
step3, SaleDAO
List<Sale> find...
step4, ActionServlet
輸出一個json字符串
step5, 測試ActionServlet
step6, sale.jsp
6、ajax應用中的緩存問題:
當使用IE瀏覽器時，如果使用get方式發請求，瀏覽器會先緩存之前
訪問的數據，如果訪問的地址不變，不會向服務器發請求。
解決方式1:使用post方式發請求。
解決方式2: 在請求地址后面添加一個隨機數。
7、發送同步請求
xhr.open('post','check_username.do',false);
function check_username(){
var xhr = getXhr();xhr.open('post','show.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(xhr.readState == 4){
var txt = xhr.responseText;alert(txt);
$('username_msg').innerHTML=txt;
}
};
xhr.send('username=' + $F('username'));
//當ajax對象向服務器發送同步請求時,瀏覽器不會向下執行，會等待服務器的響應。在完整的收到服務器返回的數據之前，瀏覽器便處于鎖定狀態，用戶不可進行操作。
}
以上的“ajax經典總結”就是本人在學習期間獨自總結出來的，今天把他曬出來，希望分享給大家，和大家共同進步！