View Single Post
Old 07-05-07, 04:49 PM   #4
fivefeet8
Ngemu Mod
 
Join Date: Jul 2003
Location: Fresno, CA
Posts: 1,886
Default Re: Learning AJAX....

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:
Code:
// 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
  item.appendChild(div);
  
}

// 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.

http://dojotoolkit.org/

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.
__________________
[i7 2600k @4.4ghertz][2x4 GB DDR3 1600][EVGA GTX570 1.280GB SC][EVGA GTX460 physx][Asrock Extreme7 Gen3 Z68][2xSeagate 160 Gb SATA HD raid0][Seagate 250 GB SATA2 HD][Sony Bravia 40' 1080p LCD HDTV][NEC 3520a DVD+-DLw][Windows 7 Ultimate x64][Rosewill 1000w]
fivefeet8 is offline   Reply With Quote