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 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. http://robin0925.cnblogs.com/archive/2006/06/14/425811.html
