我的一點Ajax學習筆記

【日期】0:15 2008-6-16
===========================
Ajax的請求/響應模式

0、觸發Ajax事件
1、建立XMLHttpRequest對象
2、open()方法：建立對伺服器的調用
3、為onreadystatechange指定事件處理函數
4、send()方法：向伺服器（CGI程式）發出請求
5、（請求返回到瀏覽器）
6、響應事件處理函數
—————————
建立XMLHttpRequest對象

JavaScript代碼

1. //相容不同瀏覽器
2. if(window.ActiveXObject && !window.XMLHttpRequest)
3. {
4. window.XMLHttpRequest = function()
5. {
6. var MSXML = ['Msxml2.XMLHTTP.5.0',
7. 'Msxml2.XMLHTTP.4.0',
8. 'Msxml2.XMLHTTP.3.0',
9. 'Msxml2.XMLHTTP',
10. 'Microsoft.XMLHTTP'];
11. for(var i = 0; i < msxmls.length; i++)
12. {
13. try{
14. return new ActiveXObject(msxmls[i]);
15. }catch(e){}
16. }
17. return null;
18. };
19. }
20. var xmlHttp = new XMLHttpRequest();//建立XMLHttpRequest對象
    

另一種方式：

JavaScript代碼

1. function createXMLHttpRequest()
2. {
3. var xmlHttp;
4. try{
5. xmlHttp = new XMLHttpRequest();
6. }catch(e){
7. var MSXML = new Array( “MSXML2.XMLHTTP.6.0″,
8. “MSXML2.XMLHTTP.5.0″,
9. “MSXML2.XMLHTTP.4.0″,
10. “MSXML2.XMLHTTP.3.0″,
11. “MSXML2.XMLHTTP”,
12. “Microsof.XMLHTTP”);
13. for(var i=0; i<MSXML.length && !xmlHttp; i++)
14. {
15. try{
16. xmlHttp = new ActiveXObject(MSXML[i]);
17. }catch(e){}
18. }
19. }
20. if(!xmlHttp)
21. alert(“Ajax Error!”);
22. else return xmlHttp;
23. }
24. var xmlHttp = new createXMLHttpRequest();//建立XMLHttpRequest對象

———————————————————
open()方法

open(”method”, “url”, bool)
例：xmlHttp.open(”GET”, “http://127.0.0.1/clients.xml”, true);
——————————————————————
XMLHttpRequest屬性：

onreadystatechange
每個狀態改變時都會觸發這個事件處理器，通常會調用一個JavaScript函數
…………………………………………………………………………………………
readyState
請求的狀態。有5個可取值：0 = 未初始化，1 = 正在載入，2 = 已載入，3 = 互動中，4 = 完成
…………………………………………………………………………………………
responseText
伺服器的響應，表示為一個字串
…………………………………………………………………………………………
responseXML
伺服器的響應，表示為XML。這個對象可以解析為一個DOM對象
…………………………………………………………………………………………
status
伺服器的HTTP狀態代碼（200對應OK，404對應Not Found（未找到），等等）
…………………………………………………………………………………………
statusText
HTTP狀態代碼的相應文本（OK或Not Found（未找到）等等）
…………………………………………………………………………………………

【日期】0:56 2008-6-17
===========================
部分內容寫成函數實現：

JavaScript代碼

1. function startAjaxRequest(type)
2. {
3. requestType = type; //動作型別參數
4. xmlHttp = new XMLHttpRequest();//建立XMLHttpRequest對象
5. xmlHttp.onreadystatechange = handleStateChange;
6. xmlHttp.open(“GET”, “http://127.0.0.1/DIY_lib/XML/clients.xml”, true);
7. xmlHttp.setRequestHeader(“If-Modified-Since”,“0″); //禁止緩衝
8. xmlHttp.send(null);
9. }
10. function handleStateChange()
11. {
12. if(requestType == “clear”)
13. {
14. clearInfo();
15. }else if(requestType == “show”)
16. {
17. showInfo();
18. }
19. }
20. function clearInfo()
21. {
22. info.innerHTML = “”;
23. }
24. function showInfo()
25. {
26. if(xmlHttp.readyState==4 && xmlHttp.status == 200)
27. {
28. info.innerHTML = xmlHttp.responseText;
29. }
30. }

【日期】2008-8-18
===========================
操作DOM（一）：
document.getElementById(’html_id’)
返回HTML中標籤id為html_id的元素對象

按W3C標準改寫上面兩個函數

JavaScript代碼

1. function clearInfo()
2. {
3. document.getElementById(‘info’).innerHTML = “”;
4. }
5. function showInfo()
6. {
7. if(xmlHttp.readyState==4 && xmlHttp.status == 200)
8. {
9. document.getElementById(‘info’).innerHTML = xmlHttp.responseText;
10. }
11. }

使用responseXML方法處理XML響應資訊：
XML檔案樣本

XML/HTML代碼

1. <datetime>
2. <date>
3. <state>2008-1-1</state>
4. <state>2008-2-2</state>
5. </date>
6. <time>
7. <state>11:11:11</state>
8. <state>22:22:22</state>
9. </time>
10. </datetime>

PHP頁面返回xml文檔方法：
header(”Content-type: application/xml”);

js中讀取DOM部分代碼

JavaScript代碼

1. var xmlDoc = xmlHttp.responseXML;
2. var userDoc = xmlDoc.getElementsByTagName(‘datetime’)[0];
3. var data = userDoc.getElementsByTagName(‘date’)[0];
4. var data1 = userDoc.getElementsByTagName(‘time’)[0];
5. var info_date = data.getElementsByTagName(’state’)[0].childNodes[0].nodeValue;
6. var info_time = data1.getElementsByTagName(’state’)[0].childNodes[0].nodeValue;

結果為：
info_date: 2008-1-1
info_time: 11:11:11

最後兩行修改為

JavaScript代碼

1. var info_date = data.getElementsByTagName(’state’)[1].childNodes[0].nodeValue;
2. var info_time = data1.getElementsByTagName(’state’)[1].childNodes[0].nodeValue;

結果為：
info_date: 2008-2-2
info_time: 22:22:22

【日期】2008-8-19
===========================
操作DOM（二）：
添加表格內容

新增兩個函數

JavaScript代碼

1. function addTableRow(date, time) //添加新行
2. {
3. var row = document.createElement(“tr”); //建立tr元素，返回行對象
5. var cell = createCellWithText(date); //調用函數，建立文本
6. row.appendChild(cell); //把文本添加到行對象
7. cell = createCellWithText(time);
8. row.appendChild(cell);
10. document.getElementById(“table1″).appendChild(row); //把行對象添加到指定元素中
11. }
13. function createCellWithText(text) //建立常值內容
14. {
15. var cell = document.createElement(“td”); //建立td元素，返回cell對象
16. var textNode = document.createTextNode(text); //建立文本節點
17. cell.appendChild(textNode); //添加到cell對象
18. return cell;
19. }

調用方法：
addTableRow(info_date, info_time);

註：html中表格需要用tbody標籤
例：
<TABLE>
<tbody id=”table1″>
</tbody>
</TABLE>

【日期】2008-8-20
===========================
操作DOM（三）：
綜合執行個體應用
參見項目card源碼

備忘：
document.getElementByTagName() 傳回值類型：數組——————————————–
建立帶格式常值內容

JavaScript代碼

1. var flag = document.createElement(flag); //建立格式標籤
2. flag.setAttribute(‘align’,‘center’); //設定標籤屬性
3. flag.innerHTML = text; //標籤後的內容

產生XML的php檔案若包含中文，需要用UTF-8格式儲存

【日期】23:07 2008-9-1
===========================
JSON應用：

將JSON資料賦值給變數（例）：

JavaScript代碼

1. var company =
2. { “employees”: [
3. { "firstName": "Brett", "lastName":"McLaughlin", "email": brett@newInstance.com" },
4. { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
5. { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
6. ]
7. };

擷取第一個僱員的firstName資訊：company.employees[0].fristName

————————————————————-
JSON的接收（例）
1、伺服器端返回JSON相應的文本表示
{“city” : “Hefei”, “province” : “Anhui”}

2、使用eval()函數將JSON文本轉化為JavaScript對象
var response = eval(”(” + xmlHttp.responseText + “)”);

註：使用額外的圓括弧可使eval()函數將來源輸入無條件地視為運算式進行解析

3、從對象中取得相應的值
response.city
response.province

【Q&A】
======================
Q1：GET or POST?
A1：使用POST方法（例）

JavaScript代碼

1. var requestObj = new XMLHTTPRequest();
2. var newData = “name=linvo&pwd=123″;
3. requestObj.open(“POST”, “do.php”, true);
4. requestObj.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8′);
5. requestObj.send(newData);

Q2：為什麼修改了XML檔案的內容後，ajax擷取來的還顯示原來的內容？
A2：xmlHttp.setRequestHeader(”If-Modified-Since”,”0″); //禁止緩衝