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=>
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
請看上面一個簡單的例子,通過他,我們能夠初步認識Ajax架構的工作模式!本例子,只包含了一個DIV標籤,用來顯示最後的結果,以及一個”查詢”button.整個執行流程如下:
Ajax的精神在於非同步傳輸,所以,在Ajax發出清球后,並不會待server的回應,而必須指定一個特定的對象讓XMLHttpRequest在接收到server的回應的時候通知javascript.這個負責通知的onreadystatechange.
【背景色
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=logo}
返回首页