利用XMLHTTP來進行非同步呼叫Server 應用程式或 Web Service,處理回傳資料迅速更新網頁資料,以達成AJAX的效果
小弟開發ajax的程式已經很久了....都是拉一下ajax元件..寫幾行程式碼就結束了....
最近看到幾篇不錯的ajax基礎文章,介紹非同步傳輸的用法...還不錯...
小弟也做了幾個ajax的範例...以最基礎的方法實作....不用元件了...呵呵..在此分享給大家呀...
1.呼叫Server應用程式
ServerAJAX.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ServerAJAX.aspx.cs" Inherits="ajax_ServerAJAX" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>Timer</title>
07
08 <script language="javascript" type="text/javascript">
09
10 var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");
11
12 function sendAJAX()
13 {
14 XmlHttp.Open("POST","ServerTimer.aspx",true);
15 XmlHttp.send(null);
16 XmlHttp.onreadystatechange=ServerProcess;
17 }
18
19 function ServerProcess()
20 {
21 if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
22 {
23 document.getElementById('showTimer').innerHTML = XmlHttp.responseText;
24 }
25 }
26
27 setInterval('sendAJAX()',1000);
28
29 </script>
30
31 </head>
32 <body>
33 <form id="form1" runat="server">
34 <div id="showTimer">
35 </div>
36 </form>
37 </body>
38 </html>
39
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>Timer</title>
07
08 <script language="javascript" type="text/javascript">
09
10 var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");
11
12 function sendAJAX()
13 {
14 XmlHttp.Open("POST","ServerTimer.aspx",true);
15 XmlHttp.send(null);
16 XmlHttp.onreadystatechange=ServerProcess;
17 }
18
19 function ServerProcess()
20 {
21 if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
22 {
23 document.getElementById('showTimer').innerHTML = XmlHttp.responseText;
24 }
25 }
26
27 setInterval('sendAJAX()',1000);
28
29 </script>
30
31 </head>
32 <body>
33 <form id="form1" runat="server">
34 <div id="showTimer">
35 </div>
36 </form>
37 </body>
38 </html>
39
ServerAJAX.aspx.cs
01 
using System;
02
using System.Data;
03using System.Configuration;
04using System.Collections;
05using System.Web;
06using System.Web.Security;
07using System.Web.UI;
08using System.Web.UI.WebControls;
09using System.Web.UI.WebControls.WebParts;
10
using System.Web.UI.HtmlControls;
11
12public partial class ajax_ServerAJAX : System.Web.UI.Page
13{
14
protected void Page_Load(object sender, EventArgs e)
15
{
16
17
}
18}
using System;
using 02
using System.Data;03
using System.Configuration;04
using System.Collections;05
using System.Web;06
using System.Web.Security;07
using System.Web.UI;08
using System.Web.UI.WebControls;09
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
12
public partial class ajax_ServerAJAX : System.Web.UI.Page13
{14
protected void Page_Load(object sender, EventArgs e)15
{
16
17
}18
}
ServerTimer.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ServerTimer.aspx.cs" Inherits="ajax_ServerTimer" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>Timer</title>
07 </head>
08 <body>
09 <form id="form1" runat="server">
10 <div>
11 </div>
12 </form>
13 </body>
14 </html>
15
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>Timer</title>
07 </head>
08 <body>
09 <form id="form1" runat="server">
10 <div>
11 </div>
12 </form>
13 </body>
14 </html>
15
ServerTimer.aspx.cs
01 using System;
02using System.Data;
03using System.Configuration;
04using System.Collections;
05using System.Web;
06using System.Web.Security;
07using System.Web.UI;
08using System.Web.UI.WebControls;
09using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11
12public partial class ajax_ServerTimer : System.Web.UI.Page
13{
14 protected override void Render(HtmlTextWriter output)
15 {
16 output.Write(DateTime.Now.ToString());
17 }
18}
using System;02
using System.Data;03
using System.Configuration;04
using System.Collections;05
using System.Web;06
using System.Web.Security;07
using System.Web.UI;08
using System.Web.UI.WebControls;09
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
12
public partial class ajax_ServerTimer : System.Web.UI.Page13
{14
protected override void Render(HtmlTextWriter output)15
{16
output.Write(DateTime.Now.ToString());17
}18
}
2.呼叫Web Service
WebServiceTimer.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebServiceTimer.aspx.cs"
02 Inherits="ajax_WebServiceTimer" %>
03
04 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
05 <html xmlns="http://www.w3.org/1999/xhtml">
06 <head id="Head1" runat="server">
07 <title>Timer</title>
08
09 <script language="javascript" type="text/javascript">
10
11 var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");
12
13 function sendAJAX()
14 {
15 XmlHttp.Open("POST","WebServiceTimer.asmx/Timer",true);
16 XmlHttp.send(null);
17 XmlHttp.onreadystatechange=ServerProcess;
18 }
19
20 function ServerProcess()
21 {
22 if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
23 {
24 document.getElementById('showTimer').innerHTML = XmlHttp.responseXML.getElementsByTagName('string')[0].firstChild.data
25 }
26 }
27
28 setInterval('sendAJAX()',1000);
29
30 </script>
31
32 </head>
33 <body>
34 <form id="form1" runat="server">
35 <div id="showTimer">
36 </div>
37 </form>
38 </body>
39 </html>
40
02 Inherits="ajax_WebServiceTimer" %>
03
04 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
05 <html xmlns="http://www.w3.org/1999/xhtml">
06 <head id="Head1" runat="server">
07 <title>Timer</title>
08
09 <script language="javascript" type="text/javascript">
10
11 var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");
12
13 function sendAJAX()
14 {
15 XmlHttp.Open("POST","WebServiceTimer.asmx/Timer",true);
16 XmlHttp.send(null);
17 XmlHttp.onreadystatechange=ServerProcess;
18 }
19
20 function ServerProcess()
21 {
22 if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')
23 {
24 document.getElementById('showTimer').innerHTML = XmlHttp.responseXML.getElementsByTagName('string')[0].firstChild.data
25 }
26 }
27
28 setInterval('sendAJAX()',1000);
29
30 </script>
31
32 </head>
33 <body>
34 <form id="form1" runat="server">
35 <div id="showTimer">
36 </div>
37 </form>
38 </body>
39 </html>
40
WebServiceTimer.aspx.cs
01 using System;
02using System.Data;
03using System.Configuration;
04using System.Collections;
05using System.Web;
06using System.Web.Security;
07using System.Web.UI;
08using System.Web.UI.WebControls;
09using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11
12public partial class ajax_WebServiceTimer : System.Web.UI.Page
13{
14 protected void Page_Load(object sender, EventArgs e)
15 {
16
17 }
18}
using System;02
using System.Data;03
using System.Configuration;04
using System.Collections;05
using System.Web;06
using System.Web.Security;07
using System.Web.UI;08
using System.Web.UI.WebControls;09
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
12
public partial class ajax_WebServiceTimer : System.Web.UI.Page13
{14
protected void Page_Load(object sender, EventArgs e)15
{16
17
}18
}
WebServiceTimer.asmx
1 <%@ WebService Language="C#" CodeBehind="~/App_Code/WebServiceTimer.cs" Class="WebServiceTimer" %>
WebServiceTimer.cs
01 using System;
02using System.Web;
03using System.Collections;
04using System.Web.Services;
05using System.Web.Services.Protocols;
06
07/// <summary>
08/// WebServiceTimer 的摘要描述
09/// </summary>
10[WebService(Namespace = "http://tempuri.org/")]
11[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
12public class WebServiceTimer : System.Web.Services.WebService
13{
14
15 public WebServiceTimer()
16 {
17
18 //如果使用設計的元件，請取消註解下行程式碼
19 //InitializeComponent();
20 }
21
22 [WebMethod]
23 public string Timer()
24 {
25 return DateTime.Now.ToString();
26 }
27
28}
29
using System;02
using System.Web;03
using System.Collections;04
using System.Web.Services;05
using System.Web.Services.Protocols;06
07
/// <summary>08
/// WebServiceTimer 的摘要描述09
/// </summary>10
[WebService(Namespace = "http://tempuri.org/")]11
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]12
public class WebServiceTimer : System.Web.Services.WebService13
{14
15 public WebServiceTimer()
16
{17
18 //如果使用設計的元件，請取消註解下行程式碼
19
//InitializeComponent();20
}21
22 [WebMethod]
23
public string Timer()24
{25
return DateTime.Now.ToString();26
}27
28
}29
執行結果：
更多有關AJAX的介紹：
微軟 ASP.NET 2.0 的 AJAX 利劍 ～ Atlas Framework
Ajax ?用 WebService ??例子