AJAX Libraries: JSON and DOJO:

 

What Is JSON?

JSON is a JavaScript library that helps convert JavaScript objects into a string representation. This string, when eval()ed in JavaScript, produces an array that contains all of the information that the JavaScript object contained. JSON's object notation grammar is suitable for encoding many nested object structures. Since this grammar is much smaller than its XML counterpart, and given the convenience of the eval() function, it is an ideal choice for fast and efficient data transport between browser and server.

JSON is designed to be used in conjunction with JavaScript code making HTTP requests. Since server-side code can be written in a variety of languages, JSON is available in many different languages such as C#, Python, PHP, and of course, Java!

JSON is essentially a safe wrapper around the built in JavaScript function eval().  The JavaScript eval function essentially evaluates a string and executes, it is a form of Dynamic JavaScript.  We say it is a safe wrapper because it will first pre-process the string to be evaluated before using the eval function.  JSON will look for and block known ways of using eval for malicious purposes.

JSON is another method of sending data, including complex data-types from the server to the client.  It is a popular alternative to XML because it is less wordy and also because it is valid JavaScript code that doesn't have to be parsed like XML it is about 100 times faster than XML.

JavaScript Review Examples:

This JavaScript review is important, because JSON built upon all of the above.  JSON is really just valid JavaScript syntax, usually some combination of Object and Array syntax to represent complex data structures.  The only difference with standard JavaScript syntax is that JSON doesn't include the variable name.

JSON Examples:

The above Encode example outputs:

[{"color":"red","doors":2,"paidFor":true},{"color":"blue","doors":4,"paidFor":true},{"color":"white","doors":2,"paidFor":false}]
 

Versus the same data in XML:

<carinfo>
    <cars>
        <car>
            <color>red</color>
            <doors>2</doors>
            <paidFor>true</paidFor>
        </car>
        <car>
            <color>blue</color>
            <doors>4</doors>
            <paidFor>true</paidFor>
        </car>
        <car>
            <color>white</color>
            <doors>2</doors>
            <paidFor>false</paidFor>
        </car>
    </cars>
</carinfo>

 

 

What Is Dojo?

Dojo is a set of powerful JavaScript libraries that provide a simple API to a plethora of features. One of these features is the ability to make HTTP requests and receive their responses. This is the main functionality of Dojo that we will utilize. Aside from providing Ajax functionality, Dojo also provides packages for string manipulation, DOM manipulation, drag-and-drop support, and data structures such as lists, queues, and stacks.

The heart of Dojo is essentially a wrapper around the XMLHttpRequest and callback functions.  It hides both the browser differences between and also the separate call back function. 

It essentially implements the following JavaScript utility functions I wrote:

	function getXMLHTTPRequest() 
	{
		try {
			req = new XMLHttpRequest();  // FireFox
		} catch (ex1) {
			try {
				req = new ActiveXObject ("msxml1.XMLHTTP");
			} catch (ex2) {
				try {
					req = new ActiveXObject ("Microsoft.XMLHTTP");
				} catch (ex3) {
					req = false;
				}
			}
		}
		return req;
	}

	var http = getXMLHTTPRequest();
	
	function useHttpResponse ()  // Call Back Function.
	{
		if (http.readyState == 4) {
			if (http.status == 200) {
			//alert ("response");
				var retval = http.responseText.split("|");
				document.getElementById('city').value = retval[0];
				document.getElementById('state').value = retval[1];
				document.getElementById('zipCode').value = retval[2];
			}
			//alert ("response: "+retval[0]);
		}
	}	

	function City_OnBlur ()
	{
		if (!http) {
			alert ("Unable to perform Zip Code lookup at this time");
			return;
		}

		var url = "zipLookup2.jsp?zip="+document.getElementById('city').value;
		http.open("GET", url, true);
		http.onreadystatechange = useHttpResponse;
		http.send(null);
	}

The above is all replaced with:

        function City_OnBlur () {
            dojo.xhrGet ({
                // Location of the HTML content we want to grab
                url: 'zipLookup2.jsp?zip='+dojo.byId('city').value,
				handleAs: 'json', // IMPORTANT: tells Dojo to automatically parse the HTTP response into a JSON object
                // Called when the page loaded successfully
                load: function (data) {
                    dojo.byId('city').value = data.content[0];
                    dojo.byId('state').value = data.content[1];
                    dojo.byId('zipCode').value = data.content[2];
                },

                // Called if there was an error (such as a 404 response)
                error: function (data) {
                    console.error('Error: ', data);
                }
            });
        }	

Incremental Lookup using Dojo: