Ajax 自学 初学笔记 对入门非常有帮助

Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术在Web开发中被广泛应用，因为它极大地提升了用户体验，允许用户在交互过程中无需等待页面刷新就能看到更新内容。 在Ajax的核心中，XMLHttpRequest（XHR）对象扮演了至关重要的角色。它是JavaScript用来与服务器进行异步数据交换的原生对象。XMLHttpRequest这个名字可能会误导人，实际上它不仅支持XML格式的数据，还支持JSON、HTML等多种格式的数据传输。 **XMLHttpRequest对象的创建** 在不同的浏览器环境下，创建XMLHttpRequest对象的方式有所不同。在IE5以上版本，由于使用的是ActiveX对象，创建方式如下： ```javascript var xmlhttpIEnew = new ActiveXObject("Msxml2.XMLHTTP"); var xmlhttpIEold = new ActiveXObject("Microsoft.XMLHTTP"); ``` 而在非IE浏览器，如Firefox、Chrome、Safari等，可以使用原生的XMLHttpRequest对象创建： ```javascript var xmlhttp = new XMLHttpRequest(); ``` **XMLHttpRequest对象的使用** 1. **open()方法**：用于指定请求的类型（GET或POST）、URL以及是否异步执行。例如： ```javascript XMLHttpReq.open("GET", url, true); ``` 2. **onreadystatechange属性**：设置处理响应的函数，当XMLHttpRequest对象的状态发生变化时，会调用该函数。例如： ```javascript XMLHttpReq.onreadystatechange = processResponse; ``` 3. **send()方法**：实际发送请求到指定的URL。如果使用POST方法，需要在send()方法中传递数据；如果是GET，一般传递null。 ```javascript XMLHttpReq.send(null); ``` **XMLHttpRequest对象的状态** XMLHttpRequest对象具有`readyState`属性，表示请求/响应过程的当前阶段。它有五个可能的值： - 0: 未初始化，open()方法尚未被调用。 - 1: 初始化，open()方法已被调用，但send()方法未调用。 - 2: 已发送，send()方法已调用，但服务器响应未到达。 - 3: 接收中，部分响应数据已接收，但响应头和完整响应体尚未接收。 - 4: 完成，响应已接收且可使用，可以通过响应属性获取数据。 **处理响应** 当`readyState`变为4（完成状态）且`status`为200（表示请求成功）时，可以处理服务器返回的数据。例如： ```javascript if (XMLHttpRequest.readyState == 4 && XMLHttpRequest.status == 200) { // 处理服务器返回的信息 } else { // 处理异常情况 } ``` 通过以上步骤，我们可以实现一个简单的Ajax请求示例，例如获取并显示指定URL上的数据： ```javascript function sendRequest(url) { var XMLHttpReq = new XMLHttpRequest(); XMLHttpReq.open("GET", url, true); XMLHttpReq.onreadystatechange = function() { if (XMLHttpReq.readyState == 4 && XMLHttpReq.status == 200) { alert(XMLHttpReq.responseText); } else { alert("页面不正常"); } }; XMLHttpReq.send(null); } ``` Ajax利用XMLHttpRequest对象实现了异步数据交换，从而在不刷新整个页面的情况下更新内容，极大地提升了Web应用的交互性和响应速度。随着前端技术的发展，现代浏览器对XMLHttpRequest进行了优化，提供了更高级的API，如fetch API，使得异步请求更加简单和易用。然而，了解XMLHttpRequest的基础知识仍然是理解Web开发中异步交互机制的关键。