AJAX 初识

2019-05-23 09:55:46来源：博客园阅读 ()

　　AJAX全称为 Asynchronous Javasript And XML，是在浏览器端进行网络编程（发送请求，接收响应）的技术方案。AJAX 也就是浏览器提供的一套API，可以供 Javascript 调用，从而通过代码来控制请求和响应，实现网络编程。

AJAX 使用基本模板

使用 AJAX 的过程相当于访问一个页面

　　　　　// 1.创建一个 XMLHttpRequest 的对象（相当于打开了一个浏览器）
　　　　  // 兼容方案
　　　　　var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        // 2，输入网址（get或post 根据需求设置，一般参数通过url传递则使用 get, 关于账户密码等敏感信息使用 post）
        xhr.open('get', 'time.php');
        // 3.敲回车，开始请求
        // 因为响应需要时间，所以无法通过返回值的方式返回响应
        // var response = xhr.send();
        // console.log(response);
        xhr.send();
        // 3.等待响应
        xhr.addEventListener('readystatechange', function () {
            if (this.readyState === 4) {
                // 获取响应体
                console.log(this.responseText);
            }
        });

详解等待状态（readyState）

readyState	状态描述	含义
0	unsent	初始化，请求了一个代理对对象，
1	opened	open()方法已经调用，建立一个与服务端特定端口的连接
2	header_receive	已经接收到了响应头，但是还没有接收响应体
3	loading	正在下载响应体
4	done	响应体下载完成，可以直接使用 responseText

遵循HTTP

var xhr = new XMLHttpRequest();

        // 设置请求行
        xhr.open('get', 'time.php');

        // 设置请求头
        xhr.setRequestHeader('Accept', 'text/plain');

        // 设置请求体
        xhr.send(null);

        xhr.addEventListener('readystatechange', function () {
            if (this.readyState === 4 && this.status === 200) {

                // 获取响应状态码
                console.log(this.status);

                // 获取响应状描述
                console.log(this.statusText);

                // 获取响应头信息
                console.log(this.getResponseHeader('Content-Type'));    // 指定响应头
                console.log(this.getAllResponseHeaders()); // 全部响应头


                // 转换成数组
                console.log(this.getAllResponseHeaders().split("\n"));

                // 获取响应头中的某一个信息
                console.log(this.getResponseHeader('server'));

            }
        });

同步与异步

同步：在同一时刻只能做同一件事，在执行一些耗时的事情时不去做其他事情，而是等待

异步：在执行一些耗时的事情是去做其他事情，而不是等待（性能更好，默认为 true）

同步：

                console.time('ajax同步');
        const xhrSync = new XMLHttpRequest();
        xhrSync.open('get', 'time.php', false);
        xhrSync.send();            // 同步代码会卡在 send() 这里 
        console.log(xhrSync.responseText);
        console.timeEnd('ajax同步');

异步：

// 异步性能更好，时间更短
        console.time('ajax异步');
        const xhr = new XMLHttpRequest();
　　　　　// 这里 第三个参数默认为 true,即不写true时为异步(大多数使用)
        xhr.open('get', 'time.php', true);
        xhr.send();
        console.log(xhr.responseText);
        console.timeEnd('ajax异步');

原文链接:https://www.cnblogs.com/duxiu-fang/p/10910450.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有