jQuery: AjaxRequest.js has been updated!

Posted on April 11, 2012 by Jimmy K. in Articles, Resources.

Ajax lets you make HTTP requests without having to reload the entire page and can be implemented in a variety of ways to improve the user experience. The most abundant use of Ajax that I’ve noticed is it’s use in chat applications. There is a method of creating Ajax requests using JavaScript alone, but the jQuery library has done an excellent job of wrapping it up and making it very simple to implement. I’ve gone one step further and packaged a basic Ajax request class.

A working example of this class can be found here. You can download the latest version of this class from the END[SEVEN] Cloud.

If you would like to see a more practical example of the AjaxRequest.js class in action, just leave a comment on this article because the commenting system is actually built on it. When you submit the form, you’ll notice that only a portion of the page is reloaded, not the entire page. Go ahead and give it a try!

Change Log

Changed portions of JavaScript to jQuery.
Changed $sRequestVars from a string to $oRequestVars, an object.
Added functionality to store and retrieve loaded data without using an HTML element.
Added .done() and .fail() listeners to detect errors.
Created an improved method of triggering callback functions.

Onward, to the code!

Below is the entire source code for the AjaxRequest.js class.


   /**
	*
	*  Class Name: AjaxRequest
	*  Author: Jimmy K.
	*  Website: http://www.endseven.net/
	*  Version: 1.1
	*
	*  I wrote this class for convenience when programming my projects. If you
	*  disagree with any of it's contents, don't use it. ;)
	*
	*/

	/* the constructor for this object. */
	function AjaxRequest() {

		this.$sDefaultLoadingHTML = "Loading, please wait...";
		this.$sLoadingHTML = null; // the html to display while the request is loading..
		this.$sErrorHTML = null; // the html to display if an error occurs..

		this.$sLoadedData = ""; // data received after a request..
		this.$sProtocol = "POST"; // the protocol to use, examples: [get, post]..
		this.$sRequestURL = ""; // the url to load..
		this.$oRequestVars = ""; // any variables to pass..

		/* execute the request. */
		this.jExecuteRequest = function($oTargetElement, $oLoadingElement, $sCallbackFunction) {

			var $iCallbackTimeout = -1; // reset the callback timeout..

			if ($oLoadingElement !== null) {
				$oLoadingElement.innerHTML = this.$sLoadingHTML !== null ? this.$sLoadingHTML : this.$sDefaultLoadingHTML; // update the loading element..
			}

			// execute the request..
			var $oRequest = $.ajax({ callback: this, targetElement: $oTargetElement, loadingElement: $oLoadingElement, type: this.$sProtocol, url: this.$sRequestURL, data: this.$oRequestVars });

			// listen for the request to complete..
			$oRequest.done(function($oData) {

				this.callback.$sLoadedData = $oData; // store the loaded data..

				if (this.loadingElement !== null) {
					this.loadingElement.innerHTML = ""; // update the loading element..
				}

				if (this.targetElement !== null) {
					this.targetElement.innerHTML = $oData; // update the target..
				}

				if ($sCallbackFunction !== null) {
					clearTimeout($iCallbackTimeout); $iCallbackTimeout = setTimeout($sCallbackFunction, 100); // set the callback timeout..
				}

			});

			// listen for the request to fail..
			$oRequest.fail(function($oJQXHR, $oData) {

				if (this.loadingElement !== null && this.callback.$sErrorHTML !== null) {
					this.loadingElement.innerHTML = this.callback.$sErrorHTML; // update the loading element..
				}

			});

		};

	}

How to use this class:

<script type="text/javascript">

	/* execute an ajax request. */
	function jAjaxRequestHandler($sFlag, $oArguments) {

		if ($sFlag == "EXAMPLE") {

			var $oTargetElement = document.getElementById("TargetElement");
			var $oAjaxRequest = new AjaxRequest();

			$oAjaxRequest.$sLoadingHTML = "Loading, please wait!";
			$oAjaxRequest.$sErrorHTML = "Unable to load content. :(";
			$oAjaxRequest.$sRequestURL = "./content.php";
			$oAjaxRequest.$oRequestVars = { Variable1: $oArguments.Variable1, Variable2: $oArguments.Variable2 };
			$oAjaxRequest.jExecuteRequest($oTargetElement, $oTargetElement, function() { eAjaxRequestCallback($sFlag, $oArguments); });

		}

	}

	/* handle ajax request callbacks. */
	function eAjaxRequestCallback($sFlag, $oArguments) {

		if ($sFlag == "EXAMPLE") {
			// do something fancy when a request is complete..
		} else if ($sFlag == "SOMETHING_ELSE") {
			// do something fancy when a request is complete..
		}

	}

	window.onload = function() {

		// execute an example request..
		jAjaxRequestHandler("EXAMPLE", { Variable1: "Ajax", Variable2: "Greedo shot first!" });

	}

</script>

Tags: , , ,

 

Jimmy K. is a Chicago-based web developer who actively posts tutorials, articles and insights on his web development blog to help other programmers and developers.

You can find Jimmy on Google+ and Twitter.

 
 
 
 
 

If you like this, please leave a comment.

Name (required)
Email Address (required)
Website
Comments: