学习Ajax以及Wamp心得

最新推荐文章于 2021-09-21 14:35:39 发布

似懂放得下

最新推荐文章于 2021-09-21 14:35:39 发布

阅读量956

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ZuoMarsNiShang/article/details/54295417

本文介绍了一种使用Ajax技术实现网页元素异步加载的方法。通过JavaScript代码展示了如何创建Ajax对象并设置其属性，包括定义请求方式为POST，设置URL参数避免缓存等问题。此外，还介绍了如何通过回调函数处理服务器响应的数据。

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

MyHtml.html

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function Ajax (url,fnSucc,fnFail){
        //1.创建Ajax对象  虽然我们老说Ajax 但在浏览器中XMLHttpRequest才是真正的对象
        var Ajax = new XMLHttpRequest();
        //2.连接到服务器  open(提交方式，文件名，异步传输)
        Ajax.open("POST", url + "?t=" + new Date().getTime(), true);
        //3.发送请求
        Ajax.send();
        //4.接受返回
        Ajax.onreadystatechange = function (){
            if(Ajax.readyState == 4)//4代表send方法完成，收到全部相应内容并且完成解析
            {
                if(Ajax.status == 200){
                    fnSucc(Ajax.responseText);
                }else{
                    if(fnFail)
                    fnFail(Ajax.status);
                }
            }
        };
    };
window.onload = function (){
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
        Ajax("aaa.txt",
        function(message){alert(message);}
        );
    };
};
</script>

Login:
Password: