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(" ")); // 获取响应头中的某一个信息 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异步');