最简单的 AJAX 例子代码(完整注释)

1<input type="button" onclick="ajaxTest()" value="AJAX测试">
2
3<input type="button" onclick=" document.getElementById('weather').innerHTML='' " value="隐藏">
4
5<script>
6// 1. 初始化请求对象
7// Mozilla/Firefox 下的
8var xmlhttp = new XMLHttpRequest();
9// IE 下的
10//var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
11//alert(xmlhttp);
12
13function ajaxTest() {
14    // 指定要打开的页面
15    xmlhttp.open("GET", "staticpage.html", true);// HTTP 请求的方式, URL, 是否异步
16    // 指定页面打开完之后要进行的操作.
17    xmlhttp.onreadystatechange = mychange;
18    // 开始发起浏览请求, Mozilla 必须加 null
19    xmlhttp.send(null);
20}
21
22// 这个函数就是每次状态改变要调用的函数
23function mychange() {
24    // 请求已完成
25    if(xmlhttp.readyState == 4) {
26        //alert(xmlhttp.readyState);
27        alert(xmlhttp.responseText);
28        // 更新对应的 HTML 元素里面显示的内容
29    // 根据 ID 引用页面里面的元素 document.getElementById(元素名)
30    document.getElementById('weather').innerHTML = xmlhttp.responseText;
31    }
32}
33</script>
34
35<div id="weather"></div>

posted on 2009-02-07 21:33 飞翔天使阅读(633) 评论(2) 编辑收藏所属分类: ajax

常用链接

留言簿(1)

随笔分类(146)

随笔档案(147)

文章分类(28)

文章档案(28)

喜欢的Blog

搜索

最新评论

阅读排行榜

评论排行榜


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: jquery常用技巧（整理中） jquery,js上移下移 FCKeditor常见问题（2012.10.13更新）如何给Ajax的回调函数传参数？ ExtJS的tbar布局 Ext框架的Grid使用介绍 Extjs使用教程（整理中） dtree的使用最简单的 AJAX 例子代码(完整注释)