Category Archives: Ajax

Introduction to Ajax

In this article, I provide an explanation of Ajax with a historical introduction and WITHOUT the use of any frameworks such as jQuery. If you are eager to start seeing the code, please scroll down.

 

What is Ajax?

Ajax stands for Asynchronous Javascript And XML. It’s a way to call back-end scripts asynchronously – that is, without impacting user experience/flow. Basically, you don’t even see the cursor become an hourglass or whatever other “waiting/processing” icon your system uses. It’s not a language, but a technique. As for back-end scripts, you can use whatever you feel more comfortable with: PHP, Perl, Java, JSP, Shell, C, etc. The way to choose which technology to use as back-end is outside the scope of this article.

 Historical approach for calling back-end apps

Throughout web-development history, the very first way used to achieve back-end processing followed by front-end display was to create a form and set the back-end script as the action to that form. Upon submission, the form fields would be sent to the back-end script as a series of special environment variables, which would then be handled by the programmed logic. The back-end output would be displayed on the screen (either the same page/frame or a different page/frame, depending on the target attribute of the form).

The catch 22 of this approach is that if you want to present another form after processing, that form must be produced by the back-end script, which leads to maintenance mayhem – to add or remove a field, you have to do so in both the original HTML and in the HTML of the back-end script.

Continue Reading…

Ajax: Form fields into URL query string

Here’s a quickie for you Ajax coders who need a function to parse your form fields into a URL query string. It handles input fields (text, hidden, whatever), radio and checkbox elements, and single/multiple select menus. Just make sure that all your form fields have IDs. Multiple choice SELECTs get grouped by pipes (|). Update:Modified multiple-choice SELECTs to work like real GETs.

function build_post_string(frm) {
	
	var poststr;
	var poststr_array = [];
	
	if (!frm.id) {
		// assume it's a string. get the form object
		frm = document.getElementById(frm);
	}
	
	for (i=0;i<frm.elements.length;i++){

		var elem = frm.elements;
		
		if (!elem.id) {
			// skip any fields that don't have IDs
			continue;	
		}
		
		if (elem.type == 'radio' || elem.type == 'checkbox') {
			// only grab radio buttons and checkboxes that are checked
			if (!elem.checked) {
				continue;	
			}
		}
		
		
		// get select values
		if (elem.nodeName.match(/SELECT/i) && elem.multiple) {
			//var sel = elem;
			var sel_array = new Array();

			for (var o=0;o<elem.options.length;o++) {
				
				if (elem.options[o].selected) {
					sel_array[sel_array.length] = elem.id+"="+elem.options[o].value;	
				}
			}
			
			var sel_str = sel_array.join('&');
			
			// build key/value pairs for SELECTs
			poststr_array[poststr_array.length] = sel_str;
		}
		else if (elem.nodeName.match(/SELECT/i)) {
			poststr_array[poststr_array.length] = elem.id+'='+elem.options[elem.selectedIndex].value;
		}
		else {
			// build key/value pairs for everything else
			poststr_array[poststr_array.length] = elem.id+"="+elem.value;
		}
		
		
	}

	// build poststr
	poststr = poststr_array.join("&");
	return poststr;
	
}

 

Book Suggestions:

 

Ajax Eye Candy: Create throbbers (“Wait” icons) on the fly

This is by far the coolest and handiest website I’ve come across in a very long time. Get your very own Wait icons for Ajax implementations on the fly.

http://www.ajaxload.info

It’s not mine, and I don’t know the author… but click an ad there if you like it. The guy deserves it.