Ajax原理与实现

一、Ajax 是什么

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

二、Ajax 的优缺点

概括总结 Ajax 的优缺点

优点：

• 页面无刷新，用户体验好
• 使用异步的方式与服务器通信，响应更加迅速
• 减轻服务器的压力，节约带宽
• 基于标准化并被广泛支持的技术

缺点：

• 破坏了浏览器的回退机制
• 暴露了更多的数据和服务器逻辑
• 对搜索引擎的支持比较弱
• 违背了 URL 与资源定位的初衷

三、XMLHttpRequest 对象

简单介绍一下 XMLHttpRequest 对象

XMLHttpRequest 对象是 Ajax 的核心，该对象是一种支持异步请求的技术。简而言之，XMLHttpRequest 对象可以让我们使用 JavaScript 向服务器发起请求并处理响应，而不阻塞用户。

通过 XMLHttpRequest 对象，Web 开发人员可以在页面加载后对页面进行局部更新。

四、Ajax 的实现流程

Ajax 的实现流程是怎样的呢？

1. 创建一个 XMLHttpRequest 对象
2. 创建一个新的 HTTP 请求，并指定该请求的方法、URL 以及是否为异步请求
3. 设置响应 HTTP 请求状态变化的函数
4. 发送 HTTP 请求
5. 对异步返回的数据进行处理

// 创建 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()

欢迎关注前端公众号：抬头仰望星空