AJAX 是如何工作的?

IT技术 javascript ajax
2021-02-07 04:16:23

AJAX的本质是什么?例如,我想在我的页面上有一个链接,这样当用户单击此链接时,一些信息会发送到我的服务器,而无需重新加载当前页面。是 AJAX 吗?

我能够通过使用 isoframes 来获得这种行为。更详细地说,我在一个小的 isoframe 中放了一个链接(假设是一个小图像)。当用户单击此链接时,浏览器仅重新加载 isoframe 中的页面。

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

我不需要太多。我只想有一个小链接(点击后)向服务器发送一些信息。假设我在一条消息附近有一个“明星形象”。如果用户单击星号(他/她喜欢该消息),星号会更改颜色并且我的服务器更新数据库(以记住该用户喜欢该消息)。

6个回答

如果您完全不熟悉 AJAX(代表 Asynchronous Javascript And XML),维基百科上AJAX条目是一个很好的起点:

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

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

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

一张图一千字,下面的图说明了客户端和远程服务器之间的通信,以及经典应用程序和 AJAX 驱动的应用程序之间的区别:

替代文字

对于橙色部分,您可以手动完成所有操作(使用XMLHttpRequest对象),或者您可以使用著名的 JavaScript 库(如jQueryPrototypeYUI等)来“AJAX 化”应用程序的客户端。这样的库旨在隐藏 JavaScript 开发的复杂性(例如跨浏览器兼容性),但对于简单的功能来说可能有点过头了。

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

AJAX的本质是这样的:

您的页面可以在用户做其他事情的同时浏览 Web 并更新它们自己的内容

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

您可以立即想到任何示例,我可以在其中看到这种“自行更新”的实际情况?
2021-03-12 04:16:23

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

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

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

因此,“异步 Javascript 和 XML”。

还有其他选项可以在不重新加载页面的情况下更新用户的视图,例如 Flash 和小程序,但这些听起来并不是适合您的情况的好解决方案。听起来像 Javascript 是要走的路。周围有大量良好的库支持,例如本站点上使用的jQuery,因此您实际上不需要自己编写很多 Javascript。

我喜欢这个答案。@Verrtex 您只需要了解 XMLHttpRequest。
2021-03-21 04:16:23

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

您需要的 Ajax 的唯一部分是来自 javascriptXMLHttpRequest对象。您必须使用它来加载和重新加载一小部分 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>
尽管名称 AJAX 不需要 XML,但 AJAX 一词/首字母缩略词中的 X 代表 XML,因为在历史上它是服务器和客户端之间进行通信的方式。
2021-03-14 04:16:23

AJAX 代表异步 Javascript 和 XML。AJAX 支持对页面进行部分更新,而无需将整个页面发送回服务器。

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

如果您已经熟悉 ASP.NET,则 ASP.NET AJAX 的设​​置相对容易。如果您已经了解 javascript,jQuery 会很好,它允许对页面的查询和更新进行非常精细的控制。

HTH