Beginners AJAX Tutorial Part 2

Posted by Andy Bailey at 3 December, 2007, 1:09 pm

This is part 2 of the AJAX Tutorial Series. You can see the Beginners AJAX Tutorial Part 1 here.

In this part, we will start you off with some very simple code just to show you how things get started. At the end of this tutorial you will have made your own 'hello world' AJAX script... (not a big deal I know, but you have to start somewhere!). I'll keep these tutorials bitesize and introduce a new command or concept on each tutorial to add to what has already been covered. Today, we start at the beginning with something that will be in all future scripts...

The XMLHttpRequest Object

The what?
The XMLHttpRequest object is at the heart of AJAX. It allows you to send and receive data with javascript without refreshing the page and works on all browsers (except, you guessed it! Internet Explorer). All you have to do is find out if the browser supports it with an 'if' statement in the javascript contained in the <head> part of the html page and then create a XMLHttpRequest object using the 'new' command;

PLAIN TEXT

JAVASCRIPT:

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();}

That would create a XMLHttpRequest object and store it in XMLHttpRequestObject.

But, what about Internet Explorer?.. We can't use XMLHttpRequest so we have to use an ActiveXObject. For us to do anything with an XMLHttpRequest and make sure it works on both IE and Firefox, we can add this to the javascript so we now have..

PLAIN TEXT

JAVASCRIPT:

if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

OK, that should cover us for making a XMLHttpRequest object, we can't do anything in this tutorial series without it so to be sure, lets just create the whole html document and test to see if it can make an object by adding another 'if' statement to output some text to the screen if the object creation was successful using the javascript command 'document.write()'.

PLAIN TEXT

HTML:

<html>
<head>
<title>FiddyP Ajax Tutorial Part 2 - Test object creation</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
if (XMLHttpRequestObject) {
document.write("<h1>Hello World! I Created an Object!</h1>");
}
</script>
</head>
<body>
</body>
</html>

You can click on the title of the code snippet above and see the plain text version, just copy this to your own file and save it as an HTML document or right click here and save it and test it. If it's working, it will display the message "hello world! I created an object!" in big letters.

YEY! we created a 'hello world' AJAX program!, I know it's not much use yet but this is the foundation for all future tutorials so even thought it's not that 'sexy' , it IS important to make sure we can create the object that will handle the data being sent to and received from a remote file.

We can get into the sexy ins and outs of using this on the next tutorial. Please come back again to see how we can use this to open a remote file and display it's contents on a HTML page without a reload...(ooh, I can't wait....)

Popularity: 6% [?]

Category : Code | ajax

Beginners AJAX Tutorial Series Part 4

Beginners AJAX Tutorial Series Part 5

Beginners AJAX Tutorial Series Part 3

Introducing AJAX CommentLuv

Spreading Coding luv

3 day lazy period is due to finish. grr

Beginners AJAX. Tutorial series. Part 1

Trackbacks & Pingbacks

Pingback by 13 Great Articles - December 07, 2007 | My lucky number 13 on December 7, 2007 @ 1:54 pm

Comments

jalaj (20 comments.) December 4, 2007

The second part came in 13 days… I had to read back the first part to get in sync.. anyhow revision always helps…

I don’t remember the Enable CommentLuv checkbox below the submit button. Is it so that earlier the page was fetched on server end and latest version uses client to do so.

jalaj’s last blog post..Int() and Val() in JavaScript

Andy Bailey December 4, 2007

Sorry Jalaj, I was so busy with work that I didn’t have time to put the next part up until yesterday!
i am giving CommentLuv a test for a few days on here before I release the new version. The checkbox was requested by someone who didn’t always want their comment to have a last blog post. Plus, it’s better to give people the choice. Also, I have added another routine that should make it more compatible with hosting that doesn’t allow CURL commands. I’ll post about it this week…
thanks for visiting!

Agen Iklan (1 comments.) December 4, 2007

Collect it in my binder done. Now, I can say hello to Ajax.
Still waiting for next lesson, guru.

Andy Bailey December 4, 2007

Agen Iklan » I have just written part 3 of the series and saved it ready for publishing next week so there wont be such a long wait this time!
thanks for visiting Agen, I hope you get some use out of these tutorials..

witchypoo (37 comments.) December 4, 2007

Hi, Andy, did you see yourself on my blogroll?
You’ve been an amazing resource for my php neediness.
I’m a leeetle nervous about implementing the final code, but it isn’t anything that a Ctrl-z wouldn’t cure anyway.
Thanks again.

witchypoo’s last blog post..Working with the police, part one

Andy Bailey December 4, 2007

I saw my site thumbnail there thanks!
you should be able to run the code on your own PC, no need to upload it anywhere!

Opal Tribble (35 comments.) December 5, 2007

Yes a part two! I’m printing this and will be perusing it while I’m in the sauna this morning.

Opal Tribble’s last blog post..Guest Posting & Exercise From a Vegan Perspective

Andy Bailey December 5, 2007

ahhh, sauna and source code, a hot bit of AJAX.. Yum

The next 2 parts will definitely be on time, I have them both saved as drafts ready to publish, they’re still not ‘look-at-what-a-cool-ajax-script-I-wrote’ yet but I think it’s important to get the beginning stuff done a little bit at a time.. by part 6 you’ll be able to put a useful script on a page and call it your own..

Anish R Nair January 2, 2008

I have to use two ajax functions in an asp page not in asp.net, how i hve to create and use it

Jeff February 21, 2008

It allows you to send and receive data with javascript without
refreshing the page and works on all browsers
(except, you guessed it! Internet Explorer)

Huh? The XMLHttpRequest was written by Microsoft… why wouldn’t it work in IE?

Andy Bailey February 21, 2008

just using window.XMLHttpRequest wont work on internet explorer for this type of function, that’s why there is ActiveXObject(”Microsoft.XMLHTTP”) in there.
it was however, originally developed by Microsoft as part of Outlook Web Access 2000, as a server side API call but Mozilla incorporated the first compatible native implementation of XMLHttpRequest in Mozilla 1.0 , IE needs to use activex to achieve the same functionality, IE also has issues with caching dynamic pages so even though it was originally written by microsoft, they don’t use it well in IE (coz it’s crap)

happy now?

11 online now
the most online was 176