JS ajax交付代码
时间: 2024-06-05 17:03:32 浏览: 23
AJAX是一种利用JavaScript和XML(或JSON)编写的异步网页交互技术。它的主要特点是:不需要刷新整个页面,只更新部分页面数据,可以异步请求服务器数据,并在不刷新页面的情况下更新页面内容。
以下是JS中使用AJAX实现数据交互的基本步骤:
1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象
```
var xhr = new XMLHttpRequest();
```
2. 设置请求方式、请求地址、是否异步处理请求(true表示异步处理)
```
xhr.open("GET", "example.php", true);
```
3. 注册相关事件回调处理函数(这里以onreadystatechange事件为例)
```
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//处理服务器响应数据
console.log(xhr.responseText);
}
}
```
4. 发送请求
```
xhr.send();
```
其中,onreadystatechange事件回调函数会在AJAX状态发生变化时被调用。当readyState值为4(请求已完成)且status值为200(服务器响应成功)时,表明服务器已经成功响应请求,此时可以通过xhr.responseText获取服务器响应数据。
相关问题
jquery ajax js用法代码
以下是一个使用 jQuery Ajax 的例子:
```javascript
$(document).ready(function() {
// 绑定一个点击事件
$('#btn-load-data').click(function() {
// 发送 Ajax 请求
$.ajax({
url: 'http://example.com/data.json', // 请求的 URL
type: 'GET', // 请求的方法
dataType: 'json', // 服务器返回的数据类型
success: function(data) { // 成功的回调函数
// 在页面上显示数据
$('#data-container').html(data);
},
error: function(jqXHR, textStatus, errorThrown) { // 失败的回调函数
console.log('Error: ' + textStatus + ' - ' + errorThrown);
}
}); // end ajax
}); // end click
}); // end ready
```
在这个例子中,我们首先绑定了一个点击事件,并在事件处理程序中发送 Ajax 请求。我们使用 `$.ajax()` 方法来发送请求,并传递一个包含请求参数的对象作为参数。在成功的回调函数中,我们使用 jQuery 的 `html()` 方法将从服务器返回的数据添加到页面上。如果请求失败,我们将打印错误消息到控制台中。
ajax的js封装代码
以下是一个简单的使用原生JavaScript封装的ajax函数代码:
```javascript
function ajax(options) {
var xhr = new XMLHttpRequest();
xhr.open(options.method, options.url, true);
xhr.onload = function() {
if (xhr.status === 200) {
options.success(xhr.responseText);
} else {
options.error(xhr.statusText);
}
};
xhr.onerror = function() {
options.error(xhr.statusText);
};
xhr.send(options.data);
}
// 使用示例
ajax({
method: "GET",
url: "https://jsonplaceholder.typicode.com/todos/1",
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});
```
在这个函数中,我们使用XMLHttpRequest对象来发送HTTP请求,并在请求完成后调用传入的回调函数。您可以根据需要对其进行修改和扩展。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)