Ajax+js实现异步交互

这篇文章是关于如何使用原生JavaScript结合AJAX实现异步交互的方法和代码的分享。对于需要实现异步交互的小伙伴来说，这是一个简单实用的参考。

当我们谈论异步交互时，很多人首先想到的便是AJAX。似乎AJAX已经成为了异步交互的代名词。我们将深入AJAX的核心内容。

实现AJAX异步交互主要可以分为四个步骤：

1. 创建AJAX核心对象

由于浏览器之间的兼容性问题，我们在创建AJAX核心对象时需要考虑兼容性问题。因为后续实现异步交互的步骤都依赖于第一步是否成功创建了AJAX核心对象。

接下来是一段创建AJAX核心对象的代码：

```javascript

function getXhr() {

var xhr = null;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else {

xhr = new ActiveXObject('Microsoft.XMLHttp');

}

return xhr;

}

var xhr = getXhr();

```

这段代码创建了一个AJAX核心对象，并将其保存在变量xhr中。后续提到的AJAX核心对象都将以xhr代替。

2. 与服务器建立连接

通过AJAX核心对象调用open()方法，可以建立与服务器的连接。open()方法的参数包括请求方式（get或post）、请求的URL地址以及是否异步（默认为true）。例如：

```javascript

xhr.open("get", "01.php?user=xianfeng"); // 这是get方式请求数据

xhr.open("post", "01.php"); // 这是以post方式请求数据

```

3. 向服务器发送请求

使用AJAX核心对象的send()方法可以向服务器发送请求。如果是post方式，请求的数据将以name=value形式放在send()方法里发送给服务器；如果是get方式，直接传入null值。例如：

```javascript

xhr.send("user=xianfeng"); // 这是以post方式发送请求数据

xhr.send(null); // 这是以get方式发送请求数据

```

4. 接收服务器响应的数据

通过onreadystatechange事件可以监听服务器的通信状态。使用readyState属性可以获取服务器端当前通信状态，使用status属性可以获取状态码，使用responseText属性可以接收服务器响应回来的数据。例如：

```javascript

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) { // 保证服务器端响应的数据发送完毕，保证这次请求必须是成功的

var data = xhr.responseText; // 接收服务器端的数据

console.log(data); // 测试输出数据到控制台

}

};

```这段代码监听了服务器的通信状态，当服务器端响应的数据发送完毕并且状态码为200时，会接收并输出服务器响应的数据到控制台。除了文本格式的数据外，还可以处理XML格式和JSON格式的数据。通过这四个步骤，我们可以实现简单的异步交互功能。希望这篇文章对需要实现异步交互的小伙伴有所帮助！