原生 ajax 写法

原生ajax写法如下：

var xhr = new XMLHttpRequest(); //创建 XMLHttpRequest 对象

xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //请求成功
    console.log(xhr.responseText);
  }
};

xhr.open("GET", "example.php", true); //设置请求方法和地址
xhr.send(); //发送请求

其中，`xhr` 是 XMLHttpRequest 对象，`onreadystatechange` 事件处理程序会在请求状态发生改变时被调用，`open` 方法用于设置请求方法和地址，`send` 方法用于发送请求。在 `onreadystatechange` 事件处理程序中，我们可以通过 `readyState` 和 `status` 属性来判断请求是否成功。如果 `readyState` 的值为 4，表示请求已完成；如果 `status` 的值为 200，表示请求成功。此时，可以通过 `responseText` 属性获取服务器返回的数据。

相关问题

原生ajax同步写法

原生 AJAX 同步写法通常是指直接使用浏览器提供的 XMLHttpRequest 对象，它在发送请求时设置 `async` 属性为 `false`，使得请求变为同步执行。以下是同步 AJAX 请求的基本步骤：

1. 创建一个新的 XMLHttpRequest 对象：

var xhr = new XMLHttpRequest();

2. 设置请求方法（GET、POST 等），URL 和是否同步（true 表示异步，false 表示同步）：

xhr.open('GET', 'your-url-here', false);

3. 调用 `send()` 方法发送请求：

xhr.send(); // 或者 xhr.send(data) 如果需要传递数据

4. 监听 `onreadystatechange` 事件，当服务器响应状态改变时处理结果：

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText); // 获取服务器返回的数据
  }
};

由于同步请求会阻塞页面加载，因此在现代 web 开发中并不推荐使用，通常我们更倾向于使用异步请求（`async: true`）。同步请求可能会导致用户体验变差，尤其是在处理大量数据或者网络状况不佳的情况下。

js原生ajax请求写法

以下是一个基本的原生 AJAX 请求的示例：

var xhr = new XMLHttpRequest(); // 创建一个XMLHttpRequest对象

xhr.onreadystatechange = function() { // 监听请求状态的变化
  if (xhr.readyState === 4 && xhr.status === 200) { // 请求已完成，且响应状态码为200（成功）
    console.log(xhr.responseText); // 输出响应结果
  }
};

xhr.open('GET', 'example.com/api/data'); // 配置请求的方法和URL
xhr.send(); // 发送请求

以上代码中，我们创建了一个 `XMLHttpRequest` 对象并设置了它的 `onreadystatechange` 回调函数。这个回调函数会在每次请求状态发生变化时被调用，我们通过检查 `readyState` 和 `status` 属性来判断请求是否完成且是否成功。如果成功，我们就可以通过 `responseText` 属性获取响应的结果。

在调用 `open()` 方法之后，我们还可以通过 `setRequestHeader()` 方法来设置请求头信息，例如：

xhr.setRequestHeader('Content-Type', 'application/json');

这里设置请求头信息为 `Content-Type: application/json`。最后，我们通过 `send()` 方法来发送请求。对于 GET 请求，该方法不需要参数；对于 POST 请求，我们需要将数据作为参数传递给该方法。

以上是一个基本的原生 AJAX 请求的写法，当然，还有很多其他的用法和技巧，具体可以根据实际需要进行学习和使用。