利用XMLHTTP來進行非同步呼叫Server 應用程式或 Web Service,處理回傳資料迅速更新網頁資料,以達成AJAX的效果

小弟開發ajax的程式已經很久了....都是拉一下ajax元件..寫幾行程式碼就結束了....

最近看到幾篇不錯的ajax基礎文章,介紹非同步傳輸的用法...還不錯...

小弟也做了幾個ajax的範例...以最基礎的方法實作....不用元件了...呵呵..在此分享給大家呀...

1.呼叫Server應用程式

ServerAJAX.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ServerAJAX.aspx.cs" Inherits="ajax_ServerAJAX" %>

<!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 runat="server">
    <title>Timer</title>

ServerAJAX.aspx.cs

ServerTimer.aspx

ServerTimer.aspx.cs

2.呼叫Web Service
WebServiceTimer.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebServiceTimer.aspx.cs" Inherits="ajax_WebServiceTimer" %>

<!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 runat="server">
    <title>Timer</title>
   
        <script language="javascript" type="text/javascript">
       
            var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");
           
            function sendAJAX()
            {
                XmlHttp.Open("POST","WebServiceTimer.asmx/Timer",true);
                XmlHttp.send(null);
                XmlHttp.onreadystatechange=ServerProcess;
            }
           
            function ServerProcess()
            {
                if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
                {
                    document.getElementById('showTimer').innerHTML = XmlHttp.responseXML.getElementsByTagName('string')[0].firstChild.data
                }
            }
           
            setInterval('sendAJAX()',1000);
       
        </script>
   
</head>
<body>
    <form id="form1" runat="server">
    <div id="showTimer">
   
    </div>
    </form>
</body>
</html>

WebServiceTimer.aspx.cs

WebServiceTimer.asmx

WebServiceTimer.cs

執行結果：