最新的Web开发教程
 

AJAX介绍


AJAX是开发者的梦想,因为你可以:

  • 更新网页无需重新加载页面
  • 从服务器请求数据 - 在页面加载后,
  • 从服务器接收数据 - 在页面加载后,
  • 将数据发送到服务器 - 在后台

试一试在每章的例子

在每章的,您可以在线编辑的例子,并点击一个按钮来查看结果。

AJAX实例

Let AJAX change this text

试一试»


AJAX例子解释:

HTML页

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

HTML页面包含一个<div>部分和<button>

<div>部分是用来显示来自服务器的信息。

<button>调用一个函数(如果点击它)。

的功能从Web服务器请求数据,并将其显示:

功能loadDoc()

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();
}

你应该已经知道

继续之前,你应该具备以下有基本的了解:

  • HTML
  • JavaScript的

如果你想先学习这些内容,请看我们的教程主页


什么是AJAX

AJAX =异步JavaScript和XML。

AJAX是一种误导名称。 AJAX应用程序可能使用XML传输数据,但同样常见的数据传输为纯文本或JSON文本。

AJAX是用于创建快速,动态网页的技术。

AJAX允许网页通过交换少量数据与后台服务器异步更新。 这意味着,有可能更新网页的部分,而不刷新整个页面。

经典网页,(不使用AJAX)必须重新加载整个页面如果内容应该改变。

谷歌地图,Gmail,YouTube上,和Facebook:使用AJAX应用的例子。


如何Ajax的工作原理

AJAX


AJAX是基于Internet标准

AJAX是基于Internet标准,并且使用的组合:

  • XMLHttpRequest对象(检索从Web服务器的数据)
  • JavaScript/DOM (显示/使用数据)

XMLHttpRequest是一个误导性的名字。 你不必了解XML使用AJAX。


谷歌建议

AJAX是由谷歌做流行的2005年,与谷歌建议。

谷歌建议使用AJAX来创建一个非常动态的Web界面:当你在谷歌的搜索框开始输入,一个JavaScript发送信件开了个服务器和服务器返回的建议列表。


开始使用AJAX今天

AJAX是基于现有的标准。 这些标准已被用于开发了数年。 请阅读我们的下一章,看看它是如何工作!