AJAX 实例

AJAX 实例

一、概述

AJAX（Asynchronous JavaScript and XML）是指异步JavaScript和XML技术，通过AJAX技术，可以局部刷新网页，提升用户体验，同时也减轻了服务器的压力。本文将以一些常见的AJAX实例为例，分析AJAX技术的实现原理，权当大家学习AJAX之路上的参考。

二、实例

1.获取服务器文件

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.responseType = 'text';
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.log('出错了，状态码为：' + xhr.status);
    }
};
xhr.onerror = func```

### Jav consol
.我('出错了');
};
xhr.send();

上面这个实例，通过AJAX技术从服务器端获取一个名为data.json的文件，并将文件内容打印在浏览器的控制台中，这个例子涉及到的AJAX核心操作有：创建XMLHttpRequest对象，创建请求，发���低版本 IE 浏览器 xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); }

// readyState: 请求状态 // 0 请求未初始化 // 1 服务器连接已建立 // 2 请求已接收 // 3 请求处理中 // 4 请求已完成，且响应已就绪 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById(“demo”).innerHTML = xmlhttp.responseText; } }

xmlhttp.open(“GET”, “ajax_info.txt”, true); xmlhttp.send(); }

上述代码使用了 `onreadystatechange` 事件来监听 `readyState` 的变化。当 `readyState` 的值为 `4` 且 `status` 的值为 `200` 时，表示请求已经完成，我们将 `responseText` 属性的值赋给页面中的一个元素，这里的元素是一个 `p` 标签，其 ID 值为 `demo`。

### 服务器

在服务器上，我们需要有一个能够响应 AJAX 请求的脚本或页面。在这个示例中，我们创建了一个名为 `ajax_info.txt` 的文本文件来作为响应内容。

可以把这个文件放在与 HTML 文件相同的目录中，也可以放在与 HTML 文件不同的目录中，只需在 `xmlhttp.open()` 方法的第一个参数中传入正确的文件路径即可。

文件内容如下：

姓名：张三 年龄：20 性别：男

### 运行

在浏览器中打开 HTML 文件，点击页面中的按钮，就可以将响应内容载入到页面中了。

## 总结

这是一个简单的 AJAX 示例，我们可以根据实际需求来修改其中的 JavaScript 代码和服务器脚本以实现不同的功能。需要注意的是，使用 AJAX 时要注意浏览器兼容性，尽可能使用标准的方法来编写代码，以避免出现兼容性问题。��可以发现AJAX的核心就是XMLHttpRequest对象，利用XMLHttpRequest对象来创建请求、发送请求、接收响应、处理响应。AJAX技术可以帮助我们在不刷新整个网页的情况下，局部地更新网页内容，提升用户体验，同时也减轻了服务器端的压力。