在 HTML 中使用 AJAX 技术,需要结合 JavaScript 和 XMLHTTPRequest 对象来实现异步数据交互。
具体步骤如下:
通过 JavaScript 中的 XMLHttpRequest 对象,创建一个 XMLHttpRequest 实例,并指定回调函数用于处理服务器响应。关键代码如下:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理服务器响应
}
}
通过 XMLHttpRequest 对象的 open() 和 send() 方法,发送 HTTP 请求到服务器。open() 方法指定请求的类型(GET 或 POST)、URL 和是否异步处理请求,send() 方法将请求发送到服务器。关键代码如下:
xhr.open("GET", "example.php", true);
xhr.send();
在回调函数中,通过 XMLHttpRequest 对象的 responseText 和 responseXML 属性获取服务器响应。responseText 属性返回字符串形式的响应,responseXML 属性返回 XML 形式的响应。关键代码如下:
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = xhr.responseText;
// 处理响应数据
}
}
通过以上步骤,可以在 HTML 中使用 AJAX 技术实现异步数据交互。需要注意的是,为了实现跨域请求,需要在服务器端设置响应头部信息Access-Control-Allow-Origin。