通过原生js完成ajax请求

最新推荐文章于 2020-07-13 00:04:30 发布

注释科长

最新推荐文章于 2020-07-13 00:04:30 发布

阅读量347

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zhushikezhang/article/details/81840000

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

首先要知道，ajax的核心是>>>XMLHttpRequest对象；

XMLHttpRequest对象有许多方法，最有用的当属open方法，它用于指定服务器上将要访问的文件，

例如：open("GET", "test.txt", true )；

指定了请求目标后，就可以用send方法发送请求啦；

下面看一个实例：

<body>
    <button>点我发送一次ajax请求</button>
    <div>
        <p id="target">这里显示返回的数据</p>
    </div>
    <script>
        var targetDom = document.getElementById('target');
        //定义利用ajax技术获取服务端数据的函数
        function getNewContent() {
            // 首先要创建一个XMLHttpRequest对象
            var request = new XMLHttpRequest();
            // 如果浏览器支持XMLHttpRequest对象，则。。。
            if (request) {
                request.open("GET", "data/test.json", true);
                request.onreadystatechange = function () {
                    if (request.readyState == 4){
                        var backData = JSON.parse(request.response)[0].name;
                        console.log(JSON.parse(request.response));
                        targetDom.innerText = backData;
                    }
                };
                request.send(null);
            }else {  // 如果浏览器不支持XMLHttpRequest对象，则。。。
                alert("抱歉，你的浏览器不支持XMLHttpRequest！！！")
            }
        }
        //添加点击事件，发送请求
        var buttonObj = document.getElementsByTagName('button')[0];
        buttonObj.onclick = function () {
            getNewContent();
        }
    </script>
</body>

服务器在向XMLHttpRequest对象发回响应时，浏览器会在不同阶段更新 readyState 属性的值，如下：

0：表示未初始化；

1：表示正在加载；

2：表示加载完毕；

3；表示正在交互；

4：表示完成；

只要值变为4，则表示可以访问服务器发送回来的数据啦！

注释科长

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过原生js完成ajax请求

首先要知道，ajax的核心是&gt;&gt;&gt;XMLHttpRequest对象；XMLHttpRequest对象有许多方法，最有用的当属open方法，它用于指定服务器上将要访问的文件，例如：open("GET", "test.txt", true )；指定了请求目标后，就可以用send方法发送请求啦；下面看一个实例：&lt;body&gt; &lt;button...
复制链接

扫一扫