HTML5 必需属性不适用于 AJAX 提交

Ajax

# 使用HTML5时Ajax提交中的必需属性

在使用HTML5进行Ajax提交时，我们通常会使用XMLHttpRequest对象或Fetch API来异步发送HTTP请求。HTML5引入了一些新的属性，以便更轻松地处理表单数据和其他类型的数据传输。然而，有一些HTML5的必需属性并不适用于所有Ajax提交的情境，这在一些特定的场景下可能会导致一些问题。

## HTML5中常用的Ajax提交方式

在深入讨论HTML5中不适用的属性之前，让我们首先回顾一下在HTML5中常用的两种Ajax提交方式：XMLHttpRequest和Fetch API。

1. 使用XMLHttpRequest

html
<script>
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/api", true);
  xhr.setRequestHeader("Content-Type", "application/JSon");
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 处理返回的数据
      console.log(xhr.responseText);
    }
  };
  // 准备发送的数据
  var data = {
    key1: "value1",
    key2: "value2",
  };
  // 转换为JSON字符串并发送
  xhr.send(JSON.stringify(data));
</script>

2. 使用Fetch API

html
<script>
  // 准备发送的数据
  var data = {
    key1: "value1",
    key2: "value2",
  };
  fetch("https://example.com/api", {
    method: "POST",
    headers: {
      "Content-Type": "application/JSon",
    },
    body: JSON.stringify(data),
  })
    .then(function (response) {
      return response.JSon();
    })
    .then(function (data) {
      // 处理返回的数据
      console.log(data);
    });
</script>

## 不适用于Ajax的HTML5必需属性

尽管HTML5引入了一些有用的属性，但其中一些并不适用于所有Ajax提交的场景。具体来说，以下两个属性在Ajax中并没有明显的作用：

1. form 元素的 required 属性

required 属性通常用于标记表单元素是否为必填项。然而，在Ajax提交中，并不会像传统的表单提交那样触发HTML5的表单验证机制，因此 required 属性并不会影响到通过Ajax提交的数据。

2. form 元素的 novalidate 属性

novalidate 属性用于禁用表单的默认验证行为，允许开发者使用自定义的验证逻辑。然而，同样地，当使用Ajax提交时，novalidate 属性也不会影响到数据的传输，因为Ajax提交不依赖于HTML5表单验证。

##

在使用HTML5进行Ajax提交时，开发者应当注意到一些HTML5的必需属性在这个上下文中并不起作用。虽然 required 和 novalidate 对于传统的表单提交非常有用，但在Ajax提交中，我们需要依赖其他方式来进行数据验证和处理。

通过了解HTML5在不同场景下的使用特性，我们能够更好地选择适当的工具和方法来处理异步请求，确保我们的应用程序在各种情况下都能够正常运行。