UseStrict Consulting

Professional IT Solutions & Training

Category Archives: Ajax

Introduction to Ajax

In this article, I provide an explanation of Ajax with a historical introduction. If you are eager to start seeing the code, please scroll down.

 

What’s 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 not 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[i];

		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: