【问题标题】:How does AJAX work?AJAX 是如何工作的?
【发布时间】:2010-12-03 08:37:44
【问题描述】:

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

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

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

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

【问题讨论】:

标签: javascript ajax


【解决方案1】:

那是ajax。你不能在没有 javascript 的情况下使用 ajax。您应该查看 jquery 和原型示例以了解用法。

【讨论】:

  • 根据一些消息来源,您可以使用 VBScript 进行 AJAX。不过,没有充分的理由这样做。 :-)
  • 不,你不能。你可以用 VBScript 做 AVAX。
  • 嘿。我听说 AJAX 是异步 JavaScript 和 XML。除了它不必是异步的,它不必是 JavaScript,也不必是 XML。
【解决方案2】:

您正在尝试做的是技术上的 ajax。 Ajax 创建 xhtml 片段事务来更新页面的各个部分。 Javascript 使这些 get 请求变得漂亮而整洁。

【讨论】:

    【解决方案3】:

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

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

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

    HTH

    【讨论】:

      【解决方案4】:

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

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

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

      因此是“异步 Javascript 和 XML”。

      还有其他选项可以在不重新加载页面的情况下更新用户的视图,例如 Flash 和 Applet,但对于您的情况,这些听起来不是很好的解决方案。听起来Javascript是要走的路。周围有很多很好的库支持,比如这个网站上使用的jQuery,所以你不需要自己写太多的Javascript。

      【讨论】:

      • 我喜欢这个答案。 @Verrtex 您只需要了解 XMLHttpRequest。
      【解决方案5】:

      AJAX的本质是这样的:

      您的网页可以浏览网页并更新自己的内容,同时 用户正在做其他事情

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

      【讨论】:

      • 任何你能想到的例子,我可以看到这种“自行更新”的实际效果?
      【解决方案6】:

      Ajax 不仅仅是重新加载页面的一部分。 Ajax 代表 Asynchronous Javascript And Xml。

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

      阅读example,你会如你所想的那样更快地成为专业人士!

      <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,因为历史上它是服务器和客户端之间通信的方式。
      【解决方案7】:

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

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

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

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

      一张价值千言万语的图片,下面的图表说明了客户端和远程服务器之间的通信,以及经典应用程序和基于 AJAX 的应用程序之间的区别:

      对于橙色部分,您可以手动完成所有操作(使用 XMLHttpRequest 对象),或者您可以使用著名的 JavaScript 库,如 jQueryPrototypeYUI 等来“AJAXify”客户端 -应用程序的一侧。此类库旨在隐藏 JavaScript 开发的复杂性(例如跨浏览器兼容性),但对于一个简单的功能来说可能是多余的。

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

      【讨论】:

        【解决方案8】:

        如果您有兴趣,IBM 有一个关于 Ajax 的 10 个(可能更多)部分系列:Mastering Ajax part 1

        虽然现在已经有几年了,但它是一个很好的介绍,(即使你只是读了第一部分!)

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

        总结:

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2012-01-22
          • 2011-11-07
          • 1970-01-01
          • 2011-08-25
          • 1970-01-01
          • 2012-02-05
          • 1970-01-01
          相关资源
          最近更新 更多