ajax有不同的风格吗？

Posted 2023-02-27

【中文标题】ajax有不同的风格吗？

【英文标题】：Are there different styles of 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？如果可以，你能给我一个简单的例子吗？

【参考方案1】：

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

在您的第一个示例中，您使用的是 jQuery（$.ajax 调用）。您需要将此库添加到您的网站才能使其正常工作。最简单的方法是将带有 jQ​​uery 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。谢谢。