How does AJAX work?

Question

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

I managed to get this behavior using isoframs. In more detail, I put the link (albeit a small image) in a small isoframe. When the user clicks on this link, the browser reloads only the page in the isofrag.

However, I think this is not an elegant way to achieve the goal. I think I need to use AJAX. How it works? Can using XHTML solve this problem in an elegant way? Or do I need to use JavaScripts?

I don’t need much. I just want to have a small link that (after clicking) sent some information to the server. Say I have a "star image" next to a post. If the user clicks on a star (he likes the message), the star changes the color and database of the server updates (to remember that the user likes the message).

Answer 1

If you are completely new to AJAX (which stands for Asynchronous Javascript and XML), writing AJAX on Wikipedia is a good start 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 markup and style information.
• DOM access using JavaScript to dynamically display and interact with the information provided.
• A method for exchanging data asynchronously between the browser and server, thereby avoiding page reloads. An XMLHttpRequest (XHR) object is commonly used, but sometimes an IFrame or dynamically added tag is used instead.
• Data format sent to browser. Common formats including XML, pre-formatted HTML, plain text and JavaScript object notation (JSON). This data can be created dynamically in one form or another server-side scripts.

As you can see, from a purely technological point of view, there is nothing new. Most parts of AJAX were already there in 1994 (1999 for the XMLHttpRequest object). The real novelty was to use these parts together, like Google with GMail (2004) and Google Maps (2005). In fact, both sites have contributed a lot to AJAX promotion.

The image, which is worth a thousand words, is below a diagram that illustrates the relationship between the client and the remote server, as well as the differences between classic and AJAX-enabled applications:

For the orange part, you can do everything manually (using the XMLHttpRequest object), or you can use well-known JavaScript libraries such as jQuery , Prototype , YUI , etc. on the "AJAXify" client side of your application. Such libraries tend to hide the complexity of JavaScript development (for example, cross-browser compatibility), but may be redundant for a simple function.

On the server side, some frameworks (e.g. DWR or RAJAX if you use Java) can help, but all you have to do is basically open a service that returns only the information you need to partially refresh the page (first as XML / XHTML - X in AJAX - but JSON is often preferable these days).

Answer 2

AJAX typically involves sending HTTP requests from a client to a server and processing the server response without reloading the entire page. (Asynchronously).

Javascript usually sends and receives a response from the server (traditionally XML, often other less verbose formats such as JSON)

Javascript can then dynamically refresh the DOM page to refresh the user's view.

Thus, Asynchronous Javascript and XML.

There are other options for updating the custom view without reloading the page, such as Flash and Applets, but this does not seem like a good solution for your business. Javascript seems to be the way to go. There is a lot of good support for the library, for example jQuery , as it is used on this site, so you do not need to write a lot of Javascript yourself.

Answer 3

The essence of AJAX is as follows:

Your pages can browse the web and update their own content while the user does other things.

That way, your javascript can send asynchronous GET and POST requests (usually through an XMLHttpRequest object), and then use the results of these requests to change its page (by manipulating the object model ).

Answer 4

Ajax is more than reloading only part of a page. Ajax stands for Asynchronous Javascript and Xml.

The only part of Ajax that you need is the XMLHttpRequest object from javascript. You should use it to load and reload a small part of your html as a div or any other tags.

Read that example , and you'll be sooner than you think!

 <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> 

Answer 5

AJAX stands for Asynchronous Javascript and XML. AJAX supports partial page refresh without having to send the entire page back to the server.

There are many options for AJAX. The two most notable (possibly) are Microsoft ASP.NET AJAX (formerly Atlas) and jQuery.

ASP.NET AJAX is relatively easy to configure if you are already familiar with ASP.NET. jQuery is good if you already know javascript and very carefully control the request and updating of your page.

NTN

Answer 6

If you're interested, IBM has 10 (maybe more) Ajax TV shows: Mastering Ajax part 1

Although a few years ago this is a good introduction, (even if you just read the first part!)

I think the whole series should be listed here , although the site is a bit slow for me at the moment ...

Summary:

Ajax, which consists of HTML, JavaScript ™ technology, DHTML, and the DOM, is an outstanding approach that helps transform awkward web interfaces into interactive Ajax applications. The author, an Ajax expert, demonstrates how these technologies work together - from a review to a detailed look - to make extremely effective web development an easy reality. It also reveals the central concepts of Ajax, including the XMLHttpRequest object.

Answer 7

this is ajax. you cannot use ajax without javascript. you should look at jquery and prototype examples to get an idea of ​​usage.

Answer 8

What you are trying to do is technically ajax. Ajax creates xhtml fragment transactions to update page sections. Javascript makes these requests nice and tidy.