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

最新推荐文章于 2024-07-01 14:46:32 发布

iteye_10770

最新推荐文章于 2024-07-01 14:46:32 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

分类专栏： Java 学习文章标签： Ajax IE Firefox Microsoft HTML

本文链接：https://blog.youkuaiyun.com/iteye_10770/article/details/81803057

Java 学习专栏收录该内容

178 篇文章

订阅专栏

本文介绍了一种利用Ajax技术动态加载和更新网页内容的方法。通过JavaScript发起HTTP请求，并在不重新加载整个页面的情况下更新部分网页元素。文章详细解释了如何创建XMLHttpRequest对象，设置请求类型、URL及异步标志，以及如何处理服务器响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >




<input type="button" onclick=" document.getElementById('weather').innerHTML='' " value="隐藏">

<script>
// 1. 初始化 请求 对象
// Mozilla/Firefox 下的
var xmlhttp = new XMLHttpRequest();
// IE 下的
//var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
//alert(xmlhttp);

function ajaxTest() {
    // 指定要打开的页面
    xmlhttp.open("GET", "staticpage.html", true);// HTTP 请求的方式, URL, 是否异步
    // 指定页面打开完之后要进行的操作.
    xmlhttp.onreadystatechange = mychange;
    // 开始发起浏览请求, Mozilla 必须加 null
    xmlhttp.send(null);
}

// 这个函数就是每次状态改变要调用的函数
function mychange() {
    // 请求已完成
    if(xmlhttp.readyState == 4) {
        //alert(xmlhttp.readyState);
        alert(xmlhttp.responseText);
        // 更新对应的 HTML 元素里面显示的内容
    // 根据 ID 引用页面里面的元素 document.getElementById(元素名)
    document.getElementById('weather').innerHTML = xmlhttp.responseText;
    }
}
</script>

<div id="weather"></div>