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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

請看上面一個簡單的例子,通過他,我們能夠初步認識Ajax架構的工作模式!本例子,只包含了一個DIV標籤,用來顯示最後的結果,以及一個”查詢”button.整個執行流程如下:
Ajax的精神在於非同步傳輸,所以,在Ajax發出清球后,並不會待server的回應,而必須指定一個特定的對象讓XMLHttpRequest在接收到server的回應的時候通知javascript.這個負責通知的onreadystatechange.