原生AJAX异步请求与文本文件操作示例

本文档主要介绍了使用AJAX（Asynchronous JavaScript and XML）进行异步请求的基本原理和实现。AJAX 是一种用于在不重新加载整个网页的情况下与服务器交换数据的技术，常用于创建更加动态和交互式的 Web 应用程序。 首先，我们看到一个简单的 HTML 页面结构，页面上包含一个按钮，点击后触发名为 `test` 的 JavaScript 函数。这个函数的核心部分是使用原生的 XMLHttpRequest 对象，它是浏览器提供的一种内置对象，用于与服务器进行异步数据通信。 在 `test` 函数内部，首先创建一个新的 XMLHttpRequest 实例 `var request = new XMLHttpRequest();`。接着设置请求方法和URL，这里使用的是 GET 方法，并指定要请求的资源为 "text/test.txt"。`true` 参数表示请求是异步的，这意味着浏览器不会阻塞用户界面，直到响应返回。 然后调用 `request.open(method, "text/test.txt", true)` 方法打开连接，传入请求方法、URL 和异步标志。接下来，通过 `request.send()` 发送请求到服务器。当服务器对请求做出响应时，会触发 `onreadystatechange` 事件。 `request.onreadystatechange` 是一个回调函数，每当请求的状态发生变化（如从未初始化到完成），该函数就会被调用。在这里，当 readyState 变为 4（表示请求已完成），并且状态码（status）为 200（成功）或 304（未修改，通常用于缓存）时，说明服务器响应已经就绪。此时，通过 `alert(request.responseText)` 显示服务器返回的数据，这是文本形式的响应。 最后，将接收到的响应文本用作动态更新页面的一部分，通过 `document.getElementById("di").innerHTML = request.responseText;` 将服务器返回的内容替换到页面上的 `<div id="di">fff</div>` 元素中。 这段代码展示了如何使用原生 AJAX 技术实现一个基础的异步数据获取功能，使得页面可以在后台与服务器交互而无需刷新整个页面。这对于提升用户体验，减少网络请求次数以及创建更高效的 Web 应用至关重要。理解并掌握这种技术对于前端开发人员来说是一项基本技能。