Ajax sample code with Json/PHP

O

Otto Wyss

I've now been looking for a week for a simple but useful sample on how
to get a list of entries (persons) via an XMLHttpRequest using Json/PHP
on the server. So far I've found about a thousend different tutorials
and code samples but not a single one, where the server returns an array
of entries. Very few samples use Json at all and almost none show the
server code. So does anybody know a sample which

- uses just a small javascript library (preferable jQuery)
- uses Json/PHP and returns a list (array) of entries
- contains the full code, server and client side
- hopefully has a working demo on the web

Or does somebody have such a sample to share or put up on the web?

O. Wyss
 
M

Marc

Otto Wyss said:
I've now been looking for a week for a simple but useful sample on how to
get a list of entries (persons) via an XMLHttpRequest using Json/PHP on
the server. So far I've found about a thousend different tutorials and
code samples but not a single one, where the server returns an array of
entries. Very few samples use Json at all and almost none show the server
code. So does anybody know a sample which

- uses just a small javascript library (preferable jQuery)
- uses Json/PHP and returns a list (array) of entries
- contains the full code, server and client side
- hopefully has a working demo on the web

Or does somebody have such a sample to share or put up on the web?

O. Wyss
Click to expand...

I have the following sample running only on my development computer... it's
a very basic sample, no error handling or other gadgets...

Get "AjaxRequest.js" from: http://www.ajaxtoolbox.com/request/source.php
(okay, this is the only gadget but a very basic and small(!!) library,
also.. read what Matt Kruse is writing!)

put the following 3 files in the same directory and run index.php

json.txt

{"employees":[
{"name": "John", "id": 10},
{"name": "Jane", "id": 12},
{"name": "Tom", "id": 13},
{"name": "Jones", "id": 15}
]
}


index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sample 1</title>
<script type="text/javascript" src="AjaxRequest.js"></script>
<script type="text/javascript">
//<![CDATA[
var jsonobject;
window.onload = function(){
AjaxRequest.post(
{'url':'get.php', 'parameters':{'list':'employees'}
,'onSuccess':function(req){
jsonobject = eval('('+req.responseText+')');

/* get the select element and fill the list from the json string */
var sel = document.getElementById("list1");
for (var i=0; i < jsonobject.employees.length;i++){
addOptions(sel, jsonobject.employees.id,
jsonobject.employees.name);
}
}, 'onError':function(req){ alert("Error!\nStatusText="+req.statusText);}
});
}
function addOptions(object, oValue, oText) {
/* very simple (old skool) method of adding list options */
var defaultSelected = true; var selected = true;
var optionName = new Option(oText, oValue, defaultSelected, selected)
var length = object.length;
object.options[length] = optionName;
}
//]]>
</script>
</head>
<body>

<select name="list1" id="list1" size="4">
</select>

</body>
</html>


get.php

<?php

$what = $_GET["list"];
if ($what = "employees"){
$file = "json.txt";
header("Content-type: application/json; charset=utf-8");
header("Content-Transfer-Encoding: 8bit");
header("Content-Length: " . filesize($file));
print(file_get_contents($file));
}else{
// another list?
}
?>
 
W

wyo

Get "AjaxRequest.js" from:http://www.ajaxtoolbox.com/request/source.php
(okay, this is the only gadget but a very basic and small(!!) library,
also.. read what Matt Kruse is writing!)
Click to expand...
I must say I've already looked into Ajaxtoolbox but I've some
reservation to base a new development onto a source which hasn't
changed since June 22, 2005. Also the serializeForm doesn't use JSON
which IMO is a must. Anyway thanks a lot for the sample.
get.php
<?php
$what = $_GET["list"];
if ($what = "employees"){
$file = "json.txt";
header("Content-type: application/json; charset=utf-8");
header("Content-Transfer-Encoding: 8bit");
header("Content-Length: " . filesize($file));
print(file_get_contents($file));
}else{
// another list?
}
?>
Click to expand...

Why do you use headers in get.php? Are they necessary?

O. Wyss
 
M

Marc

get.php
<?php
$what = $_GET["list"];
if ($what = "employees"){
$file = "json.txt";
header("Content-type: application/json; charset=utf-8");
header("Content-Transfer-Encoding: 8bit");
header("Content-Length: " . filesize($file));
print(file_get_contents($file));
}else{
// another list?
}
?>
Click to expand...

Why do you use headers in get.php? Are they necessary?

O. Wyss
Click to expand...

I use the headers because the RFC says so:
http://www.ietf.org/rfc/rfc4627.txt?number=4627

header("Content-type: application/json; charset=utf-8");
Click to expand...

3. Encoding
JSON text SHALL be encoded in Unicode. The default encoding is UTF-8.

6. IANA Considerations
The MIME media type for JSON text is application/json.
header("Content-Transfer-Encoding: 8bit");
Click to expand...

6. IANA Considerations
Encoding considerations: 8bit if UTF-8
header("Content-Length: " . filesize($file));
Click to expand...
because you simply should tell the client what size you are sending...

Most browsers don't care if you send the headers or not but in the future
other clients (read software) might want to use your json also...
 
M

Marc

get.php
<?php
$what = $_GET["list"];
if ($what = "employees"){
$file = "json.txt";
header("Content-type: application/json; charset=utf-8");
header("Content-Transfer-Encoding: 8bit");
header("Content-Length: " . filesize($file));
print(file_get_contents($file));
}else{
// another list?
}
?>
Click to expand...

Why do you use headers in get.php? Are they necessary?

O. Wyss
Click to expand...

I use the headers because the RFC says so:
http://www.ietf.org/rfc/rfc4627.txt?number=4627

header("Content-type: application/json; charset=utf-8");
Click to expand...

3. Encoding
JSON text SHALL be encoded in Unicode. The default encoding is UTF-8.

6. IANA Considerations
The MIME media type for JSON text is application/json.
header("Content-Transfer-Encoding: 8bit");
Click to expand...

6. IANA Considerations
Encoding considerations: 8bit if UTF-8
Click to expand...


And oh... the code sample just sends the json string as whatever your
filesystem is using as encoding...
to send real utf-8 you could use the 'utf8_encode' function in php...
 
O

Otto Wyss

Marc said:
And oh... the code sample just sends the json string as whatever your
filesystem is using as encoding...
to send real utf-8 you could use the 'utf8_encode' function in php...
Click to expand...
Thanks a lot, I just was curious since no other samples uses headers or
utf8_encode. I'll keep that in mind.

O. Wyss
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Write a JAVASCRIPT program that will parse the JSON structure once the PHP program is called using AJAX. You may show output using html 0
Write a PHP program that will generate the JSON structure below 1
Survey details won't go through using php, ajax, Mysql 0
Ajax function only returns error and does not call php function 2
Trying to get JSON data from API into HTML table 7
How to save JSON Data to a file using fetch() api? 2
Possible PHP/WP problem with code, trouble accessing custom archive links 1
Checking dynamically populated data using ajax with user entered value 5

Members online

No members online now.
Total: 37 (members: 0, guests: 37)
Robots: 674

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top