PHP JSON: An Example Javascript JSON Client With PHP Server

by Janeth Kent Date: 11-04-2013

While JSON has many uses, probably the most common use is to pass data structures to Javascript. JSON is simply a standard format for data structures.

In this example we’ll use a PHP page as a JSON server; we’ll use an HTML page with embedded javascript to contact the server, retrieve the data and display it via an alert popup.

A JSON Server in PHP

First, the server. Our server here is very simple, but of course it could easily retrieve data from a database. The data structure that this example sends is also very simple, but JSON can send data structures that are as complex as you like.

<?php    // Prevent caching.  
header('Cache-Control: no-cache, must-revalidate');  
header('Expires: Mon, 01 Jan 1996 00:00:00 GMT');    
// The JSON standard MIME header.  
header('Content-type: application/json');    
// This ID parameter is sent by our javascript client.  
$id = $_GET['id'];    
// Here's some data that we want to send via JSON.  
// We'll include the $id parameter so that we  
// can show that it has been passed in correctly. 
// You can send whatever data you like.  
$data = array("Hello", $id);    
// Send the data.  echo json_encode($data);    ?>

Let’s imagine you run this on your local machine and access it with a URL like this: http://localhost/test.php?id=goodbye

What you get back looks like this:

["Hello","goodbye"]

Here we see some simple data in standard JSON format.

But it’s much more interesting to retrieve this data via javascript.

A Simple JSON Javascript Client

The following HTML page implements a simple javascript client that contacts our server, retrieves data via an AJAX call and displays it in an alert popup.

While you could make the AJAX call in pure unvarnished javascript, it’s much better to use a standard javascript library to hide browser and platform differences. In the following code we use the industry-standard free jQuery library, which downloads as a single file.

<html>    
<head>    
<script src="jquery-1.5.2.min.js"></script>    
<script language="javascript">   
 // This just displays the first parameter passed to it 
 // in an alert.  
function show(json) {   alert(json);  }   
 function run() {  
 $.getJSON(   "/test.php", // The server URL   
{ id: 567 }, // Data you want to pass to the server.   
show 
// The function to call on completion.   
);  }    
// We'll run the AJAX query when the page loads.  
window.onload=run;    
</script>   
 </head>    
<body>   
 JSON Test Page.    
</body>   
 </html>

Here’s the alert that this page pops up:

As you can see, our javascript has successfully retrieved data from the server.

jQuery also defines a more complex AJAX call routine, in case you want to check for possible failure or have a timeout or whatever.

by Janeth Kent Date: 11-04-2013 hits : 2639

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.