[心缘地方]同学录
首页 | 功能说明 | 站长通知 | 最近更新 | 编码查看转换 | 代码下载 | 常见问题及讨论 | 《深入解析ASP核心技术》 | 王小鸭自动发工资条VBA版
登录系统:用户名: 密码: 如果要讨论问题,请先注册。

[转贴]AJAX深度歷險

上一篇:[转贴]bandari班得瑞典藏全集(10CD)320k --全正版压缩
下一篇:[转贴]Ajax并不神秘:揭下各种Ajax控件和类库的小裤衩

添加日期:2006-4-19 11:47:47 快速返回   返回列表 阅读3575次
http://blog.xuite.net/jameschih/java?st=c&re=list&p=1&w=262779

AJAX 為「Asynchronous JavaScript and XML」的簡稱,(非同步JavaScript和XML),是一種互動式網頁應用的網頁開發技術。

AJAX包含哪些東西呢?

AJAX不是指一種單一的技術,而是包含了以下一系列相關的技術。

1.XHTML/HTML+CSS 
2.Document Object Model (DOM)
3.XMLHttpRequest
4.JavaScript

AJAX的一些特性:

更新資料,網頁無須重整(F5)。
與SERVER端通訊可以透過XML資料溝通。 

步驟一:
當使用JavaScript與server溝通時,你可以使用一些元件
在 Internet Explorer ActiveX 物件,稱為 XMLHTTP 類別。
在 Mozilla Safari或其他瀏覽器,稱為 XMLHttpRequest 類別

所以在使用AJAX技術時,若是要做到跨瀏覽器時,可以撰寫以下JS程式碼作判別:


if (window.XMLHttpRequest) { //Mozilla,Safari, 其他...
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}



在某一些Mozilla瀏覽器當從在server回應XML資料時,有時候會無作用。
原因是server無回傳XML mime-type header,要解決該問題可以撰寫額外程式碼來避免這一問題發生:


http_request = new XMLHttpRequest();
http_request.overrideMimeType('text/xml');



當資料由server端回傳後,你需要處裡該 HTTP request 物件回傳時可以使用http_request.onreadystatechange = 處理函式名稱;
或是撰寫另一種方式


http_request.onreadystatechange = function(){
    // 處理回應事件
};



若是由Clinet去向server傳送request訊息,可以使用 open()和send()的方法


http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null);



open()方法有三個參數
1.第一個參數為HTTP request method(可以設為 POST、GET、HEAD或其他http提供的方法)
2.第二個參數是傳送網址的網頁名稱
3.第三個參數若設為TRUE表示若是server端若是還沒回應,client將ㄧ直傳送需求直到server端回覆為止
註:請使用正確的domain名稱 不然將會產生 'permission denied'錯誤 

send()方法表示你可以傳參數給server端
格式如下
name=value&anothername=othervalue&so=on

註:
當在使用open()方法參數為POST時,必須改變 MIME type要不然的話
server端將拋棄該項請求

設定如下
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

步驟二:
在步驟一中有提到
http_request.onreadystatechange = 處理函式名稱;
或是
http_request.onreadystatechange = function(){
    // 處理回應事件
};
我們可以在該處理函式中先行判斷回應狀態為何,在做該項處理項目

當http_request.readyState = 4 時,表示client端已從server端接受資料成功


if (http_request.readyState == 4) {
    // 收到server端回應資料OK
} else {
    // 還未收到
}



以下有5個回應狀態可供判斷
0 (未初始化) 對象已建立,但是尚未初始化(尚未使用open方法) 
1 (初始化) 對象已建立,尚使用send方法 
2 (送出資料) send方法已使用,但是當前的狀態及http回應未知 
3 (資料傳送中) 已接收部分資料,因為回應及http回應不全,這時通過responseBody和responseText截取部分資料會出現錯誤, 
4 (完成) 資料接收完畢,此時可以通過通過responseBody和responseText截取完整的回應資料 

接下來可以判斷server端HTTP回應碼是否正確 200 為 OK


if (http_request.status == 200) {
    // 正確!
} else {
    // for example the response may be a 404 (Not Found)
    // or 500 (Internal Server Error) response codes
}



當資料由server端回應到client端,可以使用兩種格式來接收回應資料。

1. http_request.responseText – 將回應為文字格式資料
2. http_request.responseXML – 將回應為XML格式資料可以使用 XMLDocument 物件來做資料解析的動作。 

以上就是使用HttpRequest server端與client端的資料處理方式,
相信對於AJAX的處理能有更深的了解,後面的章節我將會示範使用http_request.responseText和http_request.responseXML資料的方法
-----------------------------------------------------------------
這一篇文章為AJAX範例,若是你還對AJAX不清楚的話你可以參考"AJAX深度歷險1(Getting Started) "該篇說明:

步驟一:
開啟文字編輯器編輯以下程式碼,並且存檔為httprequest.htm放在WEB SERVER 根目錄中
httprequest.html 程式碼如下所示:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" language="javascript">
            var http_request = false;
            function makeRequest(url) {
                http_request = false;
                if (window.XMLHttpRequest) { // Mozilla, Safari,其他瀏覽器...
                    http_request = new XMLHttpRequest();
                    if (http_request.overrideMimeType) {
                        http_request.overrideMimeType('text/xml');
                    }
                } else if (window.ActiveXObject) { // FOR IE
                    try {
                        http_request = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e){}
                    }
                }
                if (!http_request) {
                    alert('放棄:( 不能產生 XMLHTTP 物件');
                    return false;
                }
                http_request.onreadystatechange = alertContents;
                http_request.open('GET', url, true);
                http_request.send(null);
            }
            function alertContents() {
                if (http_request.readyState == 4) {
                    if (http_request.status == 200) {
                        alert(http_request.responseText);
                    } else {
                        alert('請求時產生錯誤');
                    }
                }
            }
        </script>
    </head>
    <body>
        <span style="cursor: pointer; text-decoration: underline"            onclick="makeRequest('test.htm')">產生請求</span>
    </body>
</html>



步驟二:開啟文字編輯器編輯以下程式碼,並且存檔為test.htm
放在WEB SERVER 根目錄中
test.html程式碼如下所示:Hi JAMES 你的第一個AJAX範例。

執行結果 IE & FIERFOX

按此在新窗口浏览图片
------------------------------------------------------------

步驟一:
開啟文字編輯器編輯以下程式碼,並且存檔為httprequestxml.htm
放在WEB SERVER 根目錄中
httprequestxml.htm 程式碼如下所示(請存成utf-8格式):

按此在新窗口浏览图片

步驟二:
開啟文字編輯器編輯以下程式碼,並且存檔為test.xml
放在WEB SERVER 根目錄中
test.xml程式碼如下所示(請存成utf-8格式):

按此在新窗口浏览图片
執行結果 IE & FIERFOX

按此在新窗口浏览图片
------------------------------------------------------------------
說明:
在AJAX中,JAVASCRIPT是ㄧ個重要的元素。在本章中,將使用DOM的概念。若是您對JAVASCRIPT不熟,對英文無恐懼可以參考"這裡"或翻閱相關書籍。

若是你對HTML標籤自訂屬性有興趣,可以參考"三月份MMUG網聚,學到在html標籤自定屬性的小技倆 "該篇教學。

對於DOM(Document Object Model )不熟的人,可以參考"關於文件物件模型(DOM)"該篇說明,對英文無恐懼且不想買書的可以參考"這裡"

有了DOM(Document Object Model )概念後,就可以使用Javascript提供的document.creatElement()方法來新增一個HTML元素,例如document.creatElement('a')就建立一個標籤a的HTML元素。

註:若是你的網頁是以XHTML開發的話就不能使用document.creatElement()方法來新增一個HTML元素,必須改用document.creatElementNS()方法來建立。

在這一個範例中,我將使用document.creatElement()方法動態再網頁中使用Javascript動態加入HTML標籤,將產生一個清單/選單。

先看一下執行結果:


按此在新窗口浏览图片
程式碼如下

按此在新窗口浏览图片
透過該項方式,就可以讓JS+DOM更加強大,再來若是加入CSS更能產生更多的效果。
----------------------------------------------------------
now ,I will show you the AJAX  basic flow map.
Whether the  XMLHttpRequest object create 
                                      
 open  method (the POST and the GET, the URL, same period or the  asynchronism which is requested and so on appointment)
                                       
send method (data transmission) 
                                        
                                     < Server side >

                                      
the  onreadystatechange event (other than the ie the call-back also the  onload can use (sending and receiving state changes, the  event which is started)
                                     
the readyState property (the value which displays sending and receiving state, with 4 completion of reception.  If onload unnecessary. 
                                     
responseText or responsecXml property (reception data) 

 

评论 COMMENTS
没有评论 No Comments.

添加评论 Add new comment.
昵称 Name:
评论内容 Comment:
验证码(不区分大小写)
Validation Code:
(not case sensitive)
看不清?点这里换一张!(Change it here!)
 
评论由管理员查看后才能显示。the comment will be showed after it is checked by admin.
CopyRight © 心缘地方 2005-2999. All Rights Reserved