JavaScript, AJAX and JSON
MIS 3502, Spring 2016
Jeremy Shafer
Department of MIS
Fox School of Business
Temple University
2/9/2016
Course Overview
We are (still) here
New tools
Weeks 1 - 5




Using a web
framework
Weeks 6 -8
Using a mobile
device IDE
Weeks 9-10
The class project
(It’s a bake off!)
Weeks 11-15
Arrays
PDO
MVC
JavaScript / JSON
Slide 2
Overview
•
•
•
•
•
So, what’s JSON?
What is JSON good for?
PHP’s json_encode
Caching and the PHP header function
Example: Using JSON to populate a menu
Slide 3
JSON
• JSON is short for JavaScript Object Notation
• JSON is an alternative to XML
• A JSON object looks like this:
{
"NameOfInsured" : "Jeremy Shafer",
"Spouse" : "Kimberly Shafer",
"Dependents" : ["Amanda","Tyler","Jordan"]
}
Slide 4
JSON vs. XML
A XML object looks like this:
<customer>
<NameOfInsured>Jeremy Shafer</NameOfInsured>
<Spouse>Kimberly Shafer</Spouse>
<Dependents>
<firstname>Amanda</firstname>
<firstname>Tyler</firstname>
<firstname>Jordan</firstname>
</Dependents>
</customer>
Slide 5
Where is JSON used?
PHP Interpreter
Browser
JavaScript
Engine
Database
Slide 6
Why this is a big deal…
• Back in the day, if you wanted to exchange data
between two systems, you specified the format
of a flat file.
• For example:
NameOfInsured, Spouse, Dependent1, Dependent2, Dependent3
Jeremy Shafer, Kimberly Shafer, Amanda, Tyler, Jordan
Greg Mathews, Krista Mathews, Melonie, Lauren, William
Slide 7
Why this is a big deal…
• But this approach assumed that you could
anticipate the quantities of all the attributes. The
data transfer file was denormalized
• So, sometimes an exception would occur because
of an unexpected quantity of elements. For
example:
NameOfInsured, Spouse, Dependent1, Dependent2, Dependent3
Jeremy Shafer, Kimberly Shafer, Amanda, Tyler, Jordan,
Ben
Greg Mathews, Krista Mathews, Melonie, Lauren, William
Uh oh! Dependent #4!
Slide 8
Then XML came along (circa 1998)
• XML allowed us to represent an object with
unspecified number of attributes, all in a single
file.
• XML was (and still is) verbose
• JSON emerged as a more streamlined
alternative. Originally defined in 2001, with
adoption picking up in 2006.
Slide 9
JSON described
JSON (JavaScript Object) Notation, is an open standard
format that uses human-readable text to transmit data
objects consisting of attribute–value pairs. It is used
primarily to transmit data between a server and web
application, as an alternative to XML.
Although originally derived from the JavaScript scripting
language, JSON is a language-independent data format.
Code for parsing and generating JSON data is readily
available in many programming languages.
http://en.wikipedia.org/wiki/JSON
Slide 10
PHP and json_encode()
• Do I have to render all that syntax myself?
• No.
• PHP provides us with a built in function called
json_encode.
• json_encode will accept a PHP array or object
as a parameter and return the JSON
representation of that array or object.
Slide 11
So why bother?
• Efficiency.
• When our systems grow to be large, we want to
cut down on as much database traffic as
possible.
• We want to put more processing burden on the
client.
• Using a http “GET” to pull in resources we need
allow us to manage aspects of our page that are
not likely to change
Slide 12
The PHP header function
• We can use the PHP header function to control
the caching of of a page.
• Page caching is when a browser retains an off
line copy of a page.
• Often we want to disable page caching. We can
do that with the following code:
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
Slide 13
The PHP header function
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
This statement says, this page expired at some date in the past.
header("Cache-Control: no-cache");
This statement says, the page needs to be validated every time it
loads. It ensures that secure https pages can't be stored.
header("Pragma: no-cache");
Isn't used that much anymore. It does the same sort of thing as
Cache-control. Better safe than sorry.
Slide 14
The PHP header function
• Sometimes we want to have caching take place.
• That’s easier, as it is the default behavior of
most browsers.
• We can use “Expires” and specify a date in the
future:
header("Expires: Fri, 4 Feb 2015 05:00:00 GMT");
• Or… specify nothing at all.
Slide 15
Summary
• So, what’s JSON?
– JavaScript Object Notation
• What is JSON good for?
– Data exchange
• PHP’s json_encode
– Transforms a PHP array into JSON
• Caching and the PHP header function
• Example: Using JSON to populate a menu
Slide 16
Time for an exercise!
This is
Jason
Not JSON
Slide 17