1. JavaScript, AJAX and JSON MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/9/2016

2. Course Overview 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 We are (still) here Arrays PDO MVC JavaScript / JSON Slide 2

3. 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

4. JSON JSON is short for JavaScript Object Notation JSON is an alternative to XML A JSON object looks like this: Slide 4

5. JSON vs. XML A XML object looks like this: Slide 5

6. Where is JSON used? Database PHP Interpreter Browser JavaScript Engine HTTP Requests How is the data formatted? JSON? XML? Plain text? Slide 6

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. Time for an exercise! This is Jason Not JSON Slide 17