HTML Level II Cyber Advantage Session III HTML
HTML Level II (Cyber. Advantage) Session III HTML 5 APIs - AJAX & JSON http: //www. profburnett. com
Class Outline � AJAX � JSON � What Is Ajax? � What is JSON? � Ajax: The Basics � JSON Array Object � Ajax the j. Query Way � AJAX Exercises � � � 9/9/2020 Example Much Unlike XML Because JSON Syntax JSON Objects & Arrays JSON HTTP Request Example JSON Exercises Copyright © Carl M. Burnett JSONP • • What is JSONP? How JSONP it works Cross-domain requests using a proxy server Security concerns 2
What is AJAX? �AJAX = Asynchronous Java. Script and XML. �AJAX is a technique for creating fast and dynamic web pages. �AJAX allows web pages to be updated asynchronously. �Exchanging small amounts of data with the server �Updates parts of a web page, without reloading the whole page. �Examples of applications using AJAX: Google Maps, Gmail, You. Tube, and Facebook.
XMLHttp. Request An event happens: 7/14/2013 • XMLHttp. Request Object Created • Web Server processes the Http. Request • Http. Request Sent • Creates a response and sends data back to Client. • Processes the returned data using Java. Script • Updates page content Copyright © Carl M. Burnett 4
Ajax the j. Query Way Using the load() Method - Loads an HTML file into a specified element on the page. Traditional Example: 1. Short list of news headlines. 2. Page loads - Five most recent news stories appear. 3. Add links to let visitors choose what news stories are displayed. 4. Linking are displayed in separate web pages 5. Force visitors to move onto another web page. (non-AJAX) AJAX Example: 1. Load the selected news stories into the news headlines box on the page. 2. Each visitor click - browser requests a new HTML file for the headline box from the server 3. Places that HTML into the headlines box 4. Never leaves current page.
The get() and post() Methods QUERY STRING URL http: //www. chia-vet. com/ products. php? prod. ID=18&sess. ID=1234 name/value pairs GET Method: $. get('rate. Movie. php', 'rating=5'); POST method: $. post('rate. Movie. php', 'rating=5'); $. post('rate. Movie. php', 'rating=5&user=Bob');
The get() and post() Methods OBJECT LITERAL TO STORE DATA { name 1: 'value 1', name 2: 'value 2' } var data = { rating: 5 }; $. post('rank. Movie. php', { rating: 5 });
The get() and post() Methods JQUERY’S SERIALIZE() FUNCTION FORM DATA var str = $("form. Data"). serialize(); $. get('login. php', form. Data, login. Results);
The get() and post() Methods Processing Data from the Server 1 $('#message a'). click(function() { 2 var href=$(this). attr('href'); 3 var querystring=href. slice(href. index. Of('? ')+1); 4 $. get('rate. php', querystring, process. Response); 5 return false; // stop the link 6 }); 1 2 3 4 5 selects every link (<a> tag) inside of another tag with an ID of message extracts the href attribute of the link extracts just the part after the ? in the URL using the slice() method the Ajax request using the GET method - results goes to “Callback Function” stops the normal link behavior and prevents the web browser from unloading the current page
The get() and post() Methods Callback Function 1 function process. Response(data) { 2 var new. HTML; 3 new. HTML = '<h 2>Your vote is counted</h 2>'; 4 new. HTML += '<p>The average rating for this movie is '; 5 new. HTML += data + '. </p>'; 6 $('#message'). html(new. HTML); 7 }
The get() and post() Methods Handling Errors $. get('rate. php', querystring, process. Response). error(error. Response); function error. Response() { var error. Msg = "Your vote could not be processed right now. "; error. Msg += "Please try again later. "; $('#message'). html(error. Msg); }
j. Query AJAX Exercises � Complete the following j. Query AJAX Exercises on W 3 Schools Website. � j. Query AJAX Example � j. Query load() Method � j. Query $. get() Method � j. Query $. post() Method
What is JSON? �JSON stands for Java. Script Object Notation �JSON is a lightweight data-interchange format �JSON is language independent * �JSON is "self-describing" and easy to understand
JSON Array Object Example { "employees": [ {"first. Name": "John", "last. Name": "Doe"}, {"first. Name": "Anna", "last. Name": "Smith"}, {"first. Name": "Peter", "last. Name": "Jones"} ] }
Much Unlike XML Because �JSON doesn't use end tag �JSON is shorter �JSON is quicker to read and write �JSON can use arrays
JSON Syntax JSON syntax is derived from Java. Script object notation syntax: �Data is in name/value pairs �Data is separated by commas �Curly braces hold objects �Square brackets hold arrays
JSON Data - A Name and a Value "first. Name" : "John" JSON values can be: �A number (integer or floating point) �A string (in double quotes) �A Boolean (true or false) �An array (in square brackets) �An object (in curly braces) �null
JSON Objects {"first. Name": "John", "last. Name": "Doe"} JSON Arrays { "employees": [ {"first. Name": "John", "last. Name": "Doe"}, {"first. Name": "Anna", "last. Name": "Smith"}, {"first. Name": "Peter", "last. Name": "Jones"} ] }
JSON Uses Java. Script Syntax { "employees": [ {"first. Name": "John", "last. Name": "Doe"}, {"first. Name": "Anna", "last. Name": "Smith"}, {"first. Name": "Peter", "last. Name": "Jones"} ] } // returns John Doe employees[0]. first. Name + " " + employees[0]. last. Name;
JSON HTTP Request Example 1: Create an array of objects. 2: Create a Java. Script function to display the array. 3: Create a text file 4: Read the text file with an XMLHttp. Request HTTP Request Example
What is JSONP? �JSONP (which stands for JSON with padding) �Technique to overcome: �cross-domain restrictions imposed by browsers. �allows data to be retrieved from foreign systems.
How JSONP it works �Function call - my. Response. Function() �It is the "P" of JSONP (the "padding" around the pure JSON, or according to some the "prefix". my. Response. Function({"Name": "Foo", "Id": 1234, "Rank": 7});
How JSONP it works � Server response that includes the JSONP function. � JSONP does not work with JSON-formatted results. � The JSONP function invocation gets sent back � The payload that the function receives, must be agreed-upon by the client and server. � The browser provides the name of the callback function � Named query parameter value - typically name “jsonp” or “callback” <script type="application/javascript" src="http: //server. example. com/Users/1234? callback=parse. Response"> </script>
Cross-domain requests using a proxy server �Newer browsers support CORS relax this constraint �Cooperating proxy server does not have such restrictions �Relays a browser request to a server in a separate domain �Stores the result. �Returns the JSON payload when the browser makes a second request. �The xd_arbiter. php used by Facebook's JS SDK is a popular example of this cooperating server technique. [6]
Security Concerns �Untrusted third-party code �Callback name manipulation and Reflected File Download �Cross-site request forgery – (Exclusive use of cookies for determining if a request is authorized) �Rosetta Flash - Adobe Flash Player (Fixed 2014)
JSONP Exercise �Adding a Flickr Feed to Your Site
Class Review � AJAX � JSON � What Is Ajax? � What is JSON? � Ajax: The Basics � JSON Array Object � Ajax the j. Query Way � AJAX Exercises � � � 9/9/2020 Example Much Unlike XML Because JSON Syntax JSON Objects & Arrays JSON HTTP Request Example JSON Exercises Copyright © Carl M. Burnett JSONP • • What is JSONP? How JSONP it works Cross-domain requests using a proxy server Security concerns 27
- Slides: 27