什么是AJAX以及它是如何工作的？
可能重复：
AJAX如何工作？
注意 ：这是一个社区维基post
我经常听说AJAX用于为用户提供动态内容。 它是什么以及它是如何工作的？
AJAX，或（A）同步（J）avascript（A）nd（X）ML（有趣的是，这些天有趣地使用JSON），是一个Javascript使用浏览器对象与远程服务器通信的系统。 这种情况的一般用例是能够更新客户端的界面而无需转到另一个页面。 在我们开始之前，请注意几句。
- 建议不要将Ajax用于登录身份validation和发布表单
- 用户可以关闭Javascript，或者由于IT策略而限制运行Javascript
- 考虑到这一点，建议您不要将AJAX用作关键用户function的唯一解决方案！ 总是有一个后备！
注意 ：这个社区wikipost使用JQuery来显示示例AJAX调用。 它建议新手使用，因为它隐藏了进行AJAX调用的浏览器兼容性问题。 有关JQuery的更多信息，请查看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调用的本质
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();
现在进行同步通话：
// 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();
警告 ：同步调用会使浏览器在浏览器完成调用之前无法执行任何操作。 这可能会锁定浏览器！ 如果您真的知道自己在做什么，请使用此function！ 99％的时间你想要异步AJAX调用。
注意 ：同步调用并不意味着您可以放弃不设置回调处理程序。 您仍然必须使用回调来处理结果。
客户端 – >服务器通信路径
此图像说明了如何使用AJAX与远程服务器进行通信。 首先，AJAX代码与浏览器对象接口，后者实际调用服务器。 然后，服务器处理请求并将结果发送回浏览器，然后浏览器查看调用结果以确定是否需要调用成功处理程序或error handling程序。 但是，有一个问题可以完全阻止通信，这通常被称为相同的原始策略。
注意从服务器的角度来看，AJAX调用看起来好像客户端已手动发出请求。 这意味着服务器可以利用会话和其他客户特定数据之类的东西。
同源政策
相同的原始政策基本上意味着如果您的AJAX呼叫来自http://www.mysite.com上托管的页面，则无法拨打http://www.othersite.com如下图所示：
您可以通过代理服务解决此问题。 这是您与同一服务器上的脚本交互的地方，该脚本又通过CURL调用与您希望的站点连接。 以下说明了此代理方法：
警告请注意，第三方服务器不会将请求视为来自客户端，而是来自服务器。 有些服务器对同一个IP不满，因此对服务器进行了多次调用。 这可能会阻止您，因此请使用此设置validation相关网站是否正常。
注意 ：在某些情况下，相同的原始政策不适用，例如Google Chrome扩展程序调用（您必须为每个站点设置权限），某些Greasemonkey调用和Adobe Air。
现在，最后的概念是服务器如何返回数据以供客户端进行交互。
AJAX数据返回
由于它是一个非常受欢迎的选项，我们将使用JSON或（J）ava（S）cript（O）bject（N）orotation来传回数据。 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!'); } });
请注意访问返回值的容易程度。 另一个流行的选择是从服务器检索HTML并将其注入
或其他元素。 这是一个例子：
$.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
在成功返回的情况下，
的内容将填充返回HTML。
TODO ：处理恶意HTML注入的安全性？
结论
关于AJAX的社区wikipost到此结束。 我希望它能帮助您理解AJAX，或者作为回答常见问题的简单方法。