js基本ajax写法示例代码

下面我将为您详细讲解“JS基本Ajax写法示例代码”的完整攻略。

什么是AJAX

AJAX是Asynchronous JavaScript and XML的缩写，指的是通过JavaScript异步地向服务器发送请求，并通过DOM来更新页面，以实现无刷新的效果。

如何完成一个基本的AJAX请求

在介绍AJAX的编写之前，你需要了解一些关键字和常量：

• XMLHttpRequest：AJAX的核心对象，用于实现AJAX请求和数据传输。
• onreadystatechange：一个事件，当XMLHttpRequest对象的状态改变时会被触发。
• readyState：XMLHttpRequest对象的状态，有以下几种：
• 0：未初始化
• 1：已初始化
• 2：已发送请求
• 3：正在接收数据
• 4：已完成数据接收
• status：服务器返回的状态码。

接下来，我们就可以使用标准的JS语法来编写一个AJAX请求的示例。

// 创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 设置请求方法和请求地址
xhr.open('GET', 'http://example.com/api');
// 监听XMLHttpRequest对象的状态
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // 请求成功，从服务器返回的响应中获取数据
      console.log(xhr.responseText);
    } else {
      // 请求失败，输出错误信息
      console.error('请求失败');
    }
  }
};
// 发送AJAX请求
xhr.send();

在上面的例子中，我们创建了一个XMLHttpRequest对象，设置了请求的方法和地址，监控了XMLHttpRequest的状态，最后通过调用send方法来发送了一个AJAX请求。

如果请求成功，我们将从服务器返回的响应中获取数据并打印，如果请求失败，则输出错误信息。需要注意的是，这里我们仅给出了一个GET方法的请求。如果想要使用POST方法或其他请求类型，请自行替换请求类型和请求地址。

使用jQuery发送AJAX请求

除了可以通过原生的JS来发送AJAX请求，使用jQuery也可以方便地实现AJAX请求。我们可以使用jQuery的$.ajax函数，在其中设置请求类型、请求地址、数据类型，还可以添加更多的附加参数。

$.ajax({
  type: 'GET',
  url: 'http://example.com/api',
  dataType: 'json',
  success: function(response) {
    console.log(response);
  },
  error: function() {
    console.error('请求失败');
  }
});

在上面的例子中，我们使用$.ajax函数发送了一个GET类型的请求，请求地址为http://example.com/api，并设置了数据类型为json。如果请求成功，我们通过success回调函数进行处理，否则使用error回调函数输出错误信息。需要注意的是，这里我们仅给出了一个GET方法的请求。如果想要使用POST方法或其他请求类型，请自行替换请求类型和请求地址。

以上就是AJAX的基本写法，在实际开发中，如何将AJAX与业务逻辑相结合，取决于具体的需求和项目要求。