JSON

JSON stands for JavaScript Object Notation.

When exchanging data between a browser and a server, the data can only be text.

Since the JSON format is a text-based format, it can be easily sent to/from a server.

  • JSON is used for Exchanging data
  • JSON is a language-independent data format, and can be used by any programming language.
  • JSON filenames use the extension .json .
  • JSON used in both Client side and Server side.

JSON Format

people.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
	{
		"firstName":"Mary",
		"lastName":"Peters",
		"age":50
	},
	{
		"firstName":"John",
		"lastName":"Smith",
		"age":40
	},
	{
		"firstName":"Ann",
		"lastName":"Jones",
		"age":18
	}
]
  • JSON objects are surrounded by curly braces {}
  • JSON objects are written in key/value pairs.
  • Keys must be strings (surrounded by "" only), and values must be a valid JSON data type (string, number, object, array, boolean or null).
  • Keys and values are separated by a colon : .
  • Each key/value pair is separated by a comma , .

Client Side - JavaScript & JSON

As we know, JavaScript Objects are different with JSON.

1
2
3
4
5
6
7
8
9
10
//JS Object

var person = {
  firstName: "Mary",
  lastName: "Peters",
  age:50
};

//JS array
var name = ["Peters", "Smith", "Jones"];
  • Client Sending data: If you have data stored in a JavaScript object, you can convert the object into JSON, and send it to a server.
  • Client Receiving data: If you receive data in JSON format, you can convert it into a JavaScript object.

To Convert JS to JSON (for Client Sending Data)

  • JSON.stringify(jsObject)

To Convert JSON to JS (for Client Receiving data)

  • JSON.parse(jsonObject)

Server Side: PHP & JSON

PHP has some built-in functions to handle JSON.

  • Encode a value to JSON format by PHP

  • Decode a JSON object into a PHP object or an associative array

  • Server Recieving data: If you receive data in JSON format, you need to decode JSON-format data into a PHP object (by default) or an associative array.

  • Server Sending data: If you send data in PHP format, you need to encode it to JSON-format.

To Convert PHP to JSON (for Server Sending Data)

  • json_encode($php_object)
1
2
3
4
5
<?php
  $person = array("firstName"=>"Mary", "lastName"=>"Peters", "age"=>50);
	echo json_encode($person); 
	// output: {"firstName":"Mary","lastName":"Peters","age":50}
?>

To Convert JSON to PHP (for Server Receiving data)

  • json_decode($json_string) - return a PHP object
  • json_decode($json_string, true) - return an associative array
1
2
3
4
5
<?php
  $person = '{"firstName":"Mary", "lastName":"Peters", "age":50}';
	$person_obj = json_decode($person); // person_obj is a PHP object
	$person_array = json_decode($person, true); // person_array is an associative array
?>

AJAX

AJAX known as Asynchoronous JavaScript and XML.

  • Asynchoronous means no page refresh required.

XML is a kind of data format, very similar to JSON.

JSON has replaced XML as a more popular data format.

AJAX is a technique for creating fast and dynamic web pages.

  • allows web pages to be updated asynchronously by exchanging small amounts of data with the server.
    • it is possible to update parts of a web page, without reloading the whole page.
    • Classic web pages, which do not use AJAX, must reload the entire page if the content should be changed.

Examples of applications using AJAX:

  • Google Search suggestion
  • Google Maps
  • YouTube
  • Email
  • Facebook tabs

How AJAX Works?

XMLHttpRequest Object

The XMLHttpRequest object can be used to exchange data with a server.

To Create an XMLHttpRequest Object in JS:

  • var ourRequest = new XMLHttpRequest();

Object Methods:

  • Specify the request (request type: GET or POST) :
    • ourRequest.open('GET', 'https://xxx', true);
  • Send the request to server:
    • ourRequest.send();

Object Properties:

  • Returns the response data as a string
    • ourRequest.responseText;
  • Returns the status-number of a request
    • ourRequest.status;
      • 200: “OK”
      • 403: “Forbidden”
      • 404: “Not Found”