AJAX 用于创造动态性更强的应用E序?/span>
实例解释 - showHint() 函数
当用户在上面的输入框中键入字W时Q会执行函数 "showHint()" 。该函数?"onkeyup" 事g触发Q?/p>
function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","gethint.asp?q="+str,true); xmlhttp.send(); } 源代码解释：
如果输入框ؓI?(str.length==0)Q则该函数清I?txtHint 占位W的内容Qƈ退出函数?/p>
如果输入框不为空QshowHint() 函数执行以下dQ?/p>
- 创徏 XMLHttpRequest 对象
- 当服务器响应qA时执行函?/li>
- 把请求发送到服务器上的文?/li>
- h意我们向 URL d了一个参?q Q带有输入框的内容）
AJAX 服务器页?- ASP ?PHP
׃面的 JavaScript 调用的服务器面?ASP 文gQ名?"gethint.asp"?/p>
下面Q我们创Z两个版本的服务器文gQ一个用 ASP ~写Q另一个用 PHP ~写?/p>
ASP 文g
"gethint.asp" 中的源代码会查一个名字数l，然后向浏览器q回相应的名字：
<% response.expires=-1 dim a(30) '用名字来填充数组 a(1)="Anna" a(2)="Brittany" a(3)="Cinderella" a(4)="Diana" a(5)="Eva" a(6)="Fiona" a(7)="Gunda" a(8)="Hege" a(9)="Inga" a(10)="Johanna" a(11)="Kitty" a(12)="Linda" a(13)="Nina" a(14)="Ophelia" a(15)="Petunia" a(16)="Amanda" a(17)="Raquel" a(18)="Cindy" a(19)="Doris" a(20)="Eve" a(21)="Evita" a(22)="Sunniva" a(23)="Tove" a(24)="Unni" a(25)="Violet" a(26)="Liza" a(27)="Elizabeth" a(28)="Ellen" a(29)="Wenche" a(30)="Vicky" '获得来自 URL ?q 参数 q=ucase(request.querystring("q")) '如果 q 大于 0Q则查找数组中的所有提C?/span> if len(q)>0 then hint="" for i=1 to 30 if q=ucase(mid(a(i),1,len(q))) then if hint="" then hint=a(i) else hint=hint & " , " & a(i) end if end if next end if '如果未找到提C，则输?"no suggestion" '否则输出正确的?/span> if hint="" then response.write("no suggestion") else response.write(hint) end if %>
PHP 文g
下面的代码用 PHP ~写Q与上面?ASP 代码作用是一L?/p>
注释Q?/span>如需?PHP 中运行这个例子，请将 url 变量的|Javascript 代码中）?"gethint.asp" 改ؓ "gethint.php"?/p><?php // 用名字来填充数组 $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //获得来自 URL ?q 参数 $q=$_GET["q"]; //如果 q 大于 0Q则查找数组中的所有提C?/span> if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } // 如果未找到提C，则把输出讄?"no suggestion" // 否则讄为正的?/span> if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //输出响应 echo $response; ?>
]]>
onreadystatechange 事g
当请求被发送到服务器时Q我们需要执行一些基于响应的d?/p>
每当 readyState 改变Ӟ׃触发 onreadystatechange 事g?/p>
readyState 属性存?XMLHttpRequest 的状态信息?/p>
下面?XMLHttpRequest 对象的三个重要的属性：
| 属?/th> | 描述 |
|---|---|
| onreadystatechange | 存储函数Q或函数名）Q每?readyState 属性改变时Q就会调用该函数?/td> |
| readyState | 存有 XMLHttpRequest 的状态。从 0 ?4 发生变化?/p>
|
| status | 200: "OK" 404: 未找到页?/p> |
?onreadystatechange 事g中，我们规定当服务器响应已做好被处理的准备时所执行的Q务?/p>
?readyState {于 4 且状态ؓ 200 Ӟ表示响应已就l：
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } 注释Q?/span>onreadystatechange 事g被触?5 ơ（0 - 4Q，对应着 readyState 的每个变化?/p> callback 函数是一U以参数形式传递给另一个函数的函数?/p> 如果您的|站上存在多?AJAX dQ那么您应该为创?XMLHttpRequest 对象~写一?span style="margin: 0px; padding: 0px; border: 0px; font-weight: bold;">标准的函敎ͼqؓ每个 AJAX d调用该函数?/p> 该函数调用应该包?URL 以及发生 onreadystatechange 事g时执行的dQ每ơ调用可能不相同）Q?/p>使用 Callback 函数
function myFunction() { loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); }
]]>
XMLHttpRequest ?AJAX 的基?/span>
XMLHttpRequest 对象
所有现代浏览器均支?XMLHttpRequest 对象QIE5 ?IE6 使用 ActiveXObjectQ?/p>
XMLHttpRequest 用于在后C服务器交换数据。这意味着可以在不重新加蝲整个|页的情况下Q对|页的某部分q行更新?/p>
创徏 XMLHttpRequest 对象
所有现代浏览器QIE7+、Firefox、Chrome、Safari 以及 OperaQ均内徏 XMLHttpRequest 对象?/p>
创徏 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer QIE5 ?IE6Q?ActiveX 对象Q?/h3>variable=new ActiveXObject("Microsoft.XMLHTTP");
Z应对所有的C览器，包括 IE5 ?IE6Q请查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创?XMLHttpRequest 对象。如果不支持Q则创徏 ActiveXObject Q?/p>
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 在下一章中Q您学习发送服务器h的知识?/p>
]]>
Z帮助您理?AJAX 的工作原理，我们创徏了一个小型的 AJAX 应用E序?/span>
实例
AJAX is not a programming language.
It is just a technique for creating better and more interactive web applications.
AJAX 实例解释
上面?AJAX 应用E序包含一?div 和一个按钮?/p>
div 部分用于昄来自服务器的信息。当按钮被点LQ它负责调用名ؓ loadXMLDoc() 的函敎ͼ
<html> <body> <div id="myDiv"><h3>Let AJAX change this text</h3></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html> 接下来，在页面的 head 部分d一?<script> 标签。该标签中包含了q个 loadXMLDoc() 函数Q?/p>
<head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ... } </script> </head> 下面的章节会为您讲解 AJAX 的工作原理?/p>
]]>