View Full Version : Learning AJAX....

07-05-07, 05:17 AM
Well, I have been curious about how the whole "how to update pages without refreshing"... I googled AJAX (I've seen many jobs wanting AJAX experience) out of curiosity to find that AJAX is responsible for this ability. I went ahead and found a simple tutorial on how it works with an elemtary script. So I fired up my WAMP (my LAMP is unavailable) and gave it a shot.

Here is the script: http://ngz2.ath.cx:88/ajax/form.html

I setup the database and it works as it should... Well, it didn't take long to see the possibilities here, unfortunately, I know next to nothing about JS.

My question is, how can I use this type of script to update regular text? Say like inside a div layer or in a table, stuff like that.

07-05-07, 09:02 AM
Good start!

You can change div or span tags by either name or ID I believe. Keep reading. AJAX is great. Pickup the AJAX Bible or Wrox book on the topic.

07-05-07, 02:19 PM
Good idea. This 'primitive' example is usually how I learn, study it and understanding the code processes involved. Thats how I learned OOP in PHP. I'll check out some books. Thanks :D

07-05-07, 04:49 PM
Ajax is a nice tool to use if you want to make your pages application like. There are several ways to update content on a page. Most of which require linking to HTML DOM elements by using ID attributes or passing the object itself into a javascript function call. You can use the innerHTML attribute to actually edit the entire content within almost any dom element. Likewise, you can use several DOM methods to create and edit Dom elements on the fly and can retain references to the newly created elements.

A simple example:

// item is passed in as a DOM object reference
function something(item){

item.innerHTML = "<div>html between this element was changed including adding a div</div>";


// this method adds a DOM child element to the element passed in
// usually the element passed into the function is with the keyword "this"
// ie: onClick="domMethod(this);"
function domMethod(item){

// create div element
var div = document.createElement("div");
// makes the id attribute of the new element "newDiv"
div.id = 'newDiv';
// changes all the html between the new div element
div.innerHTML = "html between this element was changed";
// append element to item


// sometimes you want to pass into the function an ID of a DOM element instead of a reference
function domMethod(itemID){

// using the element ID, a reference to the element is made
var item = document.getElementById(itemID);
item.innerHTML = "html between this element was changed";

Once you link to an object using the DOM, you can manipulate it in various ways using javascript and other client side languages. Combined with CSS and PHP, it opens up many possibilities. A lot of it can be overwhelming when you first start out, but luckily, several javascript libararies are available to use. I'm looking at Dojo for a future web application I'm doing. Not only does it have built in AJAX functionality, but it's packed with nice javascript elements that can speed up development. Check out some of the demos. ;)


There are others which are easy enough to find. You'll also find that creating a fully AJAX enabled website means you're going to come across issues with using the back, refresh, and bookmarking those pages. You're going to have to find alternative ways to use those old style web page functions.

07-06-07, 02:15 AM
Awesome, I'll have to mess with this tomorrow since I got the day off. Gives me plenty to play with.thanks for the advice :D