#16: Ajax 简介

Ajax 是使用 jQuery 的最大原因之一。jQuery 不仅修复了跨浏览器问题，还使语法非常易于使用和理解。

在这个视频中，我们尝试解释什么是 Ajax。我们查看了一个表单元素，当它提交时，会执行一个 GET 或 POST 请求（由 method 属性决定），请求的 URL 由 action 属性决定。这只是 HTML，没有任何后端代码或 JavaScript 在那里发生。但该提交将导致页面更改，实际上是重新加载到新的 URL，就像点击链接一样。

Ajax 允许我们在后台执行 GET 或 POST 请求，而无需重新加载页面。从本质上讲，这就是 Ajax 的全部意义所在。它非常强大。它在很大程度上是现代网站工作并具有其感觉的原因。

Ajax 曾经代表“异步 JavaScript 和 XML”，但现在基本上被忽略了，因为它不再有太大意义。这也是它现在不使用大写字母的原因。你可能还会看到“XHR”，它是 XMLHttpRequest 的缩写，这是 Ajax 的核心技术。

GET 和 POST 之间的区别本质上是：GET 用于获取信息，不应负责更改数据，而 POST 特别用于更改数据。你可以阅读更多关于 这个 StackOverflow 线程 的内容。

在 jQuery 中执行 GET 请求非常容易

$.get(
  "URL", 
  function(data) {
    // do something with data
  });
});

URL 是你希望从那里获取数据的地址。第二个参数是 Ajax 请求成功后运行的回调函数。其中最重要的参数是第一个参数 data，它包含了从请求中获取的信息。

Ajax 请求有时会失败。失败的原因之一可能是浏览器本身及其安全策略。浏览器本身内置了关于可以从哪里请求内容的规则。请求始终可以发送到与请求来源相同的域。但如果涉及不同的域，则该不同的域需要明确允许它。

你可以在 enable-cors.org 上阅读所有相关内容。CORS 代表“跨域资源共享”。我们查看了一个 CORS 未启用并且 Ajax 请求失败的示例。一种标准且简单的方法来解决这个问题（假设服务器是 Apache），是在 .htaccess 文件 中设置一个明确允许 CORS 的标头。

Header set Access-Control-Allow-Origin "*"

在视频中，我们只是将 Ajax 请求移到了 CodePen，CodePen 默认情况下很好地处理 Ajax。

简单易用

查看 Chris Coyier (@chriscoyier) 在 CodePen 上创建的 fBInl。