AJAX如何工作?


87

AJAX的本质是什么?例如,我希望页面上有一个链接,以便当用户单击此链接时,某些信息被发送到我的服务器,而无需重新加载当前页面。那是AJAX吗?

我能够通过使用等帧线获得此行为。在更多细节中,我将链接(假设是小图像)放在一个小的等帧图中。当用户单击此链接时,浏览器仅重新加载等帧中的页面。

但是,我认为这不是达到目标的绝妙方法。我想我必须使用AJAX。它是如何工作的?使用XHTML能否以一种优雅的方式解决所考虑的问题?还是我需要使用JavaScript?

我不需要太多。我只想有一个小链接,该链接(单击后)将一些信息发送到服务器。假设我在邮件旁边有一个“星状图片”。如果用户单击星标(他/她喜欢该消息),星标将更改颜色,并且我的服务器将更新数据库(请记住该用户喜欢该消息)。


8
到Wikipedia的强制链接:en.wikipedia.org/wiki/Ajax_(编程)
Jon B

答案,请访问链接:w3schools.com/php/php_ajax_intro.asp

Answers:


121

如果您完全不熟悉AJAX(代表异步Java语言和XML),那么维基百科上的AJAX条目就是一个不错的起点:

像DHTML和LAMP一样,AJAX本身并不是一项技术,而是一组技术。AJAX使用以下组合:

  • HTML和CSS,用于标记和样式化信息。
  • 使用JavaScript访问的DOM可动态显示和与呈现的信息进行交互。
  • 一种在浏览器和服务器之间异步交换数据,从而避免页面重新加载的方法。通常使用XMLHttpRequest(XHR)对象,但有时使用IFrame对象或动态添加的标签代替。
  • 发送到浏览器的数据格式。常见格式包括XML,预格式化的HTML,纯文本和JavaScript对象表示法(JSON)。可以通过某种形式的服务器端脚本动态创建此数据。

如您所见,从纯技术角度看,这里没有什么新鲜的东西。1994年,大多数AJAX部件已经存在(1999年为XMLHttpRequest对象)。真正的新颖之处在于将这些部分一起使用就像Google在GMail(2004)和Google Maps(2005)中所做的那样。实际上,这两个站点都为AJAX的推广做出了巨大贡献。

一幅价值一千个字的图片,在说明客户端和远程服务器之间的通信的图表下,以及传统版本和AJAX驱动的应用程序之间的区别:

替代文字

对于橙色部分,您可以手动执行所有操作(使用XMLHttpRequest对象),也可以使用著名的JavaScript库(如jQueryPrototypeYUI等)来“ AJAXify”应用程序的客户端。这样的库旨在隐藏JavaScript开发的复杂性(例如,跨浏览器的兼容性),但对于简单的功能而言可能会显得过时。

在服务器端,某些框架也可以提供帮助(例如,如果使用Java,则为DWRRAJAX),但是您所需要做的基本上是公开仅返回所需信息以部分更新页面的服务(最初是XML) / XHTML-AJAX中的X-但如今,JSON通常是首选。


17

AJAX的本质是这样的:

用户执行其他操作时,您的页面可以浏览Web并更新自己的内容

也就是说,您的JavaScript可以发送异步GET和POST请求(通常通过一个XMLHttpRequest对象),然后使用这些请求的结果来修改其页面(通过文档对象模型操作)。


您能想到的任何示例都可以让我看到这种“自行更新”的实际效果吗?
Daniel Springer

17

AJAX通常涉及从客户端向服务器发送HTTP请求并处理服务器的响应,而无需重新加载整个页面。(异步)。

Javascript通常会进行提交并从服务器接收数据响应(传统上是XML,通常是其他一些不太冗长的格式,例如JSON)

然后,Javascript可以动态更新页面DOM,以更新用户的视图。

因此就是“异步Java语言和XML”。

还有其他一些选项可以更新用户的视图而无需重新加载页面,例如Flash和Applet,但是这些听起来并不适合您的情况。听起来像Java语言是要走的路。周围有很多不错的库支持,例如本站点上使用的jQuery,因此您实际上不需要自己编写很多Javascript。


我喜欢这个答案。@Verrtex您只需要了解XMLHttpRequest。
enguerran

13

Ajax不仅仅是重新加载页面的一部分。Ajax代表异步Javascript和Xml。

您唯一需要的Ajax部分是XMLHttpRequestjavascript中对象。您必须使用它来将html的一小部分作为div或任何其他标签加载和重新加载。

阅读该示例,您将如您所愿,早日成为专家!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

1
尽管名称AJAX不需要XML,但单词/缩写AJAX中的X代表XML,因为从历史上看,它是服务器与客户端之间进行通信的方式。
enguerran

5

AJAX代表异步Javascript和XML。AJAX支持页面的部分更新,而不必将整个页面发布回服务器。

AJAX有很多选择。微软最著名的两个(可以说是)是ASP.NET AJAX(以前称为Atlas)和jQuery。

如果您已经熟悉ASP.NET,则ASP.NET AJAX的设置相对容易。如果您已经知道javascript,那么jQuery就是很好的选择,并且可以非常精细地控制页面的查询和更新。

高温超导


2

如果您有兴趣,IBM会提供有关Ajax的10个(可能更多)的系列文章:掌握Ajax的第1部分

尽管已经有好几年的历史了,但它还是一个不错的介绍(即使您只是阅读了第一部分!)

我认为整个系列都应在此处列出,尽管目前该网站对我来说有点慢...

概要:

由HTML,JavaScript™技术,DHTML和DOM组成的Ajax是一种出色的方法,可以帮助您将笨拙的Web界面转换为交互式Ajax应用程序。作为一名Ajax专家,作者演示了这些技术如何协同工作-从概述到详细外观-使极其高效的Web开发成为现实。他还揭示了Ajax的中心概念,包括XMLHttpRequest对象。


1

那是ajax。没有JavaScript,就无法使用Ajax。您应该查看jquery和原型示例以了解用法。


根据某些资料,您可以使用VBScript进行AJAX。不过,没有充分的理由这样做。:-)
Nosredna

不,你不能。您可以使用VBScript进行AVAX。
Stefan Kendall

6
嘿。我听说AJAX是异步JavaScript和XML。除了不必是异步的,它不必是JavaScript,也不必是XML。
Nosredna

0

从技术上讲,您要尝试的是ajax。Ajax创建xhtml片段事务来更新页面的各个部分。Javascript使这些获取请求变得简洁明了。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.