轻松get原生ajax中的各种设置：请求头、请求体、请求方式

2023-01-25 09:09:55

原生Ajax：GET请求的奥妙

Ajax（Asynchronous JavaScript and XML）是一种强大的技术，它允许我们异步地与服务器通信，从而使网页更加动态和交互式。而GET请求是Ajax中最基本的请求类型之一，它用于从服务器获取数据。

定制请求头：传递关键信息

请求头包含我们发送给服务器的附加信息，这些信息可以自定义请求的行为。例如，我们可以指定请求的数据格式或浏览器的类型。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

灵活性请求体：发送任意数据

请求体包含我们发送到服务器的数据。我们可以轻松地发送各种格式的数据，包括表单数据和JSON对象。

xhr.send('a:10&b=20');

可变请求方式：选择操作类型

请求方式决定了我们希望服务器如何处理请求。我们可以选择GET、POST、PUT或DELETE等方式。

xhr.open('POST', 'http://www.example.com/api/user', true);

GET请求和POST请求的区别在于参数的传递方式。GET请求将参数拼接到URL中，而POST请求将参数包含在请求体中。GET请求的参数长度有限，而POST请求没有。

从头到尾：一个完整的原生Ajax GET请求示例

让我们用一个实际的例子来说明原生Ajax GET请求是如何工作的：

<button onclick="get_user()">获取用户信息</button>

<script>
  function get_user() {
    // 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();

    // 设置请求方式和 URL
    xhr.open('GET', 'http://www.example.com/api/user/1', true);

    // 侦听响应事件
    xhr.onload = function() {
      // 检查请求状态
      if (xhr.status === 200) {
        // 请求成功，解析响应数据
        const data = JSON.parse(xhr.response);

        // 处理数据，例如显示在页面上
        document.getElementById('user_name').innerHTML = data.name;
      } else {
        // 请求失败，处理错误
        console.error('请求失败：', xhr.status);
      }
    };

    // 发送请求
    xhr.send();
  }
</script>