Ajax without the X: Asynchronous dynamic content with JavaScript
On another site, I read an article on ’simple’ Ajax interaction… but it wasn’t quite so simple. Working with XML can be a pain in the butt for folks who have no experience with parsing XML. I’ve done quite a few sites with very complex dynamic content schemes and avoided XML by utilizing HTTP Requests and passing the content from the target page’s innerHTML to the local page. I learned this method from the book Professional Ajax.
I’m a bit of a hacker, so I’m sure I’ll get some feedback from a bunch of pro developers on why this is a bad idea or how it could be done easier. However, I have to admit that I have had NO problems doing this! I utilize cross-browser HTTPRequest scripts. In the example below I use the Google Map API built-in HTTPRequest. On other sites, I utilize zxml.js, a nice portable script written by the writers of Professional Ajax.
A huge advantage to the method I’m using is the ability to truly segment out every chunk of your application in its own neat, tidy script. This method can also be used with any server-side language and with or without database interaction. It’s easy to troubleshoot and simple to implement.
Here’s an example:
- I have a div id=”dialogue” on my page and the style set to hidden:
<div id="dialogue" style="visibility:hidden"></div>
- The div is a popup dialogue that I want to use for many instances, perhaps to add, edit, delete, search results, etc. The dialogue div is initially loaded with CSS and hidden:
#dialogue {
width:600px;
height:340px;
position:absolute;
top:100px; left:100px;
z-index:99;
background-color: #ccc;
margin: 10px;
padding: 10px;
} - To open the div and dynamically load the content from another subpage hidden in my site, I just use a simple Javascript function:
function openDiv(what,i,action) {
//Uses Google Maps API Http Request
var request = GXmlHttp.create();
var obj = document.getElementById("dialogue");
request.open("GET","get"+what+".php?id="+i+"&action="+action, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
obj.innerHTML=request.responseText;
obj.style.visibility = "visible";
}
}
request.send(null);
} - Now I can put links throughout my page that allow me to call the content to the dialogue. Examples:
To bring up my Admin screen, I have a page called “getAdmin.php”, the link:
<a href="javascript:openDiv(’Admin’,0);" title="Open Admin">Admin</a>
To open up an Edit screen for a specific record, I have a page called getEdit.php and I pass the id:
<a href="javascript:openDiv(’Edit’,1,’edit’);" title="Edit Record 1">Edit</a>
If I want to submit record 1 and save it, I can simply build a form that passes the action as ’save’. My response page then knows to save the record that I just edited.
I hope this makes sense! I use a similar approach with Payraise Calculator. I load the results of the page from getPayraise.php… you can even see the page here where I pull the content from. Nice and simple! As well, if I wanted, I could expand this out and use a widget or third party site to interact with it.
