ajax异步调用

### AJAX异步调用知识点详解 #### 一、概述 在现代Web开发中，异步JavaScript与XML（Asynchronous JavaScript and XML，简称Ajax）技术被广泛应用于构建动态且交互性更强的网页应用。通过Ajax技术，网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，极大地提升了用户体验。 #### 二、核心概念 1. **异步请求**：Ajax的核心在于使用`XMLHttpRequest`对象来实现客户端与服务器之间的异步通信。 2. **DOM操作**：文档对象模型（Document Object Model，简称DOM）是用于HTML和XML文档的API。通过DOM，JavaScript能够读取和修改页面的内容和结构，使得无需重载整个页面即可更新页面的部分内容。 3. **事件监听**：在JavaScript中，事件监听器允许开发者响应用户的输入或其他类型的事件。本例中使用了`onblur`事件触发验证函数。 #### 三、实现步骤 1. **创建 XMLHttpRequest 对象** - 在不同的浏览器中创建 XMLHttpRequest 对象的方法有所不同： - **非IE浏览器**（如Firefox, Chrome, Safari等）： ```javascript if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } ``` - **IE浏览器**（IE5, IE5.5, IE6等）： ```javascript if (window.ActiveXObject) { var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i = 0; i < activeName.length; i++) { try { xmlhttp = new ActiveXObject(activexName[i]); break; } catch (e) {} } } ``` 2. **设置回调函数** - 当服务器响应状态发生变化时，`onreadystatechange`事件会被触发。通常情况下，只有当`readyState`为4（表示请求完成）且`status`为200（表示成功获取到数据）时，才会处理服务器返回的数据。 ```javascript xmlhttp.onreadystatechange = callback; ``` 3. **发送请求** - 发送请求前，需要先使用`open`方法初始化请求类型、URL以及是否为异步请求。 ```javascript xmlhttp.open("GET", "AJAXServer?name=" + username, true); ``` - 接着，使用`send`方法发送请求。 ```javascript xmlhttp.send(null); ``` 4. **处理响应** - 在`callback`函数中处理服务器返回的数据，并更新DOM元素以显示结果。 ```javascript function callback() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var responseText = xmlhttp.responseText; var divNode = document.getElementById("result"); divNode.innerHTML = responseText; } } ``` #### 四、服务器端处理 - 服务器端代码（例如使用Java的Servlet）接收来自客户端的请求，并根据请求参数进行相应的处理。 ```java public class AJAXServer extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String old = request.getParameter("name"); if (old == null || old.length() == 0) { out.print("用户名不能为空！"); } else { // 进行其他逻辑处理 out.print("验证成功！"); } } } ``` #### 五、总结 - Ajax技术的核心在于利用`XMLHttpRequest`对象实现在用户界面上的局部更新，而无需重新加载整个页面。这种技术极大地提高了Web应用程序的交互性和用户体验。 - 通过上述示例，我们可以看到Ajax的基本使用流程，包括创建`XMLHttpRequest`对象、发送请求、处理响应等关键步骤。 - 随着前端技术的发展，现代Web开发中也出现了如Fetch API和Promise等更为简洁高效的方式来处理异步请求，但理解`XMLHttpRequest`的基本原理仍然是十分必要的。