AJAX的基本使用

1. 什么是AJAX

AJAX是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript和XML。

在实际开发当中，我们经常会更新网页中的数据，但是又不想更新一部分数据，将整个页面进行更新，这个时候就需要用到我们今天讲得ajax技术了。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2. AJAX的基本原理

AJAX的基本原理是通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

使用AJAX的步骤

• 创建一个XMLHttpRequest实例化对象
• 初始化
• 发送请求
• 更新网页

首先，第一步，我们需要创建一个XMLHttpRequest对象，这个对象是AJAX的核心，通过这个对象，我们可以向服务器发送请求，获取服务器返回的数据。

var xhr = new XMLHttpRequest();
复制代码

通过上面的代码，我们成功创建了一个XMLHttpRequest对象，接下来我们需要初始化这个对象，初始化的时候，我们需要指定请求的类型，请求的URL，以及是否异步发送请求。

第二步，初始化XMLHttpRequest对象

xhr.open("get", "http://localhost:8080/ajax", true);
复制代码

在初始化这一步，我们使用XMLHttpRequest对象的open()方法，这个方法接收三个参数，第一个参数是请求的类型，第二个参数是请求的URL，第三个参数是是否异步发送请求。 第一个参数，请求的类型，一般有两种，一种是get，一种是post，get是从服务器上获取数据，post是向服务器发送数据。

当第三个参数为true的时候，表示异步发送请求，当第三个参数为false的时候，表示同步发送请求。

第三步，发送请求

xhr.send();
复制代码

在发送请求的时候，我们使用XMLHttpRequest对象的send()方法，这个方法接收一个参数，这个参数就是要发送到服务器的数据。

如果是get请求，这个参数可以省略。但是如果是post请求，这个参数不可以省略。

第四步，更新网页

在这一步，我们需要判断请求是否请求成功，然后我们将服务器返回的数据拿到，然后通过javascript来操作DOM，来更新页面。

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = xhr.responseText;
        console.log(data);
    }
}
复制代码

在这一步，我们使用XMLHttpRequest对象的onreadystatechange事件，这个事件会在XMLHttpRequest对象的readyState属性发生改变的时候触发。

那么什么是readyState呢？readyState属性表示XMLHttpRequest对象的状态，它有五种状态，分别是：

• 0：请求未初始化
• 1：服务器连接已建立
• 2：请求已接收
• 3：请求处理中
• 4：请求已完成，且响应已就绪

那么整个请求过程中，readyState属性的变化有四个阶段：

• 0 -> 1
• 1 -> 2
• 2 -> 3
• 3 -> 4

也就是说，在完整的请求过程中，会触发四次onreadystatechange事件。

上面代码中xhr.readyState == 4 && xhr.status == 200表示。只有当readyState属性为4的时候，表示请求已经完成，且响应已经就绪，这个时候我们才能拿到服务器返回的数据。

然后进行更新页面。