1
<%@ Page language="c#" Codebehind="$FILENAME$.cs" AutoEventWireup="false" Inherits="$INHERITS$" %>
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3
4<html>
5 <head>
6 <title>Ajax_exam1</title>
7 <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
8 <meta name="CODE_LANGUAGE" Content="C#">
9 <meta name=vs_defaultClientScript content="JavaScript">
10 <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
11 <meta http-equiv="Content-Type" content="text/html charset=big5 "/>
12 <script language=javascript>
13
14 var ajax;
15 function CreateAJAX()
16
{
17 if(window.ActiveXObject)
18 {
19 try
20 {
21 return new ActiveXObject("Msxml2.XMLHTTP");
22
}
23 catch(e)
24 {
25 try
26 {
27 return new ActiveXObject("Microsoft.XMLHTTP");
28 }
29 catch(e2)
30 {
31 return null;
32 }
33 }
34 }
35 else if(window.XMLHttpRequest)
36 {
37 return new XMLHttpRequest();
38 }
39 else
40 {
41 return null;
42 }
43 }
44
45 function onRcvData()
46 {
47 if(ajax.readyState == 4)
48 {
49 if(ajax.status == 200)
50 {
51 var content = document.getElementById('content');
52 content.innerHTML = ajax.responseText;
53 }
54 else
55 {
56 alert('Error from server !');
57 }
58 }
59 }
60
61 function ajaxSendRequest(url)
62 {
63 ajax = CreateAJAX();
64 if(!ajax)
65 {
66 alert('explorer is unsupport !');
67 return 0;
68 }
69
70 ajax.onreadystatechange = onRcvData;
71 ajax.open("GET",url,true);
72 ajax.send("");
73 }
74
75
76
</script>
77 </head>
78 <body MS_POSITIONING="GridLayout">
79
80 <div id="content"></div>
81 <br>
82 <input type="button" value="search" onclick="ajaxSendRequest('http://www.baidu.com')">
83
84 </body>
85</html>
86
<%@ Page language="c#" Codebehind="$FILENAME$.cs" AutoEventWireup="false" Inherits="$INHERITS$" %>
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 3
4
<html>5
<head>6
<title>Ajax_exam1</title>7
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">8
<meta name="CODE_LANGUAGE" Content="C#">9
<meta name=vs_defaultClientScript content="JavaScript">10
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">11
<meta http-equiv="Content-Type" content="text/html charset=big5 "/>12
<script language=javascript>13
14
var ajax;15
function CreateAJAX()16
{
17
if(window.ActiveXObject)18
{19
try20
{21
return new ActiveXObject("Msxml2.XMLHTTP");22
}23
catch(e)24
{25
try26
{27
return new ActiveXObject("Microsoft.XMLHTTP");28
}29
catch(e2)30
{31
return null;32
}33
}34
}35
else if(window.XMLHttpRequest)36
{37
return new XMLHttpRequest();38
}39
else40
{41
return null;42
}43
}44
45
function onRcvData()46
{47
if(ajax.readyState == 4)48
{49
if(ajax.status == 200)50
{51
var content = document.getElementById('content');52
content.innerHTML = ajax.responseText;53
}54
else55
{56
alert('Error from server !');57
}58
}59
}60
61
function ajaxSendRequest(url)62
{63
ajax = CreateAJAX();64
if(!ajax)65
{66
alert('explorer is unsupport !');67
return 0;68
}69
70
ajax.onreadystatechange = onRcvData;71
ajax.open("GET",url,true);72
ajax.send("");73
}74
75
76
</script>77
</head>78
<body MS_POSITIONING="GridLayout">79
80
<div id="content"></div>81
<br>82
<input type="button" value="search" onclick="ajaxSendRequest('http://www.baidu.com')">83
84
</body>85
</html>86
請看上面一個簡單的例子,通過他,我們能夠初步認識Ajax架構的工作模式!本例子,只包含了一個DIV標籤,用來顯示最後的結果,以及一個”查詢”button.整個執行流程如下:
Ajax的精神在於非同步傳輸,所以,在Ajax發出清球后,並不會待server的回應,而必須指定一個特定的對象讓XMLHttpRequest在接收到server的回應的時候通知javascript.這個負責通知的onreadystatechange.
