javascript - 什么是AJAX，它如何工作？

Question

这个问题已经在这里有了答案:




9年前关闭。

Possible Duplicate:
How does AJAX work?

注意:这是一个社区Wiki帖子

我经常听说AJAX被用于为用户提供动态内容。它是什么以及它如何工作？

Answer 1

AJAX或(A)同步(J)脚本(A)nd(X)ML(近来有趣的是，它们倾向于更多地使用JSON)是一种Javascript在其中使用浏览器对象与远程服务器进行通信的系统。这种情况的一般用例是能够更新客户端的界面而无需转到另一个页面。在开始之前，请注意几句话。

不建议将

Ajax用于登录身份验证和发布表单

用户可以关闭Javascript，或者由于IT策略而受限制运行Javascript

考虑到这一点，建议您不要将AJAX用作关键用户功能的唯一解决方案!总是有一个后备!

注意:此社区Wiki帖子使用JQuery来显示示例AJAX调用。建议新手使用，因为它隐藏了进行AJAX调用的浏览器兼容性问题。请检查JQuery website以获取有关JQuery的更多信息。

注意:示例使用与PHP服务器的通信，但是任何服务器端语言都可以使用。

AJAX回调

首先，我们有一个AJAX调用。在AJAX调用中，您可以为可能发生的不同类型的事件设置回调处理程序。常见的误解可以显示在以下代码中:

// Incorrect!
function makeAjaxCall() {
  var result = $.ajax({
    url: 'ajax/test.html'
  });

  return result;
}

这里的问题是，当浏览器发出AJAX请求时，它可能返回成功，也可能失败。例如，如果您尝试访问一个不存在的页面，或者服务器出现内部错误。为了使事情尽可能井井有条，AJAX要求您创建回调函数来处理数据请求。正确的方法如下:

// Correct!
function makeAjaxCall() {
  $.ajax({
    url: 'ajax/test.html',
    success: function(data) {
      alert('Horray the AJAX call succeeded!');
    },
    error: function(xhr, error) {
      alert('Holy errors batman!');
    }
  });
}

AJAX call 的性质

AJAX调用可以是异步的也可以是同步的。异步意味着浏览器将发出AJAX请求并继续执行其他操作。同步意味着浏览器将停止正在执行的操作，直到AJAX调用完成。这是两个代码方面的差异的示例:

// An asynchronous call
// This is the default
$.ajax({
  url: '/server.php',
  success: function(data) {
    alert('Horray the AJAX call succeeded!');
  },
  error: function(xhr, error) {
    alert('Holy errors batman!');
  }
});
// This will get called right away
myFunction();

现在进行同步 call :

// A synchronous call
$.ajax({
  url: '/server.php',
  async: false, // set the property here
  success: function(data) {
    alert('Horray the AJAX call succeeded!');
  },
  error: function(xhr, error) {
    alert('Holy errors batman!');
  }
});
// This won't get called until the AJAX returns!
myFunction();

警告:进行同步调用，因此浏览器在完成 call 之前无法执行任何操作。这可能会锁定浏览器!仅当您确实知道自己在做什么时才使用此功能!您有99％的时间想要异步AJAX调用。

注意:同步调用并不意味着您可以不设置回调处理程序。您仍然必须使用回调处理结果。

客户端->服务器通信路径

此图像说明了如何使用AJAX与远程服务器进行通信。首先，AJAX代码与浏览器对象连接，该对象实际调用服务器。然后，服务器处理该请求，并将结果发送回浏览器，然后浏览器将查看调用结果，以确定是否需要调用成功处理程序或错误处理程序。但是，存在一个根本无法阻止通信的问题，通常称为同一来源策略。

注意从服务器的 Angular 看，AJAX调用看起来就像客户端手动发出请求一样。这意味着服务器可以利用诸如 session 和其他客户端特定数据之类的东西。

同源政策

相同的原始策略基本上意味着，如果您的AJAX调用来自http://www.mysite.com上托管的页面，则无法调用http://www.othersite.com，如下所示:

解决这个问题的一种方法是通过代理服务。在这里，您可以与同一台服务器上的脚本进行交互，然后通过CURL调用与您希望的站点进行交互。下面说明了该代理方法:

警告请注意，第三方服务器不会将请求视为来自客户端，而是来自服务器。一些服务器皱着眉头使用相同的IP对其服务器进行许多 call 。这可能会导致您被屏蔽，因此请使用此设置验证相关站点是否正常。

注意:在某些情况下，不适用相同的原始策略，例如Google Chrome扩展调用(您必须为每个站点设置权限)，某些Greasemonkey调用和Adobe Air。

现在要讨论的最后一个概念是服务器如何返回数据以与客户端进行交互。

AJAX数据返回

由于这是一个非常受欢迎的选项，因此我们将使用JSON或(J)ava(S)cript(O)bject(N)otation来传递数据。 JSON基本上如下所示:

{
    color: "red",
    value: "#f00"
}

可以将该字符串转换为JavaScript对象，从而轻松访问服务器结果。

警告由于这是有效的JavaScript，因此许多人使用eval()快速创建js对象。 请不要这样做。如果结果中包含恶意代码，它将使您面临安全问题。始终使用JSON解析器来检查安全数据!

使用前面的示例，我们可以像这样访问不同的值:

$.ajax({
  url: '/server.php',
  // It's a good idea to explicitly declare the return type
  dataType: 'json',
  success: function(json) {
    alert("The color is: " + json.color + " and the value is: " + json.value);
  },
  error: function(xhr, error) {
    alert('Holy errors batman!');
  }
});

注意访问return的值有多么容易。另一个流行的选择是从服务器检索HTML并将其注入(inject)<div>或其他元素。这是一个例子:

$.ajax({
  url: '/server.php',
  // It's a good idea to explicitly declare the return type
  dataType: 'html',
  success: function(html) {
    $("#mydiv").html(html);
  },
  error: function(xhr, error) {
    alert('Holy errors batman!');
  }
});

// Some JS/HTML here

<div id="mydiv"></div>

在成功返回的情况下，<div>的内容将使用返回HTML填充。

TODO :处理防止恶意HTML注入(inject)的安全性吗？

结论

到此，AJAX上的社区Wiki帖子结束了。我希望它对帮助您理解AJAX或作为回答有关此问题的简便方法很有用。