PHPIDX Open Blog

Informative blogs and opinions.

Archive for the 'JavaScript' Category (75)

JSON - Java Script Object Notation

What is JSON?

JSON, an acronym for, javascript object notation is a structured way of defining complex data types. Big deal right? You may be saying in the back of your head, I’m going to stick with XML. And my response to that is - use what is best for the task at hand.

What are the benefits of using JSON?

  • Runtime efficiency - Would you really parse xml with javascript and no real legitimate debuggers besides and an alert function?
  • Compatibility - the JavaScript eval function enables you to import and execute a JSON object. JSON is imported into an object which allows simple access to the data. The tedious and logical task of parsing is black box which means less development time.
  • AJAX flare - with all of the hype surrounding AJAX, JSON is a sexy medium to communicate action. Not to mention it’s size is very slim compared to XML.

Example 1.

{"menu": {
                 "items":  [
                                   {"value": "New", "onclick": "CreateNewDoc()"},
                                   {"value": "Open", "onclick": "OpenDoc()"},
                                    {"value": "Close", "onclick": "CloseDoc()"}
   	                      ]
  }}


Looping:


var Obj = eval(JSON_STRING);


for(i=0;  i < Obj.menu.items.length; i++)


{


	........action here


}


* As you can see a { refers to an associative array reference by a potentially non numeric key.  Usually the key is a descriptive string.


 
					

					
			


					

					
Ajax, JavaScript and JSON tutorial

					
					
					
					

						
This tutorial will give a basic example for dynamically populating options of a drop down box.  A good scenario for it’s use is when you have multiple drop down boxes and the options for a drop down box would be dependent on the value in another drop down box in the form.  For instance, there are two drop down boxes, one for states and one for counties.  The first drop down box is a list of states and the second, counties, will be dynamically populated with counties according to the state selected.  Ok, so now that we have a practical use in mind for this we can talk more about the technical side of this engine.  Below is the definition of the html page that will be making ajax calls to the server.  In my example, I will use a drop down box and a button which when pressed will populate the drop down box with options.




<html>

<head>

<script src=”prototype.js” type=”text/javascript”></script><script>

function populateDD(url,dd){

new Ajax.Request(url,{method: ‘get’,

onSuccess: function(transport){

var response = eval(”(” + transport.responseText + “)”);

clearDD(dd);

for(var i=0; i < response.opts.opt.length; i++){

$(dd).options.add(new Option(response.opts.opt[i].optname,response.opts.opt[i].optval));

}

}});

}function clearDD(dd){

while($(dd).options.length > 0){

$(dd).options[0] = null;

}

}

</script></head>

<body><select id=’dd’>

<option>–select one–</option>

</select>

<input type=”button” value=”populate dd” onclick=”populateDD(’json.txt’,'dd’)”></body>

</html> 
 Let’s break this page up and first look at the javascript functions in use.  populateDD makes an ajax call to the server using a library called prototype.  Prototype is a very intuitive library for javascript and front-end developers.  It does a great job at simplifying javascript.  I would go into more detail, but I’ll put that in another post.  For now, just download the library and upload it to your server and include it in your html page as shown above.   So on success a response in JSON format will be returned to the script. First let us look at json.txt file and analyze  the example JSON  data structure.  In this example I’m storing the data structure as a static text file, however, like XML you can dynamically generated this with a server side language like PHP, Python, Perl, Ruby, or even ASP.NET.   Each language has it’s pros and cons - I prefer PHP, but you can decide on your own flavor.




{”opts”:{

“opt”:[

{”optname”:”Bacon And Eggs”,”optval”:”1″},

{”optname”:”Sausage And Biscut”,”optval”:”2″},

{”optname”:”Waffles And Eggs”,”optval”:”3″}

]

}}


We will evaluate this JSON response with the line




var response = eval(”(” + transport.responseText + “)”);


The line of js code basically takes the text and interprets it into a javascript object for your disposal. The next function called clearDD(dd) clears the existing drop down box in preparation for new data.  Finally, we use a for loop to traverse the new object and create option nodes to populate the drop down box.  And it’s as simple as that. 


for(var i=0; i < response.opts.opt.length; i++){

$(dd).options.add(new Option(response.opts.opt[i].optname,response.opts.opt[i].optval));

}


In conclusion, JSON provides the power to define complex data structures.  Compared to parsing xml with javascript, JSON is much more efficient and saves processing time in the browser.


 
					

					
			


		
		

			

			

		


	
	


	

		
		
		
	



	
 

	

		

		Entries (RSS)
			and Comments (RSS).
			Theme design by wpGuy.	

			Brought by Wordpress Themes