AJAX 范例
前面一章节中我们简单介绍了下 AJAX,也演示了 AJAX 的范例和工作原理图示
现在,我们来创建一个简单的 AJAX 应用程序,加深 AJAX 动态更新 HTML 思路
范例
使用 AJAX 请求的内容替换我
当我们点击 修改内容 按钮时,会发现内容已经被替换,但页面并没有刷新
AJAX 范例解析
上面的 AJAX 范例源码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/r/show/yufei/txt/ajax_info",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 请求的内容替换我</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>
这个 AJAX 应用程序包含了一个 id 为 "myDiv" 的 div 和一个按钮,还有一段 JavaScript 脚本。
div 部分用于显示来自服务器的信息。当按钮被点击时,它负责调用名为 loadXMLDoc()
的函数
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button>
接下来,在页面的中添加一个 <script> 标签。
该标签中包含了这个 loadXMLDoc() 函数
<script> function loadXMLDoc() { .... AJAX 脚本执行 ... } </script>
loadXMLDoc() 函数创建了一个 XMLHttpRequest 对象,然后使用这个对象来请求服务器的内容
我们会在下一章节详细介绍 XMLHttpRequest 对象