ajax的两种提交方式(get/post)和两种版本

让我给您讲一下关于"ajax的两种提交方式(get/post)和两种版本"的完整攻略。

ajax的两种提交方式

在使用ajax进行数据请求的时候，我们可以使用两种提交方式：GET和POST。

GET方式

• 优点：比较简单明了，url中直接可以看到请求参数。请求的是缓存数据时，请求速度较快。
• 缺点：传参长度有限制，不适合传输大块数据。因为参数卸载url后，传输的数据是明文，所以参数不适合敏感数据。有可能被别人截取url获取敏感数据。

示例代码：

$.ajax({
    type: "GET",
    url: "demo.php",
    data: { name: "test", age: 20 },
    success: function (data) {
        console.log(data);
    }
});

POST方式

• 优点：没有大小限制，适合传输大块数据，保证安全。请求的数据不会显示在url中。而且更加安全，因为数据是通过HTTP包来传输的，即使请求敏感数据，也无法通过url来拦截。
• 缺点：相比较GET请求，POST的请求速度较慢。

示例代码：

$.ajax({
    type: "POST",
    url: "demo.php",
    data: { name: "test", age: 20 },
    success: function (data) {
        console.log(data);
    }
});

ajax的两种版本

• XMLHttpRequest: 这是一个基于JavaScript API的web浏览器对象，用于异步发送HTTP请求。它是ajax的最初版本。虽然它已经有点古老，但它仍然详尽地展示了ajax请求是如何工作的。为了向前兼容性，许多Web开发人员仍在使用它。

示例代码：

var xhr = new XMLHttpRequest();
xhr.open("GET", "demo.php", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

• Fetch API: 这是一个基于Promise的API，具有更加简单的语法，自动检测JSON，并且对CORS处理更加友好，允许由浏览器和服务器共同查看和添加请求头。

示例代码：

fetch("demo.php")
  .then(response => {
      if (!response.ok) {
          throw new Error("Network response was not ok");
      }
      return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log("Error", error));

以上就是关于“ajax的两种提交方式(get/post)和两种版本”完整攻略的讲解。希望可以对您有所帮助。