开发学院 WEB开发 Ajax Ajax & XMLHttpRequset 阅读

Ajax & XMLHttpRequset

　2006-06-15 11:16:07　来源：WEB开发网　　　

核心提示： 1<%@ Page language="c#" Codebehind="$FILENAME$.cs" AutoEventWireup="false" Inherits="$INHERITS$" %> 2<!DOCTYPE

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" >
83　
84 </body>
85</html>
86
請看上面一個簡單的例子,通過他,我們能夠初步認識Ajax架構的工作模式!本例子,只包含了一個DIV標籤,用來顯示最後的結果,以及一個”查詢”button.整個執行流程如下:

Ajax的精神在於非同步傳輸,所以,在Ajax發出清球后,並不會待server的回應,而必須指定一個特定的對象讓XMLHttpRequest在接收到server的回應的時候通知javascript.這個負責通知的onreadystatechange.
http://robin0925.cnblogs.com/archive/2006/06/14/425811.html