By Michael John


2009-06-05 20:44:23 8 Comments

I have to start using AJAX in a project and I don't know where to start. Can someone please help?

22 comments

@Malith Gammanpila 2018-11-09 11:16:18

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.(FROM w3school). to understand simply: when we request for a link or submit form we request a synchronously to server for data. webpage destroy current page and regenerate new page. but with AJAX browser can send the same request without repainting the entire page.

@Akanksha patel 2017-11-07 05:54:11

AJAX (Asynchronous JavaScript and XML) is a newly coined term for two powerful browser features that have been around for years, but were overlooked by many web developers until recently when applications such as Gmail, Google Suggest, and Google Maps hit the streets. To know more information about Ajax learn Ajax tutorial

@Rui Craveiro 2009-06-09 20:12:41

It's a cleaning product.

It also stands for something very cool built with a very hateful programming language.

@Thomas Hansen 2009-06-09 22:30:51

I'll give it a try and say that "it's the concept of having a W3C based (JavaScript, HTML and CSS) solution for building Rich Applications for running on the web in a browser"

Everything else is just "technical details" I guess ... ;)

PS! - AMAZING question ...!! ;)

@mrTomahawk 2009-06-09 21:04:25

AJAX is really fancy term for giving the browser the ability to refresh parts of its content with the need to reload an entire page. Like many have said, it doesn't require XML, or even Javascript in order to implement it. In fact in its early days it was done with with VBScript and Jscript and just called DHTML. Jesse James Garrett may have invented the AJAX term, but it was really Microsoft that invented the concept behind it.

This source says Microsoft started it in 1999, but I would date the birth of this technology even further. This Wired article is probably more accurate on the date of this technology being in the late 90's, much of it coming from the old days of the MSDN DHTML Dude columns written by Michael Wallent at Microsoft which started back in 1997. Much of the story is also told in this great video here by Michael himself: http://channel9.msdn.com/posts/Charles/Michael-Wallent-Advent-and-Evolution-of-WPF/ Megan still works at Microsoft by the way working on the Silverlight team nowadays, Microsoft's replacement for ActiveX.

Back to the AJAX thingy...when Jesse James Garrett back in 2005 he was mostly talking about the use of XMLHTTPRequest within Javascript code, and a dash of salt. That later began a hip word that many people started using even though they had no idea what it was, and thought that is really something brand new and hip, when really it was just a remix of something old.....sort of like many hip-hop songs you hear nowadays.

It's not new, just a newer version of something old!

@Robert Greiner 2009-06-05 20:47:43

http://www.w3schools.com/Ajax/Default.Asp

that is a good place to start. This should answer all of your questions.

@hasen 2009-06-06 01:12:30

It's a buzzword, the essence of it is:

Using Javascript to make an asynchronous HTTP request (in the background).

When the content arrives, an action is taken, usually performing some logic then updating the appearance of the page by manipulating the DOM tree; meaning, inserting new HTML elements, deleting some html elements, etc.

The X in AJAX stands for XML, but it's irrelevant. XML is just one of many ways to format the data that's sent by the server. JSON is a much better alternative (IMNSHO). Also, the server can send plain text or just regular html.

The keyword here is asynchronous request. A request that happens in the background, without the browser having to reload the page.

@eKek0 2009-06-06 01:02:13

From the Pragmatic Ajax book:

What Is Ajax?

Ajax is a hard beast to distill into a one-liner. The reason it is so hard is because it has two sides to it:

  • Ajax can be viewed as a set of technologies.
  • Ajax can be viewed as an architecture.

Ajax: Asynchronous JavaScript and XML

The name Ajax came from the bundling of its enabling technologies: an asynchronous communication channel between the browser and server, JavaScript, and XML. When it was defined, it was envisioned as the following:

  • Standards-based presentation using XHTML and CSS
  • Dynamic display and interaction using the browser’s DocumentObject Model (DOM)
  • Data interchange and manipulation using XML and XSLT
  • Asynchronous data retrieval using XMLHttpRequest or XMLHTTP (from Microsoft)
  • JavaScript binding everything together

Although it is common to develop using these enabling technologies, it can quickly become more trouble than reward.

It is for these reasons that the more important definition for Ajax is...

Ajax: The Architecture

The exciting evolution that is Ajax is in how you architect web applications. Let’s look first at the conventional web architecture:

  1. Define a page for every event in the application: view items, purchase items, check out, and so on.
  2. Each event, or action, returns a full page back to the browser.
  3. That page is rendered to the user.

This seems natural to us now. It made sense at the beginning of the Web, as the Web wasn’t really about applications. The Web started off as more of a document repository; it was a world in which you could simply link between documents in an ad hoc way. It was about document and data sharing, not interactivity in any meaningful sense.

Picture a rich desktop application for a moment. Imagine what you would think if, on every click, all of the components on the application screen redrew from scratch. Seems a little nuts, doesn’t it? On the Web, that was the world we inhabited until Ajax came along.

Ajax is a new architecture. The important parts of this architecture are:

  • Small server-side events: Now components in a web application can make small requests back to a server, get some information, and tweak the page that is viewed by changing the DOM. No full page refresh.

  • Asynchronous: Requests posted back to the server don’t cause the browser to block. The user can continue to use other parts of the application, and the UI can be updated to alert the user that a request is taking place.

  • onAnything: We can interact with the server based on almost anything the user does. Modern browsers trap most of the same user events as the operating system: mouseovers, mouse clicks, keypresses, etc. Any user event can cause an asynchronous request.

This all sounds great, doesn’t it? With this change we have to be careful, though. One of the greatest things about the Web is that anybody can use it. Having simple semantics helps that happen. If we go overboard, we might begin surprising the users with new UI abstractions. This is a common complaint with Flash UIs, where users are confronted with new symbols, metaphors, and required actions to achieve useful results.

@SeanDowney 2009-06-06 00:23:15

Ajax is a bit of a misnomer. To quote the wiki article:

Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous.

Whereas now most people call "ajax" any type of

web application that communicates with a server in the background

@hasen 2009-06-06 08:27:42

I really think this is the proper answer. I wonder why no one voted it up.

@Kapil D 2009-06-05 23:33:46

Just to add.. may be not relevant for the question .. although, AJAX was made famous by Gmail in their browser emails ..the credit of AJAX goes to Microsoft .. they created the AJAX thing..

@SingleNegationElimination 2009-06-06 00:29:11

citation please

@Kapil D 2009-06-06 09:54:07

There are no citations but the XMLHttpRequest object was first used in IE in year 1998-2000. Here are few link digg.com/programming/Microsoft_Invented_AJAX... And, please don't start a discussion this.. its not the correct forum .. Thanks and Cheers.

@Nosredna 2009-06-07 19:11:52

True that Microsoft's browser innovation set the whole thing off, but I don't think that's the same as "inventing AJAX."

@Kapil D 2009-06-08 05:43:22

I agree guys .. its not invented... but, the XMLHttpRequest object was first created in Internet explorer.. which is a key part of Ajax communication ....

@RSolberg 2009-06-05 20:48:27

Not to be confused with the cleaner, AJAX, the technology term, is really describing a framework or better stated as a technique for using XML and JavaScript to make asynchronous calls to server side code...

Here are some good code samples. And some more.

While many of these samples above show how to create all of the XML Request objects, if you look into the AJAX Control Toolkit from Microsoft for ASP.NET applications or jQuery, you'll find these easier to work with.

jQuery Sample (from jQuery site):
when code is hit, the some.php file is hit passing the name and location values in.

    <script type="javascript">
        function saveDataAjax(){ 
        $.ajax({
           type: "POST",
           url: "some.php",
           data: "name=John&location=Boston",
           success: function(msg){
             alert( "Data Saved: " + msg );
           }
         });
       }
   </script>
   <input type="submit" onClick="saveDataAjax();" value="submit" />

@Shog9 2009-06-05 20:57:24

Pedantry: AJAX is not really a framework, although plenty of frameworks exist that incorporate AJAX techniques.

@RSolberg 2009-06-05 21:00:22

@Shog9: good point, but there is still some structure around it even if you code the entire request calls... What would you call it, I can't think of anything other than framework and should change it above...

@RSolberg 2009-06-05 21:02:29

@Shog9: how about technique?

@Shog9 2009-06-05 21:04:01

I'd call it a technique. Although a familiar structure is generally imposed by the XMLHttpRequest object and a strict interpretation of the original meaning for AJAX (XML data transfer), in practice the term covers a far broader collection of specific practices and technologies, including those implemented via iframes and all manner of data formats.

@RSolberg 2009-06-05 21:06:01

@Shog9: Thanks, I updated the wording a bit.

@blank 2009-06-05 21:09:31

Not to be confused with the cleaner or the football team: ajax.nl :)

@RSolberg 2009-06-05 21:10:55

There's an AJAX football team? Man we technologists need to be more original....

@Nosredna 2009-06-05 21:15:05

Wow. Talk about confusing. AJAX doesn't have to be Async, JavaScript, or XML, and the AJAX football team doesn't have to play football--they can play soccer!

@Bjorn Tipling 2009-06-06 00:26:14

Not to be confused with Ajax Telamonian, the ancient and powerful Greek hero after which the cleaner was named.

@hasen 2009-06-09 20:32:51

I think I've seen (on google) a city called ajax

@dss539 2009-06-09 20:36:11

@hasen j - I think I may have seen that, too. I wish there were some way to quickly verify that, though. I guess we'll never know. :(

@steamer25 2009-06-05 21:13:08

Most commonly, it refers to the use of the XMLHttpRequest object via JavaScript* in a browser.

Depending on who you ask, it could be used to describe almost any type of client/server communication over HTTP other than just typing a URL into a browser.

*jQuery provides some nice wrapper code to handle cross-browser differences, etc.

@Sylvain Rodrigue 2009-06-05 22:08:58

AJAX is very simple : someone somewhere tought that it would be cool to be able to send something to the server and receive something from it without reload a page.

AJAX is not a revolution, it's just a name for something simple : a web page can send a request to the server without being reloader - just some asynch stuff here.

You can add AJAX controls on your web pages wihout any works - just drag them in with Visual Studio. You may have to add some manager for them, but it is simply a drag-and-drop task.

But be warned : rogue web browser usually don't speak the same AJAX language as IE...

:)

@SingleNegationElimination 2009-06-06 00:31:10

"But be warned : rogue web browser usually don't speak the same AJAX language as IE..." I would strongly suggest using a portable ajax lib for this reason. jquery comes to mind.

@Leshek 2009-06-05 21:34:27

Creative use of previously known technology. Both the browser side scripting and programmatic access to data on the server have been known before. In AJAX it has been put together for innovative use anabling new applications of thechology known before. The REST comes to mind as similar type of advance...

@quillbreaker 2009-06-05 21:12:19

I read Head First AJAX as my first AJAX reference and I found it to give a simple and practical overview of AJAX.

@Corey Sunwold 2009-06-05 20:47:47

Asynchronous JavaScript And Xml. A technique for achieving bi-directional, script-driven communications between Web browsers and servers via HTTP.

See also:

Edit: As pointed out by Nosredna, JSON is often used in place of XML.

@Nosredna 2009-06-05 20:51:26

Except the XML is usually JSON. :-)

@Corey Sunwold 2009-06-05 20:53:42

Excellent note. Thanks for pointing that out.

@Nosredna 2009-06-05 20:55:46

Haha. Or often it's just a simple string. Maybe it should be "AJAS."

@Sergey Ilinsky 2009-06-05 21:03:41

And except the JavaScript is not asynchronous. It is executed in browsers synchonously with the UI in a single thread.

@Chris Simpson 2009-06-05 21:03:52

I would probably say "often" instead of "usually"

@RSolberg 2009-06-05 21:04:03

I've actually seen it implemented more often than not with simple strings or even XML... JSON seems to be gaining momentum though, in fact it is what I've been using of late...

@Nosredna 2009-06-05 21:05:51

Yeah, I'm not sure of the breakdown between XML, JSON, and other programmer-chosen strings. Let's just say it's some kind of string.

@Chris Simpson 2009-06-05 21:06:10

and we should probably replace Javascript with ECMAScript as it can be Javascript or JScript. So it should be SEAX or SEAJ

@Shog9 2009-06-05 21:06:51

@Sergey: the data-transfer - the communication - happens asynchronously. That the client is implemented using a single thread is irrelevant - that single thread is free to continue processing, submitting additional requests, etc. while a request is being submitted and processed server-side.

@Nosredna 2009-06-05 21:07:36

@Sergey Ilinsky, I'll quibble with you on the async. I've done sync and async calls, and I think it's fair to call the async ones async. The JavaScript fully relinquishes control to the browser an waits for the callback.

@Corey Sunwold 2009-06-05 21:10:37

From Wikipedia: "Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous.[3]" - en.wikipedia.org/wiki/Ajax_(programming)

@Shog9 2009-06-05 21:13:56

@csunwold: you can request the browser to block while waiting for the response, but this is usually considered a very bad thing indeed unless you are in complete control of the scenario (browser, server, network). Frankly, i would be happy if programmers would just forget that particular "feature" existed...

@Corey Sunwold 2009-06-05 21:19:42

@Shog9: That is a good point. I wasn't trying to argue whether you should do it one way or the other, just pointing out whats possible. Though I do agree you should avoid blocking the browser while waiting for the request.

@Sergey Ilinsky 2009-06-05 21:24:23

@Nosredna, @Shog9, Absolutely correct. The request is processed asynchronously. I was pointing to the fact that the callbacks. timeouts, UI events and whatever else is in the browser execution (including plugins in FF, but not in Chrome) will run in the same thread. The word AJAX as it is read doesn't have a mentioning of transportation. Just read it. So indeed I played words to disclose some of the more interesting (than just a technique) concepts and principals behind scripting.

@hasen 2009-06-06 01:16:35

Bad answer, as if he couldn't find what the acronym stands for using Google.

@Shog9 2009-06-06 02:58:14

@hasen j: this page should be in those Google results by now... Remember: the question was never, "What does AJAX mean to you?" ;-)

@hasen 2009-06-06 03:10:54

what part of "really" don't you understand?

@Shog9 2009-06-06 19:07:47

@hasen j: It means, "give me a straight answer. No BS." As in, "What does 'really' mean to you, really?"

@aehlke 2009-11-12 22:37:16

It really no longer has anything to do with XML.

@Nosredna 2009-06-05 21:01:50

The rough idea in English:

You have a web page. Some event (can be a button press or other form event, or just something triggered by a timer) occurs and triggers JavaScript code that asks the server for fresh information (like the latest value of GOOG stock).

There's a piece of code on the server that collects the info you passed and sends some info back. That's different from the page-serving job the server usually has.

When the server answers, a callback function (that you specified in the JavaScript call to the server) is called with the info from the server. Your JavaScript code uses the info to update something--like a GOOG stock chart.

@Ape-inago 2009-06-05 21:29:33

Very clear explanation of what the idea is behind ajax.

@Javier 2009-06-05 21:47:33

nice and simple intro. the only nit to pick is when you say "that's different from the page-serving job the server usually has", the only difference is that the content served is not meant for direct use by the HTML engine, but for the JavaScript code.

@Nosredna 2009-06-05 22:10:28

@Javier, yes of course.

@Sergey Ilinsky 2009-06-05 21:00:57

"Ajax" is the successfull marketing term introduced back in 2005 to replace the the older term "DHTML" that did not stick well. "Ajax" today is part of the history too as the new word - "HTML5" emerge. Still "HTML5" is pretty much what original "DHTML" used to be.

Ajax is also reffered to as "the new approach to the application development" where a web page is created on the server initially but later on, during its lifetime, the updates are being done on the client as the data or partial content gets communicated to the server in a background.

Hope this clarifies.

@Nosredna 2009-06-05 21:04:01

I don't think going from DHTML to AJAX was merely a name change. DHTML lacked the idea of going to the server for new information. It was more about altering the DOM with JavaScript.

@Shog9 2009-06-05 21:08:23

DHTML and AJAX refer to two separate things. Only clueless marketing weasels use them interchangeably...

@Sergey Ilinsky 2009-06-05 21:10:08

Do you really think so? The GMail-like applications were being built in 1999 when IE5 was out. The problem is that nobody needed them, since desktop was the platform. Moreover in these application the separation was done better - only presentation (no mixture with data) delivered on the initial load and only data (no mixture with presentation) communicated at the runtime.

@Sergey Ilinsky 2009-06-05 21:13:23

Indeed you can see DHTML as DOM+HTML+CSS+JS, Ajax as XMLHttpRequest+JSON and the HTML5 as the panacea for everything. This is your right, guys. Although I thought Nosredna would tend to agree to me.

@Nosredna 2009-06-05 21:18:41

I agree with you that AJAX uses DHTML. But it adds the concept of communicating with the server.To me, DHTML is a precursor and a subset of AJAX. All these terms are kinda wishy washy due to misuse, so I think we can be charitable about what the other guy thinks they are.

@Shog9 2009-06-05 21:20:50

@Sergey: It didn't help that those apps performed poorly in the browsers of the day - and especially over the then-ubiquitous dial-up Internet connections. Much confusion has resulted from the DHTML renaissance that wide-spread use of AJAX prompted: prior to that, it had largely been relegated to the domain of "stupid hacks" and "necessary evil". With AJAX able to off-load processing onto a server without unduly impacting the client, this changed. Regardless, AJAX does not require any DHTML, nor has DHTML ever depended on AJAX - they're just two great tastes that taste great together!

@Javier 2009-06-05 21:51:19

DHTML is just adding dynamic (JS) code to HTML (any version). AJAX is a technique used with JS to involve the server into the dynamicity of DHTML. HTML5 is a new version of HTML. three very different pieces of an evolving puzzle. mixing them all is misleading

@Nosredna 2009-06-05 23:47:03

@Javier, I agree. But if you apply for an "AJAX" job, the employer usually means EVERYTHING to do with making a rich Internet application. So aside from AJAX's net communication meaning, it also has a larger meaning in common usage.

@Venr 2009-06-05 21:00:32

AJAX stands for asynchronous JavaScript and XML, though it doesn't always deal with XML data anymore. Essentially it boils down to using the XMLHttpRequest object through JavaScript running on the client to make a web request and retrieve some information that you use to update the state of your page without requiring a page refresh.

Start with a basic tutorial that shows you how to use bare bones Ajax to make asynchronous requests such as http://www.w3schools.com/Ajax/Default.asp before moving on to using it in a production level application.

When using it in an application you're far better off investigating one of the common JavaScript frameworks that abstract away the differences between the various browsers and make it easy to manipulate the page after the request returns. I personally recommend http://www.jquery.com/

@John Rasch 2009-06-05 20:49:49

I believe the fastest and easiest way to get started is with jQuery:

http://jquery.com/

http://docs.jquery.com/Ajax/jQuery.ajax#examples

@Ape-inago 2009-06-05 20:55:48

wooo jquery. amazing framework. Makes doing things in html actually kinda fun.

@John Rasch 2009-06-05 20:59:34

Yeah, I love it. I started with prototype but never really got into it, probably because I never really learned JavaScript in depth.

@RichardOD 2009-06-05 20:49:27

From the man that coined the term - http://adaptivepath.com/ideas/essays/archives/000385.php

@Electrons_Ahoy 2009-06-05 20:49:02

It's JavaScript, but it works.

@Ape-inago 2009-06-05 20:51:32

+ one for the comedy, it made me laugh.

@Javier 2009-06-05 21:52:35

yeah, funny but still wrong. won't downvote just because it expresses my feelings (even if not reality).

Related Questions

Sponsored Content

34 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

17 Answered Questions

[SOLVED] jQuery AJAX submit form

6 Answered Questions

[SOLVED] How do I integrate Ajax with Django applications?

  • 2013-11-30 23:41:00
  • tjons
  • 76836 View
  • 234 Score
  • 6 Answer
  • Tags:   python ajax django

32 Answered Questions

[SOLVED] What exactly is RESTful programming?

  • 2009-03-22 14:45:39
  • hasen
  • 1599641 View
  • 3839 Score
  • 32 Answer
  • Tags:   http rest definition

39 Answered Questions

[SOLVED] How do I format a Microsoft JSON date?

22 Answered Questions

[SOLVED] jQuery Ajax File Upload

18 Answered Questions

[SOLVED] Abort Ajax requests using jQuery

31 Answered Questions

[SOLVED] How to manage a redirect request after a jQuery Ajax call

20 Answered Questions

[SOLVED] jQuery Ajax error handling, show custom exception messages

14 Answered Questions

[SOLVED] What is an idempotent operation?

Sponsored Content