一、Ajax 是什么
Ajax（Asynchronous JavaScript And XML）异步 JavaScript 和 XML，是一种创建交互式互联网应用的网页开发技术。
二、Ajax 的优缺点
概括总结 Ajax 的优缺点
优点：
- 页面无刷新，用户体验好
- 使用异步的方式与服务器通信，响应更加迅速
- 减轻服务器的压力，节约带宽
- 基于标准化并被广泛支持的技术
缺点：
- 破坏了浏览器的回退机制
- 暴露了更多的数据和服务器逻辑
- 对搜索引擎的支持比较弱
- 违背了 URL 与资源定位的初衷
三、XMLHttpRequest 对象
简单介绍一下 XMLHttpRequest 对象
XMLHttpRequest 对象是 Ajax 的核心，该对象是一种支持异步请求的技术。简而言之，XMLHttpRequest 对象可以让我们使用 JavaScript 向服务器发起请求并处理响应，而不阻塞用户。
通过 XMLHttpRequest 对象，Web 开发人员可以在页面加载后对页面进行局部更新。
四、Ajax 的实现流程
Ajax 的实现流程是怎样的呢？
- 创建一个
XMLHttpRequest对象 - 创建一个新的
HTTP请求，并指定该请求的方法、URL以及是否为异步请求 - 设置响应
HTTP请求状态变化的函数 - 发送
HTTP请求 - 对异步返回的数据进行处理
// 创建 XMLHttpRequest 对象
var xhr
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
// 创建一个新的请求
xhr.open('GET', 'http://www.example.com', true)
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 监听 HTTP 请求状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var res = xhr.responseText
}
}
// 发送 HTTP 请求
xhr.send()
欢迎关注前端公众号：抬头仰望星空
