ajax有不同的风格吗？答案

【问题标题】：Are there different styles of ajax?ajax有不同的风格吗？
【发布时间】：2020-04-23 11:50:25
【问题描述】：

我对使用 ajax 有点陌生，但我在很大程度上取得了成功。我的大多数 ajax 调用看起来与此非常相似：

function saveQueryProf(){    
    var currentDate = new Date();
    var date=currentDate.getDate()+'/'+(currentDate.getMonth()+1)+'/'+currentDate.getFullYear();

            $.ajax({
            type: "POST",
            url: "API.php",
            data: { method: "createQueryProfile",
                    prof_name: $('#nameTxt').val(), 
                    prof_SQL: $('#sqlTxt').val(),
                    date: date

                  },
            datatype: "json"

        }).done(function(returnresult) {
        })
}

使用 $.ajax({ 方法。但是，每当我看到有人在 youtube 或其他网站上使用“ajax”时，他们的代码看起来更像这样：

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

我意识到它们在做不同的事情，但是这两个有什么区别？当我在网上寻找答案时，如何才能找到更符合第一种风格的答案？

【问题讨论】：

这能回答你的问题吗？ What is the difference between XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get
XMLHttpRequest 是旧的原生函数来检索数据（由微软创建并被其他浏览器采用）。现代原生函数是fetch，它非常易于使用，您不需要 jQuerys $.ajax。
那么在现代浏览器中有fetch，还有一些其他库（例如axios）比jquery做得更好
顺便说一下，AJAX是A同步JavaScript and的缩写XML，并且由于您使用的是 JSON 而不是 XML，因此您在技术上使用的是 AJAJ = A同步 JavaScript and JSON.
@some 我不知道这一点。有没有理由使用 AJAX 而不是 AJAJ？如果可以，你能给我一个简单的例子吗？

标签： javascript json ajax

【解决方案1】：

我看到问题已经回答了，但我认为可以添加更多信息。

在您的第一个示例中，您使用的是 jQuery（$.ajax 调用）。您需要将此库添加到您的网站才能使其正常工作。最简单的方法是将带有 jQuery CND 的标签添加到您的网站。

第二个例子是使用原生 JavaScript，XMLHttpRequest。它有更复杂的语法（大写和小写字符的奇怪混合），但您不需要向站点添加任何内容。它会完成这项工作，一旦你习惯了它的语法，它可能就是你所需要的。

我用于 AJAX 请求的第三个选项是 fetch() 方法。像 XMLHttpRequest 一样，它是内置在 JavaScript 语言中的。 fetch() 的语法非常简单，并且可以轻松使用 Promise。如果您将发出不会立即返回数据的请求，您可能需要承诺。以下是有关 fetch 的更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

我用于 AJAX 的第四个选项是 Axios 库。如果你只为 AJAX 请求包含 jQuery，Axios 可能是更好的选择。更多关于 Axios 的阅读：https://github.com/axios/axios

如果您想深入了解fetch() 和XMLHttpRequest 之间的差异和优缺点，请查看此线程： Fetch API vs XMLHttpRequest

【讨论】：

【解决方案2】：

Ajax 是 JQuery 中为工厂类 XmlHttpRequest 定义的扩展方法。

【讨论】：

【解决方案3】：

第一个示例使用$.ajax()，特定于jQuery。它比内置的 Javascript API XMLHttpRequest 简单得多。 XMLHttpRequest 不需要使用任何外部库，尽管它更难。 $.ajax() 依赖于 XMLHttpRequest。

【讨论】：

天哪，我怎么不知道。我认为您必须包含 JQuery 库才能使用 ajax。谢谢。
没问题！我很乐意提供帮助！

【解决方案4】：

您的代码需要 jQuery 库才能工作（这就是 $ 和 $.ajax 的来源）。他们的代码直接使用XMLHttpRequest，它内置在 JavaScript 中，因此不需要任何库。如果您希望您的 AJAX 代码依赖于 jQuery，那么只需将其作为搜索词。

【讨论】：

天哪，我怎么不知道。我认为您必须包含 JQuery 库才能使用 ajax。谢谢。