随时记|AJAX相关原理&&面试题

今日目标：攻克ajax！！！

参考来源：
AJAX原理（含常见面试题）
AJAX
Ajax原理一篇就够了

什么是AJAX？

AJAX 即 Asynchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

总结来说，AJAX：

1. 是一种创建交互式网页应用的网页开发技术
2. 用于异步发送和请求数据
3. 不需要重载（刷新页面）,这将大大提升互联网用户的使用体验
4. 由于AJAX请求获取的是数据而不是HTML文档，因此它也节省了网络带宽，让互联网用户的网络冲浪体验变得更加顺畅

AJAX的作用

用于提高用户体验，较少网络数据的传输量

AJAX原理

AJAX的使用

1. 创建Ajax实例对象XMLHttpRequest(记得考虑兼容性)

let xhr = null;
if (window.`XMLHttpRequest`){
      //兼容 IE7+, Firefox, Chrome, Opera, Safari
	xhr = new `XMLHttpRequest`();
} else {
       // 兼容IE5, IE6
	xhr = new ActiveXObject(`Microsoft.XMLHTTP`);
};

2. 向服务器发送请求

xhr.open(method, url, async);
send(string); // 'POST'请求时才使用字符串参数，否则不带参数

• method：请求的类型，GET或POST
• url：文件再服务器上的位置
• async：true（异步）或false（同步） 注意：POST请求一定要设置请求头的格式内容

xhr.open("`POST`", "test.html", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford"); // `POST`请求参数放在send里面，即请求体

一个Promise对象实现的 Ajax 操作的例子：