Random Entry: Opera 9 Object Detection

< Ajax: What is it Good For? Page 2 | Ajax History: It’s in a Name >


Ajax: What is it Good For? Page 1


Example Files


Note you will need to use either a local or remote server to view the example files. The example files can be downloaded from here:



Download Files



You can view the sliding interface template from the link below:



View Sliding Interface Template



The Ajax powered Fading Image Gallery can be viewed from the following link:



View Fading Image Gallery



PDF File


A printable PDF file can also be downloaded from here:



Download PDF file



A Brief History


Many a year ago, Jeff Rouyer won the Netscape DHTML competition with his flying dude interface and put DHTML on the map. The winning entry, apart from being 3D in design which up until that point had not been seen on the Web, also had something that was quite uncharacteristic of Web pages.



Most of what you see today on the web in terms of DHTML Widgets can be attributed to a small number of people with Jeff leading the way. Granted there has been a progression over the years, but things like scrollers, tooltips, drag and drop, event handling, dynamic clipping etc were pioneered by Jeff many years before they became popular. For example, the sliding doors technique used in CSS today was used around ten years ago with JavaScript by Jeff. In short the guy is the grand daddy of DHTML and everyone else pales in comparison. I kid you not!



One of the unusual features of Jeff’s Award winning site was than rather than have a user traverse across multiple Web pages which consumes resources by opening separate window instances, Jeff was loading content dynamically into an existing interface. In other words all the content was being loaded into an existing element and all other elements were not being changed or swapped. We are talking pre Internet Explorer 4 days here. Here is a screen capture of that site.


Internet Explorer 4 was released a little later to challenge Netscape's dominance on the web, but it did not have a similar method where content could be loaded directly into a layer element by using layer.load();



As the popularity of Internet Explorer 4 gained it became increasingly important to Jeff to maintain cross browser compatibility and initially created a series of document.write() in an external file to allow content to be imported into a pre-existing html file. Obviously this was resource intensive and he went on to improve this method for Internet Explorer 4 by created a little Java Applet to allow Internet Explorer 4 to pass external content into an existing element.



Not long after that, he thought of the idea of using an IFrame technique where content would be loaded into a hidden IFrame and then sucked back out and into a div element. This was the genesis of what today is known as Remote IFrame Scripting. Remember we are talking close to a decade ago which is a good indicator of how far ahead of the curve Jeff was at the time.



Around this time, Jeff and I struck up a friendship and began to work on refining that technique and over the years it progressed to what both Jeff and I currently use on our sites. We call it External HTML Loading.



As our friendship grew we started to think about writing a book. The whole problem with Jeff and I in this regard is that when we work together, we are too busy developing new things and rarely put pen to paper. In short we are too alike and enjoy the idea of creating new techniques as opposed to writing about existing techniques.



The interesting thing about working together in that manner was that we heavily were looking into using XML based techniques combined with existing HTML techniques. While we covered quite a bit of ground, the fact of the matter was that the only browser capable of using XML in any reasonable way was IE5+, so we tossed the idea out the window for the time being.



Enter Ajax


Recently Garret Smith of Adaptive Path made a good case for using Asynchronous JavaScript and XML and coined the acronym "AJAX" to represent that notion. It is similar to the Remote IFrame technique in that things are handled on the client side, but as we shall see differs in significant ways. That article reminded me of our earlier work on this front and sparked my interest in Ajax. Part of that interest is in writing this article and sharing my efforts with the development community.



To my way of thinking, Ajax is more a natural progression from an existing set of techniques as opposed to being something completely brand new. Yet within that progression, things are markedly different than in previous years in a couple of key areas:




It provides a mechanism to mix and match xml with xhtml.


It significantly reduces having to continually fetch things from a server (remote IFrame scripting is reasonably comparable here).


It overcomes some speed bottlenecks that traditional Web development has fallen prey too. In most instances an Ajax based site will load quicker than a comparable traditional Web site.


When done well, it significantly reduces initial load times.



Before proceeding, it should be noted that Ajax isn't a panacea. It has some problems that it needs to overcome as it continues to mature. But it is a promising field to be involved within and as the years roll on, it probably will greatly affect the way we think about building Web pages and Web applications.



It also needs to be clear that Ajax isn't a technology as such but rather is a technique that combines well with other technologies and techniques. For example, xml, dhtml, css, xhtml. In fact, Ajax really is DHTML with the xmlhttprequest object thrown in. It is amazing to think how one object can change the whole playing field.



As things currently stand in the Ajax field, we almost have two extremes going on. At one end of the continuum we have developers building all sorts of complicated JavaScript tags that in most instances are unnecessary and are overkill. At the other end of the scale we have these little examples floating around the Web that demonstrate how to load xml into a document or do some Ajax form processing.



While both ends of the spectrum have a part to play in the progression of the Web, I am not convinced that the principles of Ajax and how they can best be leveraged by a developer have been conveyed as well as they may have been.



This is particularly evident in the Ajax api’s that are available today. Most are appalling poor and suffer from code bloat. It is interesting to note that DHTML Api’s of the past suffer from the same problem. I was never an advocate for Api’s of this sort and see nothing that changes my mind in this regard.



What is Ajax?


Ajax itself is a technique, but to use the technique effectively one must become familiar with the philosophy behind the technique. In other words, it is not just the use of the technique that is important, but rather developing a different mindset and approach to Web development that is central.



To date, I have mentioned the term Ajax a number of times but have not described the central object that makes Ajax, Ajax. At the heart of Ajax are the xmlhttprequest object and its Microsoft's activeX equivalent. It is this object that allows data to be transferred asynchronously. In case you are not clear what asynchronous means, it is the ability to handle processes independently from other processes. Synchronous which is the opposite of asynchronous, then means that processes are dependent upon other processes. To illustrate let us use a classical Web page scenario.



Assume we have page A and on this page we have a number of elements, including a couple of script and style tags. With synchronous data transfer the script tag needs to be parsed before the next element is parsed. In this way then the next element to be parsed by the browser is dependent upon the script tag being parsed first. Effectively we are creating a bottleneck of one connection between Web page and browser. Style tags and link elements in the head section of the document create the same bottleneck effect. They have to be parsed one at a time before other page elements can download.



Once they have been parsed then the elements in the body section can use concurrent connections to help speed up the download process. For example, most servers handle between 2 to 4 concurrent connections between web page and browser.



Consequently, this means that 2 to 4 images or other page elements can load concurrently. Yet before that process starts what is between the head tags have to be parsed first, which can considerably delay the loading of web pages. Most particularly if you are using multiple CSS and JavaScript tags. Nearly every Web page and blog on the internet uses this method. It isn't hard to see why this may be a problem in terms of increasing page load speeds.



Asynchronously loading methods differ from this scenario because the loading processes are handled independently of each other and to a significant degree overcomes the bottle of traditional Web page design. As will be demonstrated later, the whole gist of this technique is to use minimal JavaScript initially and then push all the head related tags, including the rest of the JavaScript, CSS etc tags through an xmlhttprequest object. This method uses multiple connections rather than the single one that most traditional Web pages use and consequently speeds things up considerably. More on that later as we go through this tutorial.



In this tutorial I will be using xmlhttprequest to represent both versions: the xmlhttprequest object itself, (supported by, Firefox, Opera 8, Safari and later Mozilla builds and the Microsoft equivalent ActiveX object. I do this for the sake of brevity rather than anything else.



What to Expect


We are going to walk through the basics of Ajax and culminate in the building of a little Ajax powered Fading Image Gallery application. In this way it is hoped that a deeper appreciation for what Ajax is capable of is conveyed. It also should be noted that in another upcoming tutorial, we will tweak that Image Gallery widget and add some form processing capabilities to it, add some more FX, get a few glitches out of that system etc.



In other words, this initial tutorial is meant to help you get up and running in building your first Ajax powered Web application. Later we will look at refinement and adding features so that you can gain a more comprehensive understanding of the techniques and mindset required for Ajax. In short this tutorial is not meant to be the be all and end all of Ajax, rather it is better thought of as development in progress. Though the development in progress in this case has some clear aims and techniques to impart that should hopefully serve you well in future Ajax endeavours.



Just before getting into the code, techniques etc, I would just like to advise people that there is no need to attempt to cut and paste code from this tutorial. All files, which include both the image gallery application and a sliding book like interface, plus all examples are provided in a downloadable zip file. You will need to note, that the examples will not run offline unless run a server as a local host. At any rate, providing the examples as a downloadable file gives you a chance to play around with the files and suggest further improvements etc.



The two completed online examples that are provided are the Sliding Book Interface and the Ajax Fading Image Gallery.



Just in case you weren't aware, the site you are now on also uses Ajax where lots of little components are being dynamically loaded as you interact with the web page. Bear that in mind as you read through this tutorial.



Having said all that, there is no better way than to dive into some code and walk you through it.



Onwards we go...



Basic XML Formatting


Let us begin by construct a basic xml file that will be loaded into the main document. Our xml example file (basic.xml) looks like this:



<?xml version="1.0" encoding="UTF-8"?>



<menu>



<item>



<description>



Possible Menu Item Here



</description>



</item>



</menu>



Remember that XML doesn't really do anything other than describe the content it contains. For example an xml tag such as the following:



<mynameis>


Eddie


</mynameis>



Allows the tags to describe what the content is. That is all the xml tags actually do.



In our basic XML example, we are eventually going to build a little navigation system therefore I used the tags, menu, items and description respectively to accurately represent what the tags contain.



Let us now turn our attention to the JavaScript that will allow us to load an xml file into an existing document. In case you are not clear, we are importing an XML Document into an existing HTML document. That is our immediate goal and forms much of the basis of what follows later on. It is worth paying attention to and going into some detail.



Ajax Manager Basic Script


Line 1: function ajaxManager()


{


Line 2: var args = ajaxManager.arguments;


Line 3: switch (args[0])


{


Line 4: case "load_page":


Line 5: if (document.getElementById) {


Line 6: var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();


}


Line 7: if (x)


{


Line 8: x.onreadystatechange = function()


{


Line 9: if (x.readyState == 4 && x.status == 200)


{


Line 10: el = document.getElementById(args[2]);



Line 11: el.innerHTML = x.responseText;


}


}


Line 12: x.open("GET", args[1], true);


Line 13: x.send(null);


}


Line 14: break;


Line 15: case "start_up":


Line 16: ajaxManager('load_page', 'basic.xml', 'contentLYR');


Line 17: break;


}


}



As you may have noticed, I have numbered the JavaScript on a line by line basis. The best way to learn JavaScript is line by line, consequently it will be employed through this tutorial when apt.



Let's Dig in to this script.



Line 1: This creates a new function which we call ajaxManager.



Line 2: we create a variable called args that points to all the arguments that the function will contain. We do this to cut down on file size rather that typing out ajaxManager.arguments on each occasion we want to make an argument. In case you do not know what a JavaScript argument is used for consider the following:



function alertMe(message){


alert(message);


}



In the alertMe function the argument employed is "message" and is contained within the parentheses. The argument itself is passed to a stock standard alert() method.



To generate an argument to represent the message we can do this on the body onload event.



<body onload="alertMe('my name is Eddie')">



What this does is then pass 'my name is eddie' to the argument message and when the alert is triggered then my name is eddie is displayed in the alert dialogue. An argument is a system where you can pass information from an event to the function itself, which is particularly useful when working with programming languages.



Line 3: The function uses a case / switch methodology. Often rather than having a series of if / else statements we can use a case switch method with the same result with much less code and consequently more efficient processing of the script. A basic format for case switching is as follows.



switch (expression) {


case label1:


// Code to be executed


break;


case label2:


// Code to be executed


break;


}



In our code the expression is signified by an argument so that later we can use the labels of each case and call them from an event handler. By way of example,



onmousedown=”functionNameHere (‘caselabelhere’)”



or



ajaxManager(‘start_up’)



would signify to the browser to use the function ajaxManager and to only execute the start_up case. In using the case / switch method in this manner we are effectively creating sub functions within the main function that often results in code brevity.



Line 4: Creates our first case. In this instance we are creating a case labelled load_page.



Line 5: We don't want older browser to use the script so we create an if condition to allow only browsers that support document.getElementById



Line 6: Now we are getting into the guts of the function. To use XMLHttpRequest with Internet Explorer 5 we need to use an Active X object where as Mozilla based browsers, Opera and Safari support XMLHttpRequest directly. So we have to create a little conditional switch to ensure that the right method is used for the right browsers. We do this by fist creating a variable named x and checking for the existence of an ActiveX object using a conditional operator. If an activeX object is found then the statement uses the method for IE if not it skips over to using XMLHttpRequest that is used by the other modern browsers.



For Internet Explorer, if we wanted to, we could use try and catch JavaScript methods to create some conditional branches to implement version dependent instances of XMLHTTP. For example Msxml2.XMLHTTP.3.0. In the next tutorial, we will implement these methods because they also are useful for error catching.



Using independent version conditions makes sense if you want to use a specific feature you know is supported by a particular version of XMLHTTP. In this instance however that isn't applicable so we can use the version independent method which is Microsoft.XMLHTTP. That will work on IE5 through to IE7. It also has the added benefit of keeping our code nice and lean. And we like lean code don't we!



Line 7: We check that either the Microsoft.XMLHTTP or XMLHttpRequest objects have been created through the usage of the previously named variable x.



Line 8: The onreadystatechange event is used to keep track of when the readystate of a document changes. In this statement we attach the event to Microsoft.XMLHTTP or XMLHttpRequest respectively by using the variable x.



We then create a function to handle all the processing that will follow. This is particularly useful to monitor the parsing and loading process of documents. The following readystates are available to developers.




0


uninitialized


Object is not initialized with data.


1


Loading


Object is loading its data.


2


loaded


Object has finished loading its data.


3


interactive


User can interact with the object even though it is not fully loaded.


4


complete


Object is completely initialized.





Line 9: We have another conditional statement to check if the readystate = 4 has been triggered; which means that the document loading is complete and ready to be used and also check that the status of the document is completed by asking whether status = 200. If this check is ok then the following statements are triggered.



Line 10: We want to create a JavaScript object to load the xml file into. We could just load into the document.body, but using a container is far more flexible as you can then position imported xml data anywhere you like. To this end we create a variable named el and point it to the document.getElementById(args[2]) statement. The argument in the statement will allow us to later specify which element we want to load the data into. We could have just used document.getElementById('contentLYR') where contentLYR would be a block element in the document body (usually a div tag) with an id value of contentLYR. And that would be perfectly acceptable in a lot of instances. However later on we are going to do some multiple data loading into different containers in the document so we want as much flexibility as possible.



Line 11: The next thing we want to do is actually place the data into an element. I find using innerHTML efficient in handling this task so let us use that method. Basically this line tells the browser to place the data into an element and display it.



Line 12: We want to open a request and obtain the data so this method allows for that. It uses three arguments Get, args[1] and true. Get as the term implies retrieves the data, the second argument args[1] will allow us to specify which data file to obtain and the third tells the browser to load the data asynchronously. If this third argument is set to true the data loads asynchronously and if set to false it does not.



The following table lists common XMLHttpRequest object methods:





Method


Description


abort()


Stops the current request


getAllResponseHeaders()


Returns complete set of headers (labels and values) as a string


getResponseHeader("headerLabel")


Returns the string value of a single header label


open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])


Assigns destination URL, method, and otheroptional attributes of a pending request


send(content)


Transmits the request, optionally with postable string or DOM object data


setRequestHeader("label", "value")



Assigns a label/value pair to the header to be sent with a request




Line 13: If we wanted to transmit some data to and from a server we would specify the data to be transmitted. But since we don't want to send data we set the send argument to null



Line 14: A break statement closes the case.



That is the core of an xml asynchronous loading technique. And it is well worth the effort to get to know it intimately. If you don't understand it, try reading it again until you do. The next case is used to signify what is going to happen when the document loads.



Line 15: Creates a new case called start_up.



Line 16: This statement tells the browser what to do when the original document (not the document being loaded into the interface what to do. Here we specify that the ajaxManager function should be called, then to use the case load page, then to retrieve the xml file named basic.xml and to put it into a div tag called contentLYR.



Line 17: A break statement to close the case.



That's it for the JavaScript section. It's a pretty lightweight script that is capable of quite a few things that will be demonstrated later on.



Let's now turn our attention to the original document where the xml data will be loaded into. It's a pretty simple set up. All we need to do is insert a div tag with an id attribute and property of contentLYR like so;



<div id="contentLYR">


</div>



Then in a style sheet give it some properties and values. This is what I have used for this example:



<style type="text/css">


#contentLYR {


position:absolute;


width:200px;


height:115px;


z-index:1;


left: 200px;


top: 200px;


}


</style>



Nothing out of the ordinary there. You will just need some familiarity with CSS to arrange layout and presentation. There are a bunch of good CSS tutorials on the Web if you find yourself in unfamiliar territory.



Finally we call the ajaxManager and specify which case to employ from the body tag using an onload event like so:



<body onload="ajaxManager('start_up')">



Let's take a look at how this handles by viewing the example:



View Basic Example



As you can see the function does what it intends to do, but it doesn't really highlight the versatility of XMLHttpRequest. Let's go with a few different examples to demonstrate. Part 2 of this tutorial can be accessed by scrolling to the top of the page.





New cheap web hosting for AJAX and Web 2.0 enthusiasts.


Top AJAX website hosting with award winning service and reliable web server support.


Use internet marketing to get your DHTML site seen globally.


Get tips on search engine marketing with each web hosting plan.


Your website can turn a profit with reseller hosting and affiliate marketing.


Find out how much your domain could be worth with cheap domain name services.



A good web designer knows how to make your site easy to use by your target audience. It should be as attractive as it is useful. Take a look at some of these web site design tips for starters.





Learn more with PC Tutorials on CD that you can study at home.


Posted by Eddie Traversa in Ajax at 08:56 | Comments (141) | Trackbacks (0)


Trackbacks

Trackback specific URI for this entry


No Trackbacks


Comments

Display comments as (Linear | Threaded)


Its a fantastic tutorial.I am new in AJAX embience...Thanks

All The Best .

with Regards

Amit Yadav

#1 Amit Yadav on 2006-01-11 08:45 (Reply)

afew

#1.1 ter on 2006-02-14 13:21 (Reply)

asfd

#1.1.1 afsd (Link) on 2006-02-28 03:34 (Reply)

very nice article

#1.1.1.1 Anonymous on 2006-04-27 00:48 (Reply)

good

#1.1.1.1.1 surendra sharma (Link) on 2006-06-22 11:32 (Reply)

hi

#1.1.2 hi (Link) on 2006-12-15 09:56 (Reply)

Fantastic article covering some points I really needed some good usability info for.

Best regards from Poland

#1.1.3 mosh (Link) on 2007-06-07 01:21 (Reply)

It's very good article. Great site with very good look and perfect information...I like it

#1.1.3.1 Apteka internetowa (Link) on 2007-06-27 09:12 (Reply)

good article

#1.1.4 mosh (Link) on 2007-06-07 01:54 (Reply)

Great work ! I really enjoyed browsing through this site. I will recommend it to my friends. Greetings

#1.2 Suplementy (Link) on 2007-06-24 14:01 (Reply)

hello world

#2 graham (Link) on 2006-01-11 13:06 (Reply)

Thanks for very interesting article. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. I think these blog is really useful for new comers and Excellent resource list.

It´s a very interesting Blog and simple answer of many questions.

#2.1 Handwerkersoftware (Link) on 2007-06-17 16:24 (Reply)

Great article.


I've linked this in on my blog. If you want to reciprocate, you could place a link from your website to my Java/J2EE blog.


http://developwithpleasure.blogspot.com/2005/11/ajax-hype-or-real.html


Thanks,


Floyd

#3 Floyd (Link) on 2006-01-14 17:01 (Reply)

Thanks for the useful tutorial!

#4 Edward (Link) on 2006-01-15 14:44 (Reply)

Enjoyed browsing through the site. You have very useful information. Keep up the good work.

Thanks and Greetings

#4.1 Aukcje (Link) on 2007-02-08 01:13 (Reply)

This is a cool tutorial

#5 Alex on 2006-01-18 09:45 (Reply)

thanks for the nice feeback

#6 Eddie Traversa (Link) on 2006-01-19 06:57 (Reply)

Thanks for this simple explanation to ajax, it will be great help if you can put more examples with some explanation if not in detail. Went through many sites but this is very simple to start up with.



Thanks

#7 rohan on 2006-01-24 06:32 (Reply)

sdf

#7.1 sd (Link) on 2006-01-24 15:37 (Reply)

look at the demonstration site http://smpc.com.br/inventory for more examples using Ajax technology

#7.2 SmartPC (Link) on 2006-07-06 08:14 (Reply)

nice tutorial!

thx :-)


greez

#8 Dr.Lecter on 2006-02-01 10:11 (Reply)

awesome

#9 Test User on 2006-02-14 07:01 (Reply)

Very good tutorial. I have a much better grasp of AJAX now. Just need to go practice!

#10 Barney (Link) on 2006-02-14 11:50 (Reply)

dsf

#11 joji (Link) on 2006-02-15 07:03 (Reply)

Hey Eddy...

As a relative newcomer to JavaScript I may be out of my depth reading this, although I can roughly see how it works logically (although most of the actual syntax is greeky).

Since I hope to be able to use this stuff on my site, your tute has shown me that Ajax is closer to a reality for me than I previously thought.

Kewl

t3

#12 t3rry (Link) on 2006-02-18 03:47 (Reply)

Nice tutorial, cheers. I dont think I can get a grasp yet though.

#13 Blaze (Link) on 2006-02-20 07:09 (Reply)

Good Tutorial But should Deep explanation

#14 Chandrashekhar Hire on 2006-02-23 10:48 (Reply)

Thanks for the simple but informative tutorial on Ajax.

#15 Reshma on 2006-03-01 23:27 (Reply)

wow, this makes my day, thank you!!

#16 Daz Honey (Link) on 2006-03-08 00:32 (Reply)

The line by line explanation is a breath of fresh air. This is by far the best info I have found in a rather lenghty search. Thank you.

#17 Chris on 2006-03-13 17:29 (Reply)

selam naßer

#17.1 yusuf (Link) on 2006-04-26 10:25 (Reply)

This is an excellent article ! Two observations, though :


In your Fading Image Gallery example, each image loads and appears twice. This strikes me as odd behaviour.

Could it have something to do with my setup : iMac G5, OSX 10.3.9, Safari?


Before each image loads, a text string appears with the word "Standy : fading image in". I think you mean this to read "Standby"?

#18 Peter on 2006-03-15 05:33 (Reply)

Peter, if you look at the actual JS used to manipulate this gallery, you will get to see all of the dHTML come together. In regards to the image showing up for a second, next disappearing, and finally fading in, there are a couple of factors to consider:


#1 - First, and simplest, is in the actions prepared for the style of each object. From what I can see in the JS, the author has chosen to load the image, size it proportionally, and then hide the layer that it's on. A slightly better approach might be to hide the image layer, then load the next image, and fade it in when its completed loading.


#2 - The A in AJAX (Asynchronous). Since the code (in some part) is independent of the webpage, the image can be physically changed while the fade in is working - especially if it is cached by your browser. This makes for a bleached opening to the first picture, and a vivid display of the second. Interestingly enough, the program understands that it has been "iterated" and then proceeds to fade in again.


Hope this helps. ;-)

#18.1 Valentine (Link) on 2006-03-18 09:31 (Reply)

In theory thats right, but unfortunately on safari you cannot detect the loading of a item through a request. What you could do then is do what you suggest in hiding the layer and just delay the timer for the fade effect further.

#18.1.1 Eddie Traversa (Link) on 2006-03-18 20:46 (Reply)

Very interesting, but I don't understand why the 2 cases. Why not just use the load_page code and pass 3 arguments from the body onload. I would think that would make the function more generally useful.


I'm not complaining though, I didn't know about the case switch thing before so it's interesting to see it an action.

#19 Eric Kittell (Link) on 2006-03-15 08:17 (Reply)

Eric, to simply answer your question, the two cases allow the single function to be self-contained. Kind of genious, because if you notice the function name *ajaxManager()*, then look at the two cases:


//Case 1

Line 4: case "load_page":


//Case 2

Line 15: case "start_up":

Line 16: ajaxManager('load_page', 'basic.xml', 'contentLYR');


What you see here is the ability of a function to be called once within the web document to "start_up", which in turn calls itself to "load_page". In some instances, the "start_up" case is a wrapper for the "load_page" case, allowing one special action - initialization - to take place when the script is "starting up".


As I mentioned to Peter, the actual JS for the gallery provides more insight, but if you're only just starting out on JS, you may want to hold off.


I am slowly teaching myself up to this level of JavaScript, so if you have any questions, don't hesitate to drop me a line.

#19.1 Valentine (Link) on 2006-03-18 09:38 (Reply)

Hi,


After reading your site with the ajax tutorial, I was trying to change the GET method to a POST method.

I am not sure why the following doesn't work, I apprecipate your insight to solving this problem


// the ajax script

var url = "process.php";

http.open("POST", url, true);

...

// then in the html form, i use method="post" and have a input field with 'username' as id and name.




in the process.php





But whenever I use the POST in the ajax script, I can't get anything in the username


I can only do it with a GET (as in your example in the webpage)


// the ajax script

var username = ...;

var url = "process.php?param=";

http.open("POST", url + username, true);



I will apprecipate if you can tell me what's wrong with the POST

Thank you


Edmund

#20 edmund on 2006-03-21 16:31 (Reply)

Excellent explainations and nice examples.


For some basic Ajax examples for newbies you could check out AjaxTutorial.net

#21 Stuart (Link) on 2006-03-21 17:02 (Reply)

Thanks for this tutorial.

#22 Teju on 2006-03-22 19:34 (Reply)

I built an example using this ajaxManager function that works perfectly in Safari, but not in IE


http://ekittell.com/flashtest/frame.html


The flash movie uses phpObject to modify the basic.xml file, this seems to work fine in both Safari and IE, and of course it's beyond the scope of this tutorial anyway. When phpObject finishes Flash then uses getUrl to run the ajaxManager function in the frame on the right, and in Safari the text changes to reflect the change to the xml file, but in IE it won't change, even if I hit refresh, though if I close the browser and open another one then I'll see the change in the xml file displayer ther.


If anybody would care to comment on this I'd really appreciate it.

#23 Eric Kittell (Link) on 2006-03-25 15:32 (Reply)

I figured it out, you need to set cache control in the header of the XML, IE has very agressive caching

#23.1 Eric Kittell (Link) on 2006-03-31 19:54 (Reply)

Good glad u figured it out, ive had a pretty bad cold for a few weeks so havent had the energy to do much in terms of answering people. Sorry about that.

#23.1.1 Eddie Traversa (Link) on 2006-03-31 21:54 (Reply)

very interesting article, thanks!

#24 DesignStage.Net (Link) on 2006-03-31 13:35 (Reply)

This is a very nice tutorial/explanation.


For making good use of AJAX without getting into all the coding is using *BackBase*. i've been using backbase and its really good.


Regards,

Paul P

#25 Paul Potnuru (Link) on 2006-03-31 15:40 (Reply)

It is really cool Eddie.Continue to post more about AJAX.


With lots of wishes and smiles,

Kalyan

#26 nectarsol on 2006-04-07 13:33 (Reply)

Very nice article.... and also good samples.

#27 K.Senthil Kumar (Link) on 2006-04-10 08:03 (Reply)

thanks for the info...good stuff..cheers

#28 DesignStage.Net (Link) on 2006-04-12 17:45 (Reply)

nice tutorial

#29 saikat mukhopadhyay on 2006-04-26 01:11 (Reply)

Very Nice Article about AJAX...I enjoyed it.

#30 Muhammad S Tahir (Link) on 2006-05-08 14:51 (Reply)

There are some good online tutorials on introduction to ajax at www.kynou.com. These tutorials are good because they are like training simulators.

I hope this is useful to you guys :-)

#31 Eric Viegas on 2006-05-10 12:28 (Reply)

Very well writen article - I've picked up a lot of tips.

Many Thanks :-)

#32 Stuart (Link) on 2006-05-11 16:22 (Reply)

I am new in AJAX and this tutorial has given me a good understanding of what AJAX is.


--Vikky

#33 Vivek Chandra (Link) on 2006-05-18 02:04 (Reply)

This tutorial was very good for me to understand about Ajax.


Thanks a Lot.


-- Liton

#34 Liton (Link) on 2006-06-12 06:50 (Reply)

Great article. I'm now trying to implemente my first Ajax proyect, this text was useful

#35 Diseño (Link) on 2006-06-14 05:20 (Reply)

too good article

#36 dineshG on 2006-06-17 06:45 (Reply)

Good article, my friend and i enjoyed with this.

#37 Fede on 2006-06-21 07:38 (Reply)

really nice page

#37.1 jjeerroo on 2006-08-01 04:02 (Reply)

Nice one. Great to hear about jeff too.. though i have coded well with javascript and dhtml for long time now, never actually thought of reading abt who all have been really working behind the scenes to make it grow...


Cheers to Eddie and Jeff !!

#38 Dilish on 2006-06-22 08:16 (Reply)

if every online tutorial breaks it down line by line with such great details and explanation i probably wouldn't had gone to college. Thanks for the great intro to AJAX

#39 Dennis (Link) on 2006-06-23 01:39 (Reply)

It is indeed a good tutorial.

#40 Mayur Bhatt on 2006-06-29 02:19 (Reply)

ajax is the best tool ever after xhtml,but i still need to learn it.just finished learning php basics,css/xhtml advanced - now i am going for ajax :p the web 2.0

#41 ruudik niitmets (Link) on 2006-07-01 13:55 (Reply)

some pretty good stuff you have there

#42 sal (Link) on 2006-07-16 22:43 (Reply)

thx for great tutorial.


can anyone help me find a source code like http://0point5.com/live-form.JPG that works with php page.


where, when u fill the text box in form you see in side live but only if the box is not empty.

#43 damu (Link) on 2006-07-17 01:16 (Reply)

We were experimenting with ajax for interactive web design and this introduction was very handy.

#44 datanumeric.com (Link) on 2006-07-25 21:17 (Reply)

tnx u

for article & for the tutorial

gallery looking fantastic :-)

#45 jimy (Link) on 2006-07-28 12:47 (Reply)

I am completely new to the AJAX technique and this is an excellent primer for it. Thanks for taking the time to post this as there really aren't many good tutorials out there yet.

#46 Adam Morgan on 2006-08-04 09:57 (Reply)

Very good AJAX tutorials,Thanks, :-)

#47 glen (Link) on 2006-08-08 05:09 (Reply)

I am new bie to DHTML, the tutorial is very good, i wlll start using the technique in my forthcoming sites. I love to program using AJAX technique. Thanks a lot....

#48 Althaf on 2006-08-14 09:48 (Reply)

Great tutorial! It was exactly what I was looking for. I now have the pieces of information I need to get started with AJAX. My mind is already churning with the possibilities ;-). Thanks!

#49 Doug (Link) on 2006-08-18 15:09 (Reply)

Very simle code & great tutorial. I am new in AJAX, but this tutorial helps me to do few things.

#50 Seder (Link) on 2006-09-07 01:31 (Reply)

I don't quite understand why you are setting the innerHTML to the responsetext (line 11) before you've actually retrieved the data (line 12).


Am I thinking about this the wrong way, or am I right and there's just some additional logic to this that I'm not getting?


Can anyone shed any light on this?


Cheers

#51 Glen on 2006-09-07 05:49 (Reply)

hey ...its really great work.i am new to this ajax....

after reading ur article....i got a idea.its simply superb for beginners.


cheers,

manasee

#52 Manasee on 2006-09-09 02:01 (Reply)

Cool

#53 DoctorX on 2006-09-10 18:54 (Reply)

Glad to see this tutorial.. makes some things clear for me


Thnx

#54 rxbbx (Link) on 2006-09-23 14:27 (Reply)

Very good ajax tutorial :-) Help author writes more tutorials for us, thanks

#55 glen (Link) on 2006-09-24 02:43 (Reply)

helo sir,

i hv to gv a presentation on AJAX ,,

so cn u provide me somemore infromation related to that..

#56 nishita on 2006-09-27 22:22 (Reply)

nice article, thx :-)

#57 BOLLOS (Link) on 2006-10-03 17:37 (Reply)

good job!

#58 roki (Link) on 2006-10-09 11:44 (Reply)

simply super

#59 ram on 2006-10-18 03:57 (Reply)

Keep up the good work. Greetings

#60 tomek (Link) on 2006-10-22 06:40 (Reply)

Good article. Answering to a lot of my questions.

#61 noreason (Link) on 2006-10-30 12:34 (Reply)

Hm, does your website design render correctly in FF?

#62 dan (Link) on 2006-10-31 14:42 (Reply)

Thanks for the useful tutorial!

#63 Roman (Link) on 2006-10-31 17:21 (Reply)

very good tutorial.

#64 Abhinav (Link) on 2006-11-07 17:13 (Reply)

I liked the xml loader code, but is it possible to have a user select which xml element to display from a dropdown list or even entering via a text box as required. Some xml files are huge and I mean 100's of megabytes and then some. Loading something like that in a bowser can and most probably will cripple it and make it fall over.

#65 chris davies (Link) on 2006-11-08 10:19 (Reply)

Hai,


Nice and Detailed Tutorial !


Thanks,

#66 Arun on 2006-11-14 23:57 (Reply)

testing

#67 Venu (Link) on 2006-11-17 01:08 (Reply)

Good tutorial...nice job.

#68 stefan (Link) on 2006-11-21 01:33 (Reply)

Keep up the good work. Greetings

#69 Max (Link) on 2006-11-24 06:12 (Reply)

Simple ,useful ,easy to understand!

Great!

#70 Attilla on 2006-11-24 08:03 (Reply)

Es muy bueno pero sería espectacular que lo tuvieran en otro idioma como el español.

#71 KELLY on 2006-11-24 12:11 (Reply)

yes it's working...

#72 Księgowy (Link) on 2006-11-26 02:41 (Reply)

This is a wonderful, insightful and uplifting case of a revealing infrastructure implementation of Open-Source & Free Software. Keep up these useful pieces.

#73 Ron (Link) on 2006-12-04 19:16 (Reply)

This tutorial is interesting and very informative, nicely interface. Enjoyed browsing through the site.

Keep up the good work. Greetings!

#74 Ron (Link) on 2006-12-06 12:55 (Reply)

gruppo

#75 prodigiosamente ragazze gruppo (Link) on 2006-12-08 12:41 (Reply)

This is exactly what I was looking for. Thanks for this informative and resourceful site.


Lawk Salih

www.lawksalih.com

#76 Lawk Salih (Link) on 2006-12-13 15:56 (Reply)

Great article.


I've linked this in on my blog. If you want to reciprocate, you could place a link from your website to my Java/J2EE blog.

#77 eMule (Link) on 2006-12-14 06:07 (Reply)

Thanks for posting this information. Keep goin on! Greetz

#78 tom (Link) on 2006-12-15 08:33 (Reply)

some pretty good stuff you have there

Enjoyed browsing through the site. Keep up the good work. Greetings from Poland

#79 Pozycjonowanie (Link) on 2006-12-21 18:08 (Reply)

Very nice article

#80 goracalaska (Link) on 2006-12-25 18:13 (Reply)

Very nice article

#81 goracalaska (Link) on 2006-12-25 18:13 (Reply)

Thanks, great reading and because I'm learning (have to ;-)) this stuff quite useful.

#82 jimi server.met (Link) on 2006-12-28 05:05 (Reply)

Great and excellent article t’s realy helpful. Thanks again.

#83 Onlineshops (Link) on 2006-12-29 06:57 (Reply)

Hai,


Nice and Detailed Tutorial !


Thanks,

#84 projectsylpheed (Link) on 2006-12-29 19:28 (Reply)

Very interesting, but I don't understand why the 2 cases. Why not just use the load_page code and pass 3 arguments from the body onload. I would think that would make the function more generally useful.


I'm not complaining though, I didn't know about the case switch thing before so it's interesting to see it an action.

#84.1 jimi (Link) on 2007-01-19 09:07 (Reply)

simple and nice

#85 Mithun Sreedharan on 2007-01-03 06:13 (Reply)

I have been researching the advantages of Ajax all day. I can honestly say this is the best article I have come across. I have you bookmarked now and can't wait for more great coding tips!


Thanks,

Daniel

#86 Daniel (Link) on 2007-01-06 23:14 (Reply)

great work, many thanx!!!

#87 Daniel (Link) on 2007-01-07 15:57 (Reply)

Very good ajax tutorial :-)

#88 Pink, Get the Party Started (Link) on 2007-01-10 17:47 (Reply)

very nice site...

#89 Thermage (Link) on 2007-01-17 14:23 (Reply)

very good site...

#90 Thermage (Link) on 2007-01-18 10:44 (Reply)

good resource, I have now added it on www.ajaxshack.com

#91 Brian (Link) on 2007-01-19 06:03 (Reply)

I have been looking for stuff for understanding ajax for some time. I must say this is best article I have come across so far


Thanks

Rajendra

#92 Rajendra Patki on 2007-01-21 06:27 (Reply)

Wow...great tutorial

I didn't know that there is a way of pure clientside Ajax, i always thought you need an serverside technologie too.


thx

#93 Will on 2007-01-23 04:32 (Reply)

Fantastic article covering some points I really needed some good usability info for.

Best regards from Poland

#94 Tanie linie lotnicze (Link) on 2007-01-24 05:31 (Reply)

great site

#95 Tanie linie lotnicze (Link) on 2007-01-25 07:18 (Reply)

Fantastic article covering some points I really needed some good usability info for.

#96 Tanie linie lotnicze (Link) on 2007-01-27 04:42 (Reply)

nice article, thank you!

#97 John (Link) on 2007-01-28 21:11 (Reply)

Your home page is very friendly and rich with information!

#98 U.Cysterna (Link) on 2007-01-30 11:25 (Reply)

I'm looking forward to another great articles.

#99 opisy gg (Link) on 2007-01-30 14:03 (Reply)

Nice and Detailed Tutorial !!!

#100 Programy (Link) on 2007-02-05 10:30 (Reply)

great resource

#101 Tanie linie lotnicze (Link) on 2007-02-08 04:23 (Reply)

Thanks for showing methods and its description for each in that simple manner.

#102 Andy James (Link) on 2007-02-08 09:36 (Reply)

Very good and great site with very good look and perfect information...i like it.

#103 Thermage Hamburg (Link) on 2007-02-08 13:41 (Reply)

I look forward to using this as my browsers' start page.

#104 Thermage Hamburg (Link) on 2007-02-08 14:29 (Reply)

we would like to use this gallery effect on our http://www.sgdnetworks.com website, do we need to get any copy right permission from the author? please help us in this regard.

#105 web development (Link) on 2007-02-09 22:59 (Reply)

Thanks I have added this to several of my sites all ready. I am getting great feedback from my visitors!


Thanks

#106 Daniel (Link) on 2007-02-09 23:28 (Reply)

can u tell how to desing the Webpage for online jobportal?

#107 EmmanuelRajkumar on 2007-02-12 03:29 (Reply)

Very much helpful Tutorial ! Thanks.

#108 Asmita on 2007-06-07 00:24 (Reply)

Great and excellent article t’s realy helpful. Thanks again.

#109 Dresik (Link) on 2007-06-08 05:36 (Reply)

Wo whats a good article shown


I am new in ajax but during reading this article i feel like dive in ajax jungle. You cleared all initial abstacle of ajax jungle. i am really appriciating your article.


Thanks a lots.

#110 Uday Shankar Prasad on 2007-06-09 01:29 (Reply)

Thats a nice tutorial, brilliantly explaining all the steps involved.

Thanks,

Akhil

#111 Akhil on 2007-06-12 04:13 (Reply)

very good and nice site.....Thanks

#112 Tapeten (Link) on 2007-06-16 03:32 (Reply)

I am new to AJAX. It was very easy and simple to follow.



Thanks


Keep up the good work.

#113 Suresh S on 2007-06-16 07:51 (Reply)

Good job really


laptopy & komputery jelenia góra

#114 komputery jelenia góra (Link) on 2007-06-18 15:14 (Reply)

Fantastic article covering some points I really needed some good usability info for.

Best regards from Poland

#115 emule (Link) on 2007-06-19 07:45 (Reply)

Very interesting, but I don't understand why the 2 cases. Why not just use the load_page code and pass 3 arguments from the body onload. :-)


Cu

#116 polskie forum emule (Link) on 2007-06-19 07:51 (Reply)

Hi, can somebody please help me how to deploy and test the examples?


Thanks a lot.

#117 newbie on 2007-06-21 02:57 (Reply)

Thanks for this very good article … Can i translate this and insert on my site in Poland? … Thanks

#118 Suplementy (Link) on 2007-06-26 13:48 (Reply)

Fantastic article covering some points I really needed. Thanks

#119 dobre miasto (Link) on 2007-06-26 14:02 (Reply)

nice site, very helpeful for me.

good work

#120 free sms (Link) on 2007-06-27 17:34 (Reply)

http://dhtmlnirvana.com/

http://dhtmlnirvana.com/svg/index.htm

http://dhtmlnirvana.com/ajax/ajax_tutorial/

http://dhtmlnirvana.com/alchemy/externalload.htm

http://dhtmlnirvana.com/program/permalink/ajax_history.html

http://dhtmlnirvana.com/content/dhtml.html

http://dhtmlnirvana.com/ajax/gallery/ajaxgallery.html

http://dhtmlnirvana.com/spiritual/2005/05/07/uber-dream-analysis/

http://dhtmlnirvana.com/content/widgets/killautolink/index.html

http://dhtmlnirvana.com/oldalchemy/externalload.htm

http://dhtmlnirvana.com/permalink/wpfe.html

http://dhtmlnirvana.com/svg/intro1.htm

http://dhtmlnirvana.com/program/permalink/ajax_tutorial1.html

http://dhtmlnirvana.com/content/blog.html

http://dhtmlnirvana.com/svg/

http://dhtmlnirvana.com/program/

http://dhtmlnirvana.com/spiritual/

http://dhtmlnirvana.com/alchemy/preload.htm