通过原生js完成ajax请求

首先要知道，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，则表示可以访问服务器发送回来的数据啦！

通过原生js完成ajax请求

猜你喜欢