AJAX XMLHttpRequest 对象入门

最新推荐文章于 2022-03-29 15:22:50 发布

keep!health

最新推荐文章于 2022-03-29 15:22:50 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yinweitao12/article/details/50509426

【BS知识学习】专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了AJAX的基础知识，通过XMLHttpRequest对象实现异步数据交互，让网页实现不刷新更新内容。主要内容包括AJAX的工作原理、创建XMLHttpRequest对象、发送请求及处理响应等。

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

helloAjax 文件代码：

<span style="font-family:Comic Sans MS;font-size:18px;">hello Ajax!!!</span>

html 代码：

<span style="font-family:Comic Sans MS;font-size:18px;"><body>
    <a href="TextFile1.txt">HelloAJAX</a>
</body></span>

JavaScript代码：

<span style="font-family:Comic Sans MS;font-size:18px;">   <script type="text/javascript">
        window.onload = function () {
            //1、获取 a节点，并添加 onclick 相应事件
            document.getElementsByTagName("a")[0].onclick = function () {
                //3、创建一个XMLhttpRequest对象
                var request = new XMLHttpRequest();
                //4、准备发送请求的数据：URL
                var url = this.href;
                var method = "GET";
                //5、调用XMLHttpRequest对象的open方法
                request.open(method, url);
                //6、调用XMLHttpRequest对象的sent方法
                    request.send(null);
                //7、为XMLHttpRequest对象添加onreadystatechange 响应事件
                request.onreadystatechange = function () {
                   //8、判断响应是否完成：XMLHttpRequest对象的readystate属性值为4的时候       
                    if (request.readyState == 4) {
                         //9、在判断响应是否可用：XMLHttpRequest 对象的status 属性值为 200
                        if (request.status == 200 || request.status == 304) {
                            //10、打印响应的结果：responsetext
                            alert(request.responseText)
                            alert("ddddd");
                        }
                    }
                }           
            }
           // 2、取消a节点的默认行为
            return false;
        }
    </script></span>

此时运行代码request.send(null)会报错，原因：你使用ajax方式来获取本地的xml文件的时候，前提是你的项目在服务器中部署了，如果你没有在服务器中部署项目，ajax在发送请求的时候肯定会报错的。