Beginners AJAX Tutorial Part 2

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

Ajax Avenue Street Sign

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:
  1. if (window.XMLHttpRequest) {
  2.         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:
  1. if (window.XMLHttpRequest) {
  2.         XMLHttpRequestObject = new XMLHttpRequest();
  3.       } else if (window.ActiveXObject) {
  4.         XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  5.       }

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:
  2.   <head>
  3.     <title>FiddyP Ajax Tutorial Part 2 - Test object creation</title>
  4.  
  5.     <script language = "javascript">
  6.       var XMLHttpRequestObject = false;
  7.  
  8.       if (window.XMLHttpRequest) {
  9.         XMLHttpRequestObject = new XMLHttpRequest();
  10.       } else if (window.ActiveXObject) {
  11.         XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  12.       }
  13.  
  14.       if (XMLHttpRequestObject) {
  15.         document.write("<h1>Hello World! I Created an Object!</h1>");
  16.       }
  17.     </script>
  18.   </head>
  19.  
  21.  
  22.   </body>
  23. </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 1

Posted by Andy Bailey at 20 November, 2007, 11:33 am
19

Ajax Avenue Street Sign

This is the first in a series of tutorials about AJAX and how to use it on your site. Each new tutorial will take the subject a little bit further and hopefully, it wont be long before you start creating your own AJAX applications for your own site and revel in the wonderness of geekdom :-)

It seems more and more people want to use this type of programming method to bling their blog up to 2.0 level including me!, so come along as I traverse the wonders of AJAX. I am learning this as I go so it's not really fair to call it a tutorial series but you get the idea!

First off, we need to know what AJAX is...

Part 1.
AJAX Introduction.

The first thing to know about AJAX is that in fact, it isn't actually a programming language. It's just a way of using other languages together to create an 'application' style of interface for a web page.

The word 'AJAX' comes from a contraction of 'Asynchronous', 'Javascript', 'And', 'XML', it's purpose is to allow a web page to send and receive small bits of data 'asynchronously' while the user is still on the page and change the contents of parts of the page with the data received.

It could be something simple like automatically updating a shipping charge after a customer enters their postal code in a form or it could be something more familiar like the Google auto-guess/complete that happens when you start typing in a search term.
Google labs auto guess
As soon as you start typing something in the search box, the javascript on the page detects each key press and sends it to the server which then sends back any terms that have the same letters starting the term, as you continue to type it shows a narrowing set of options and how many results they each have. You can try it out yourself at http://labs.google.com/suggest

Here are some other examples of sites using AJAX.

The important thing to remember is that AJAX is the term used when the page needs to send and/or receive data to the server asynchronously, whereas a sliding DIV or a dynamic menu is just Javascript or DHTML.

The difference between normal and AJAX web applications

A traditional web application(using a shopping cart form example)
Traditional web application diagram
.. a user enters their shipping details and clicks submit, the page sends the form details and reloads again showing the shipping charge.

AJAX web application
Ajax web application diagram
.. a user enters their postal code and the server automatically calculates the shipping charge and returns it to the original page, all without the user having to wait for another page load. Much more efficient!

How does it do it?

It's the work of the devil! that's how! :-)
Seriously though, javascript, css and html are used on the browser side and a scripting language is used on the server. The scripting language can be PHP, perl, asp or any kind of get-process-return language that runs on a server.

Really, javascript is the boss for all the actions as it is responsible for orchestrating everything on the client side. ie:
The javascript detects the click, text entry or other action which initiates a call to the script on the server which responds with the data requested, the javascript receives the data and by using css and html it is able to update the page, all without the user having to wait for a page load as with traditional web pages.

Take a look at this diagram:
AJAX process

  1. The javascript detects an event and requests information from the server
  2. The server accepts the request, processes it and returns it's own data
  3. The javascript accepts the data and uses CSS and HTML to put it on the page

Data types

Probably the best data type used is XML, simply because it is a standard capable of representing complex data that would otherwise be difficult to represent. But, that doesn't mean that XML is the only type of data that can be used. You could use plain text if there was only a small amount of simple data to be sent like a name or value.

You could also use something called JSON (JavaScript Object Notation) but that's for a later tutorial (and for geekier types!)

The Server role

It's important to remember that AJAX is entirely dependent on a server program accepting requests and responding to them in some way. You can't just make a web page with some Javascript on it and have an AJAX application, you need the javascript to send and receive information and do something with it.

You don't have to use the same server as the web page to do the processing, you could just as easily use a script on a remote server.
Places like Google, Flickr and others allow people to use an API (Application Programming Interface) to request information from one of their scripts on their server. Flickr for example could send back information listing a users photo locations so the AJAX page could display them.

Simply, whatever the server or javascript does, it all comes down to ; request send, request received, data processed, data sent back, data used.

Ok! that's the introduction dealt with, I hope that clears up exactly what AJAX is for you!

On the next part of this series, we will get into the guts of an AJAX application and show you just how it works and how you can change it yourself. For now, here is an example of what you should be able to do after a couple more tutorials..

It detects a click on the pink area and sends a request to a PHP script that reads a text file containing a number, adds one to it, saves it and sends back the number to be displayed on the page. Try it yourself, it may take a couple of seconds to show the number (this is just an example, later we will add a nice AJAX'y type of wait animation). I wonder how high this number will/can go? :-)

Practical Example

  • Click Me! clicks so far :

Come back next week for the second part of the series where we will get into the innards of AJAX and show you just whats needed to make the traditional 'hello world' program....

Popularity: 7% [?]

Category : Code | ajax

Coming soon at FiddyP..

Posted by Andy Bailey at 5 November, 2007, 8:30 am
15

blog journeyI have a notebook that I write ideas down on that I carry around with me for when ideas pop into my head and it's got quite a few for FiddyP. One of the first things I wanted was a unique design, I was going to make my own but I scored some commercial projects recently and so I couldn't put the time in to do it myself. I now have a designer working on the project and I can't wait to see the results!

Gospel Rhys
Recently, I stumbled on a blog called "The gospel according to Rhys" (maker of the Technorati tag generator). I really liked the style of the blog and his writing. He's got a good sense of humour and his posts about his trip to Europe were hilarious! I noticed that he had advertising available on his site and jumped in to get a whole years worth!

I've also asked him if he could bring some of his humour over to here now and again, he's going to think about something to post about and maybe he can do a guest post here in the near future. If you get a chance, go and visit his site and take a look around. He's Wales' premier blogger!

AntibarbieAnother fine blogger who I have approached about posting here is someone you might know due to her excellent talent for short stories (check out two amazing 55 word shorts here). AntiBarbie is her pen name, she has had a lively following on her blog at Antibarbie.net and I think having a monthly short story here would be a great feature!

I'd like to get some more guest posts here when the new theme goes live and start participating in some more photography memes. I'd love to get some pictures that are as high quality as Opal's Flower and Bee shots at Vegan Momma and I'd like to improve CommentLuv even more so it can act as a plugin on the sidebar showing the last posts of recent commenters. Like the blogrush widget but just for people that comment on the blog, it will also get it's own options page to allow people the choice of what is used for the text of the plugin in the comment and below it.

For my posts, I have had a wonderful time with a couple of AJAX books recently and I've come up with some super easy tutorials that can run for a few weeks for each stage and gradually take you from 'hello world' to a working program to include on your blog.

More contests will come this way too, I'm trying to source some good prizes for the future. I prefer prizes to cash. What sort of prizes would you like to see here? Technology or something else like vouchers for online stores...?

Time to open the comments... what would you like to see here?

Popularity: 3% [?]

Category : Blog News

How to add a shopping cart to Wordpress

Posted by Andy Bailey at 25 October, 2007, 2:45 pm
71

Shopping cartHere's a great way to add a shopping cart to your Wordpress blog so you can sell products directly from your site without the user having to go to an external site. If you offer products for sale on your blog, it's much nicer for your customers to stay on the same site that they see the products on.

This plugin is simple and powerful, it uses AJAX for some parts of it and it seems to work just dandily on the blog I have installed it on. Here's how you do it...

[expert instructions]
Download plugin, upload to plugins directory, activate it.
Visit the ecommerce tab and set options for country and currency, edit categories, edit checkout options, edit gateway options, add products.
sell!
[/ expert instructions]

[Hand hold instructions]
First, get yourself a copy of the WP Shopping Cart plugin and upload it to your plugins directory, go to you plugins page and activate it :

wp shopping cart plugin activate
continue

Popularity: 8% [?]

Category : Business Software | Making / Made Money | ecommerce

easy ecommerce, AJAX and professional designs

Posted by Andy Bailey at 24 October, 2007, 9:55 am
12

Shopping cartWow! what a busy week I have just had, I have barely been able to keep up with comments here and I've sorely neglected my blogging brethren by not popping in for a cup of tea, sorry about that everyone but I've been busy with some commercial projects for work which turned out to be great fun!

I have been working on some ecommerce sites and CMS scripts to get a 'proof of concept' site up for a client and it went really well, one of the proofs turned out so well that I think it may become the one that we use! (that'll save some time when it comes to launch day!)

Part of the ecommerce research I did to see what would work led me to trying lots of different things, one of them being a simple wordpress theme with an added shopping cart which turned out to be a very simple and cheap solution. It worked really well and was up and running in a couple of hours so that got me thinking about writing a series of posts later explaining how to sell products direct from your blog with the minimum amount of fuss.

AJAX Construciton kitI also bought a book about AJAX called "The AJAX construction kit". I bought it after browsing through it's pages in the local book shop, a nice place where you can sit down and read through any of the books on display before you buy.... or do as I do and use the free wifi provided to get my PDA online and type in the ISBN number on Amazon and then order it for 1/3 of the price of the shop! (teehee)

So far it's been a great read and I particularly like the way it teaches you how to do things with the construction kit rather than try and teach you every single nut and bolt of Javascript and PHP. It's a much better way to learn how to get AJAX scripts running on your site and I can see some very useful plugins coming this way when I've finished the book. In fact, a way to get me to read more will be to share what I learn with a series of AJAX tutorials here!

I am also considering getting a professional redesign done for here, I think a few hundred dollars will get me a fine looking site. I'm not even sure what I want yet and I had to abandon my idea of doing it all myself since the new work projects came in. Anyone out there use a professional designer and could recommend them?

Popularity: 3% [?]

Category : Blog News

Animated DIV slide

Posted by Andy Bailey at 9 September, 2007, 12:36 pm
0

I've just been playing with some javascript to slide open a DIV tag, it's really useful for my HelloStumbler plugin because it waits until the page is loaded and if the surfer came from Stumbleupon, it slides down a small DIV at the beginning of the post saying hello and requesting a thumbs up.
See the slide happen

Pretty cool eh? lol, It took a fair bit of fiddling about so I'll see if I can update HelloStumbler to take all the pain out of it.

I learned it all at Harry Maugans blog, you can see the whole javascript here: Sliding/Collapsing Div

I noticed a HUGE spike in traffic last night for the Hide a rar file in a jpeg post, thanks to those whole gave me a thumbs up!

edit: I've also added a bit to detect if the surfer came via a Google search and display that instead. I might develop this a bit further and see what other detections I can put in there. That should be pretty easy, the tough bit comes when I want to make it into a configurable plugin easy enough to use for new bloggers!

Try this link to a google search for Hello Stumbler, click the 1st one down (or maybe lower by the time you read this) to come to a post here and you can see the google detection bit kick in when the page has fully loaded. yey! :-)




Popularity: 8% [?]

Category : Blog News | Code | Wordpress
Previous Page
7 online now
the most online was 176
elottery magnetic Sponsoring
Sponsors
available ad space available ad space available ad space available ad space available ad space available ad space