PHP Made Simple
To support simplicity, possiibility and cost effective of PHP

JSON quick start

Jan 19th, 2008 | By admin | Category: JavaScript

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)
Loading ... Loading ...

What does it stand for?

JavaScript Object Notation.

According to Douglas Corckford’s website, JSON is a lightweight data-interchange format. It is easy for humans to read and write… JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others.”

Object Notation can be expressed in the following format:

var obj = {
// string
a : 'sampleValue',
// array
b : [obj1,obj2,'three',4,obj5],
// function
c : function() {
var bang = this.a;
}
}

JSON is built on two structures:

  • A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
  • An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

Reasons for JSON

  • JSON is easy. No really. It’s so easy, it’ll make you sick.
  • If you’re familiar with writing classes in PHP, then you’ll most definitely be comfortable with writing JavaScript in Object Notation
  • JSON is nothing more than name : value pairs assigned within an object.
  • JSON is easy to understand because if written well, it’s a self-documenting structure.
  • JSON is fast!
  • JSON organizes the ugly mess of procedural programming. Imagine having more than one init function.
  • You can impress your friends with JSON because it’s pretty looking
  • Your co-workers will love you for writing in JSON because it will most likely not conflict with their scripts that are being called within the same web documents.

JSON is like XML because:

  1. They are both ’self-describing’ meaning that values are named, and thus ‘human readable’
  2. Both are hierarchical. (i.e. You can have values within values.)
  3. Both can be parsed and used by lots of programming languages
  4. Both can be passed around using AJAX (i.e. httpWebRequest)

JSON is UNlike XML because:

  1. XML uses angle brackets, with a tag name at the start and end of an element: JSON uses squiggly brackets with the name only at the beginning of the element.
  2. JSON is less verbose so it’s definitely quicker for humans to write, and probably quicker for us to read.
  3. JSON can be parsed trivially using the eval() procedure in JavaScript
  4. JSON includes arrays {where each element doesn’t have a name of its own}
  5. In XML you can use any name you want for an element, in JSON you can’t use reserved words from javascript

But Why? What’s good about it?

When you’re writing ajax stuff, if you use JSON, then you avoid hand-writing xml. This is quicker. Also, with ajax services support JSON output, you can bypass difficulties of cross-domain ajax calls.

Again, when you’re writing ajax stuff, which looks easier? the XML approach or the JSON approach:
The XML approach:

  1. bring back an XML document
  2. loop through it, extracting values from it
  3. do something with those values, etc,

versus the JSON approach:

  1. bring back a JSON string.
  2. ‘eval’ the JSON

Example of using JSON in AJAX to transmit data

The example is about to submit a form to a PHP page using AJAX. To keep the example simple, no data is sent (through POST) to the PHP page. Rather, data is just retrieved from the PHP page. The JSMX javascript library is very lightweight (code-wise) and sends and retrieves our data for us. The PHP page (that we make our requests to) simply prints out the data it wants to send back in a ready-to-use javascript object format.

<img src=”http://simpletutorials.com/tutorials/javascript/simple_ajax/ajax_diagram.jpg” alt=”" />

< ?php

require_once "json/JSON.php";
$json = new Services_JSON();

//convert php object to json

$value = array('first' => 'Steven', 'last' => 'Spielberg', 'address' => '1234 Unlisted Drive');

$output = $json->encode($value);

print($output);

?>

The JSON-PHP module can convert a PHP array of key value pairs to this JSON object.

{"first":"Steven","last":"Spielberg","address":"1234 Unlisted Drive"}

HTML page

<html>
<head>

<script src="ajax.js"></script>

<script>

/**Ajax Request (Submits the form below through AJAX
*               and then calls the ajax_response function)
*/
function ajax_request() {
var submitTo = 'ajax_request.php';
//location.href = submitTo; //uncomment if you need for debugging

http('POST', submitTo, ajax_response, document.form1);
}

/**Ajax Response (Called when ajax data has been retrieved)
*
* @param   object  data   Javascript (JSON) data object received
*                         through ajax call
*/
function ajax_response(data) {
for(var key in data) {
document.form1[key].value = data[key];
}
}

</script>

</head>
<body>

<input type="button" onclick="ajax_request()" value="Do AJAX"/><br /><br />

<form name="form1">
First <input type="text" name="first"/><br />
Last  <input type="text" name="last"/><br />
Address <input type="text" name="address"/><br />

</form>

</body>
</html>

This tutorial demonstrates how to perform AJAX functionality simply and effectively, using the AJAX JSMX library, coupled with the JSON-PHP  library.

Tags: , , ,

Leave Comment