【Web前端】Ajax超详解

Ajax（Asynchronous JavaScript and XML）技术能够让你在不刷新页面的前提下与服务器进行数据交换。这是通过在后台与服务器进行少量数据交换，并且不中断用户的现有体验。

以下是使用Ajax进行数据请求的基本步骤：

1. 创建一个新的XMLHttpRequest对象（IE5和6中为ActiveXObject）。
2. 打开一个与服务器的连接，并指定请求的方法（例如GET或POST）和URL。
3. 设置一个状态改变的事件处理器来处理服务器响应。
4. 发送请求到服务器。

以下是使用Ajax的示例代码：

// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest(); // 现代浏览器
// var xhr = new ActiveXObject('Microsoft.XMLHTTP'); // 旧版IE
 
// 打开一个与服务器的连接
xhr.open('GET', 'your-server-endpoint', true);
 
// 设置状态改变事件处理器
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功，处理服务器返回的数据
        var response = xhr.responseText;
        console.log('Server response:', response);
    }
};
 
// 发送请求到服务器
xhr.send();

这是一个简单的Ajax GET请求示例。对于POST请求，你需要设置HTTP头部，并可能发送数据。

xhr.open('POST', 'your-server-endpoint', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=value1&param2=value2');

请注意，现代浏览器不再支持ActiveX控件，因此推荐使用现代的XMLHttpRequest API。