Web Scripting - Intro to AJAX and JSON PDF

Web Scripting-Intro INFO-1234 Dr. Emad Saleh AJAX with JSON URLs URL format http://www.mysite.com/specials/saw-blade.gif – Protocol : http:// – Internet address : www.mysite.com – Name of resource : /specials/saw-blade.gif...

Web Scripting-Intro INFO-1234 Dr. Emad Saleh AJAX with JSON URLs URL format http://www.mysite.com/specials/saw-blade.gif – Protocol : http:// – Internet address : www.mysite.com – Name of resource : /specials/saw-blade.gif 2 Basic HTTP HTTP commands are called methods – GET Requests a representation of the specified resource Most requests on the web are HTTP GET requests – POST Submits data to be processed to the identified resource The data is included in the body of the request – PUT Uploads a representation of the specified resource – DELETE Delete the named resource from a server 3 JSON JavaScript Object Notation – Easy way to store and transport JavaScript object data as strings – Example: var stooge = { firstName: "Joe", lastName: "Howard", nickName: "Curly", weight: 220 }; // as JSON {"firstName":"Joe","lastName":"Howard","nickName":"Curly","weight":220} 4 JSON (continued) Most firewalls on the Internet will allow by default HTTP GET and POST requests so long as the data is in string format JSON is the perfect option for sending or receiving data on the web, because it represents everything in string format As well, it’s really easy to convert JSON data to and from JavaScript objects 5 Converting JSON and JavaScript Converting from JavaScript objects to JSON and JSON strings back to JavaScript objects – JavaScript to JSON: var stoogeJSON = JSON.stringify(stooge); // assuming stooge is a JS object – JSON to JavaScript: var stooge = JSON.parse(stoogeJSON); 6 AJAX Asynchronous JavaScript And Xml – Provides the ability to issue asynchronous calls from a client browser to code running on a web server and receive data in return through a callback to an event handler – Not usually in XML format any more (almost always JSON format now) – What is asynchronous? During the period of time between the sending of the request and the response being returned, the browser (and the user) are free to continue working; i.e. no wait – Most AJAX calls take a couple of seconds or less – It’s also possible to issue synchronous calls During a synchronous call, the JavaScript code will wait for the answer to come back 7 Simple AJAX We can do simple AJAX calls from any browser using something called XMLHttpRequest Every browser supports this and it lets us issue an HTTP request (usually GET or POST) to a web site Despite the name, we’re rarely expecting to get XML data back from the request These days it’s usually JSON data 8 Simple AJAX (synchronous) 9 Simple AJAX (asynchronous) 10 Working with JSON Often the JSON returned from web servers is completely unformatted and therefore difficult to interpret visually This problem can be somewhat resolved by using the resources of a web site called JSON Lint Unformatted JSON can be pasted into the site display window and then reformatted based on the structure of the JSON code being analyzed 11 Working with JSON 12 Working with JSON 13 Working with JSON 14