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 :
2760
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 AND DEVELOPMENT.
MENSAJE
OPERACIÓN EJECUTADA
We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".
These cookies are necessary for the website to function and cannot be disabled on our systems. They are generally only set in response to your actions in requesting services, such as setting your privacy preferences, logging in or completing forms. You can set your browser to block or alert you to these cookies, but some areas of the site will not work. These cookies do not store any personally identifiable information
Performance Cookies
These cookies allow us to count visits and traffic sources so that we can assess the performance of our site and improve it. They help us know which pages are the most or least visited, and how visitors navigate the site. All information collected by these cookies is aggregated and therefore anonymous. If you do not allow these cookies to be used, we will not know when you visited our site and will not be able to assess whether it worked properly
Functional Cookies
These cookies allow the website to provide better functionality and customization. They may be set by our company or by external providers whose services we have added to our pages. If you do not allow these cookies to be used, some of these services may not function properly
Targeted Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to profile your interests and display relevant ads on other sites. They do not directly store personal information, but are based on the unique identification of your browser and Internet device. If you do not allow these cookies to be used, you will see less targeted advertising