Ajax 封装：GET 和 POST 请求

"本文档介绍了如何使用ES5实现Ajax（异步JavaScript和XML）技术，主要涵盖GET和POST两种请求方式。" Ajax是一种在不刷新整个网页的情况下，能够与服务器交换数据并更新部分网页的技术。在ES5中，我们通常通过创建XMLHttpRequest对象来实现Ajax通信。下面将详细讲解GET和POST请求的实现方法。 #### GET请求 GET请求常用于获取服务器上的数据，参数通常附加在URL后面。以下是一个简单的GET请求封装示例： ```javascript // 创建XMLHttpRequest对象，兼容IE6 let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // 建立连接，设置请求方式为GET xhr.open('get', url, true); // 处理服务器响应 xhr.onreadystatechange = function() { // 当readyState为4时，表示请求已完成 if (xhr.readyState === 4) { // 成功，状态码为200 if (xhr.status === 200) { // 获取服务器返回的字符串数据 let responseData = xhr.responseText; // 如果需要将返回的字符串转换为对象，可以使用new Function构造函数 // data = new Function('return ' + responseData)(); } else { // 失败，调用失败回调函数 if (Fail instanceof Function) { Fail(); } } } }; // 发送请求 xhr.send(null); // 对于GET请求，send方法一般传入null ``` #### POST请求 POST请求则通常用于向服务器提交数据，数据包含在请求体中。以下是POST请求的封装： ```javascript // 创建XMLHttpRequest对象，兼容IE6 let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // 建立连接，设置请求方式为POST xhr.open('post', url, true); // 设置请求头，告诉服务器数据是以什么格式发送的 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 发送数据，这里是将data转换为URL编码格式 xhr.send(data); // 处理服务器响应，与GET请求类似 xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { Win(xhr.responseText); } else { if (Fail instanceof Function) { Fail(); } } } }; ``` 在实际应用中，你可能还需要处理错误，例如网络问题或服务器错误。同时，为了提高代码可读性和可维护性，可以将这些函数封装到一个更高级别的Ajax函数中，比如添加一个配置对象来处理各种选项。 总结来说，Ajax通过XMLHttpRequest对象实现了与服务器的异步通信，GET和POST是两种常见的HTTP请求方法，分别用于获取和提交数据。在ES5中，我们可以手动创建和操作XMLHttpRequest对象来完成这些任务。随着技术的发展，现在更多的开发人员转向使用更高级的库和框架，如jQuery、axios或fetch API，来简化Ajax操作。