JavaScript--XMLHttpRequest获取数据方法

最新推荐文章于 2024-08-15 21:19:01 发布

三分之一给你

最新推荐文章于 2024-08-15 21:19:01 发布

阅读量6.6k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/xiebin6163/article/details/79303960

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

XMLHttpRequest

Wiki上对于XHR的介绍如下：

XMLHttpRequest (XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server.

它是一个API对象，它的属性可以用来在浏览器与服务器之间传输数据。

JS实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get luck today</title>
    <script type="text/javascript">

        window.onload = function() { /*设置在页面加载完后执行以下js代码*/
            var url = "luckyornot.txt"/*将连接赋到变量url中*/
            var request = new XMLHttpRequest();/*用new创建一个XHR对象*/
            request.open("GET",url);/*设置XHR对象的请求方法与路径*/
            request.send(null);/*设置XHR对象不发送数据到服务器*/
            request.onload = function() {/*设置当获XHR对象获取到返回信息后执行以下代码*/
                if(request.status == 200) {/*如果返回的状态为200，即为成功获取数据*/
                    var p = document.getElementById("luck");/*获取DOM中id为luck的p元素*/
                    p.innerHTML = "Today you are " + request.responseText;/*将信息重新写入id为luck的p元素中*/
                }
            }

        }

    </script>
</head>
<body>
    <p id="luck"></p>
</body>
</html>