我要评论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异步');
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论