AJAX 是如何工作的? [英] How does AJAX work?

问题描述

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

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

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

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

解决方案

如果您完全不熟悉 AJAX(代表异步 Javascript 和 XML)，、原型、YUI 等以AJAXify"您的应用程序的客户端.此类库旨在隐藏 JavaScript 开发的复杂性(例如跨浏览器兼容性)，但对于简单的功能来说可能有点过分.

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

What is the essence of AJAX? For example, I want to have a link on my page such that when a user clicks this link, some information is sent to my server without the reloading of the current page. Is that AJAX?

I was able to get this behavior by using isoframes. In more details I put a link (let's say a small image) in a small isoframe. When the user clicks this link the browser reloads only the page in the isoframe.

However, I think it is not an elegant way to reach the goal. I think I have to use AJAX. How does it work? Can a usage of XHTML solve the considered problem in an elegant way? Or do I need to use JavaScripts?

I do not need much. I just want to have a small link which (after clicking) sent some information to server. Let say I have a "star-image" near a message. If a user click the star (he/she likes the message) star changes the color and my server update database (to remember that user likes the message).

解决方案

If you are totally new to AJAX (which stands for Asynchronous Javascript And XML), the AJAX entry on wikipedia is a good starting point:

Like DHTML and LAMP, AJAX is not a technology in itself, but a group of technologies. AJAX uses a combination of:

• HTML and CSS for marking up and styling information.
• The DOM accessed with JavaScript to dynamically display and interact with the information presented.
• A method for exchanging data asynchronously between browser and server, thereby avoiding page reloads. The XMLHttpRequest (XHR) object is usually used, but sometimes an IFrame object or a dynamically added tag is used instead.
• A format for the data sent to the browser. Common formats include XML, pre-formatted HTML, plain text, and JavaScript Object Notation (JSON). This data could be created dynamically by some form of server-side scripting.

As you can see, from a pure technological point of view, there is nothing really new here. Most of AJAX parts were already there in 1994 (1999 for the XMLHttpRequest object). The real novelty was to use these parts together as Google did with GMail (2004) and Google Maps (2005). Actually, both sites contributed heavily to the promotion of AJAX.

A picture being worth a thousand words, below a diagram that illustrates the communication between the client and the remote server, as well as the differences between the classic and the AJAX-powered applications:

For the orange part, you can do everything by hand (with the XMLHttpRequest object) or you can use famous JavaScript libraries like jQuery, Prototype, YUI, etc to "AJAXify" the client-side of your application. Such libraries aim to hide the complexity of JavaScript development (e.g. the cross-browser compatibility), but might be overkill for a simple feature.

On the server-side, some frameworks can help too (e.g. DWR or RAJAX if you are using Java), but all you need to do is basically to expose a service that returns only the required informations to partially update the page (initially as XML/XHTML - the X in AJAX - but JSON is often preferred nowadays).

这篇关于AJAX 是如何工作的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！