补全以下三个方法实现Ajax的基本运用
时间: 2024-10-09 21:16:01 浏览: 38
AJAX (Asynchronous JavaScript and XML) 是一种网页开发技术,允许在不刷新整个页面的情况下向服务器请求数据并更新部分内容。以下是使用JavaScript实现基本Ajax请求的简单示例,通常我们会使用XMLHttpRequest对象或者现代浏览器支持的fetch API:
```javascript
// 使用原生XMLHttpRequest
function basicAjaxGet(url, callback) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 'true'表示异步请求
xhr.onload = function () {
if (xhr.status === 200) { // 成功状态码
callback(xhr.responseText);
} else {
console.error('Request failed. Status:', xhr.status);
}
};
xhr.onerror = function () {
console.error('Request failed');
};
xhr.send(); // 发送请求
}
// 使用fetch API
async function fetchAjaxGet(url, callback) {
try {
const response = await fetch(url);
if (response.ok) {
callback(await response.text());
} else {
throw new Error(`Error ${response.status}`);
}
} catch (error) {
console.error(error);
}
}
// 调用函数,假设有一个回调函数handleData处理返回的数据
basicAjaxGet('your-api-url', handleData);
fetchAjaxGet('your-api-url', handleData);
```
这里,`callback`函数会在接收到服务器响应后被调用,并传递数据给它。请将`'your-api-url'`替换为你实际需要发送请求的服务器地址。
阅读全文