So, you've heard about this thing called AJAX and want to know more about it, eh? Well, I'm sure your first question is something like
"What the hell is AJAX, exactly?"
AJAX stands for Asynchronous Javascript And Xml. It’s a big, fancy, confusing word that really doesn’t mean a whole lot. It’s not a new programming language and there’s nothing new to install. All you need is javaScript, CSS and the server-side language of your choice.
The whole point of AJAX is to do server side stuff without having to reload the page you’re on.
Example:
Problem:
You have a list of users. Each user has a set of three checkboxes (permissions) for each user. You want to check or uncheck the boxes to set permissions. You need the permission to save as soon as you check/uncheck the box. You do not want to have to wait for the page to reload after every box click and then have to scroll down to where you were.
Solution:
You set an “onchange” event for each checkbox. When you change a checkbox, it calls the Save page in a separate process (asynchronously). The save page goes off and does its own thing, while you’re free to keep using the userlist page, not having to worry about it reloading on you.
Most AJAX tutorials suggest using some crazy ActiveX control or the new fangled httpRequest object. I’ve tried using all that and it never really works like I want it to. Recently, I’ve discovered that you can achieve the same effect using our good friend the iFrame.
In the past, iFrames were given lackluster support by browsers, so I always kind of avoided them. That was years ago, however. IE6+ and Firefox handle them just fine so I say use them.
IFrames act just like regular frames, except that they can be placed anywhere on a web page. And they can be styled using CSS. So, you can make them invisible. It’s a lot like magic.
I would imagine that this technique is not new, but since I just discovered its awesomeness, I’m going to refer to this as BenJAX, even though it should probably be called something along the lines of “iFrames that have been hacked to shit to emulate AJAX”.
The above example is very simple and only requires one-way communication. Up until today, I figured that would just be a (serious) limitation for BenJAX. This is definitely not the case.
Better Example:
Problem:
You have a text box that is going to be linked to a list journal names. You want to allow users to enter new names, but you also would like to guide them in order to avoid duplicates. It would be really nice if you could have them start typing something and a list pops up of all the journal names that start with what they were typing. (e.g. if they started typing “bal”, the list would pop up with “balls, balloons, balance, etc”). When they click on one of the items in the list, the text box should be populated with their selection.
Solution:
Add an “onKeyUp” event to the text box. Every time a user presses a key, a javascript function takes what’s in the text box and passes it a “ProcessTextbox” page through an invisible iFrame. The ProcessTextbox page returns a list of items for the user to select. Another Javascript function takes that information and sticks it into a list that the user can see and select from. Each item in that list has an “onClick” event that takes the item and puts it in the text box.
It’s a lot like magic. Unlike magic, I’m going to try to explain how I would do all that. Because I suck with .NET and you guys don’t know PHP, I’m just going to show you the javaScript. It’s going to be relatively simplified, but with any luck, it will get the point across.
You will need 2 different pages: a FormPage.aspx that will have your form with the text box and a ProcessTextbox.aspx page that will process the text box. The user is only going to see FormPage, but the meat of the processing will be done in ProcessTexbox. FormPage will utilize primarily client side scripting (javascript) while ProcessTextbox will be mostly server-side.
Here’s the code:
FormPage.aspx
<html>
<head>
<script type="text/javascript">
/*this function is called when a user presses a key in the textbox.
It calls ProcessTextbox.aspx with the query string search=searchText,
where searchText is the text in the textbox.
ProcessTextbox is processed on the server side and loads in the iFrame
named "magicFrame" where the user will never see it.
*/
callProcessTextbox = function (searchText)
{
frames["magicFrame"].location.href= "ProcessTextbox.aspx?search = "+searchText;
}
/* This function is called whenever the ProcessTextbox if finished loading in the magicFrame.
It takes the content of the "results" div from the ProcessTextbox and puts it in "resultList" div
in FormPage (this page).
The parameter frameContents is actually a reference to the window object of the magicFrame and can
pretty much be utilized the same way as the regular window object.
*/
magicFrameLoaded = function(frameContents)
{
document.getElementById("resultList").innerHTML = frameContents.document.getElementById("resultList").innerHTML;
}
/* This is called when user clicks on one of the items in the list. It takes that text and puts it into
the textbox.
*/
itemClick = function(itemText)
{
document.getElementById("journalTextBox").value = itemText;
}
</script>
</head>
<body>
...
<iFrame name="magicFrame" src="" style="display: none" ></iFrame>
<input type="text" onkeyup="callProcessTextbox(this.value)" id="journalTextBox" />
<div id="resultList"></div>
...
</body>
</html>
ProcessTextbox.aspx
The actual aspx/c# code could vary. It would be where you put the SQL Query and SQLServer call and process all the data. Example SQL Query might be: String Query = "SELECT * FROM [journal] WHERE [journalName] LIKE '%" + Response.QueryString["search"] + "%' "; In the end... assuming that the phrase "bal" was entered in the text box, the resulting html needs to look something like this:
<html>
<head>
<script type="text/javascript">
/* Called when this page is completely loaded. It simply passes the entire frame to
FormPage.aspx's magicFrameLoaded function
*/
window.onload= function()
{
parent.magicFrameLoaded(window);
}
</script>
</head>
<body>
<div id="resultList">
<ul>
<li onClick="itemClick(this.innerHTML)">balls</li>
<li onClick="itemClick(this.innerHTML)">balloons</li>
<li onClick="itemClick(this.innerHTML)">balance</li>
...
</ul>
</div>
</body>
</html>
Now, I have not tested this code. It's just an example. You'll need to tailor it to your specific needs. The processing page MUST have something like the window.onload function, or the FormPage won't know when it's loaded and won't know to get the resulting data.
IN THEORY, using AJAX, the process page is supposed to return some kind of XML structure. Then you use the javaScript to parse that XML and do stuff with it. That's why it's called Asynchronous Javascript and XML. Parsing an XML file isn't much more difficult than walking the DOM Tree, but I don't think it's essential for the kind of stuff we're doing. All we need to do is have the main page grab stuff from the iFrame with the processed page in it. I think it makes things easier to just use regular HTML in the processed page, letting the server-side script format all that good stuff.
I hope that made sense enough to help someone. I'm getting tired.
Until next time,
~~Ben
Wisdom Archive
- August 2008 (2)
- July 2008 (2)
- June 2008 (3)
- May 2008 (3)
- April 2008 (4)
- March 2008 (7)
- February 2008 (6)
- January 2008 (1)
- December 2007 (3)
- November 2007 (9)
- October 2007 (26)
- August 2007 (1)
- June 2007 (1)
- May 2007 (1)
- March 2007 (1)
- February 2007 (2)
- December 2006 (4)
- November 2006 (4)
- October 2006 (5)
- September 2006 (2)
- August 2006 (1)
Categories
- poonheads (22)
- music (17)
- comic (16)
- site news (12)
- coding (11)
- Classic Wisdom (10)
- video (10)
- I Love Music (9)
- javascript (9)
- photo (9)
- rant (8)
- tutorial (8)
- web design (8)
- hardware (7)
- hobby (7)
- mustaches (7)
- gear (6)
- horrifying (6)
- story time (6)
- earworm (5)
- food (5)
- art (4)
- software (4)
- Coding for Complete Noobs (3)
- movie (3)
- Captain Numbskull (2)
- Everyday Wisdom (2)
- beverage (2)
- knives (2)
- review (2)
- toys (1)
Thursday, November 8, 2007
BenJAX (a.k.a. Really Fucked Up Pretend AJAX)
Labels:
coding,
javascript,
tutorial,
web design