AJAX

Ajax  $.get  $.post  $.getJSON  $.ajax  json and xml  Looping over data results, success and error callbacks

Ajax Topics  Introduction to XML  Introduction to JSON  Converting from XML to JSON  Looking at JSON in a browser plugin  Look at traditional AJAX in javascript  Shortened jQuery form  jQuery Examples with callbacks  Look at looping over data and inspecting results

What is XML?  XML stands for eXtensible Markup Language  It is designed to transport and represent data in a structured text based format  Commonly used in data communications  Can be used to model complex data structures  Used as a building block in Web Services and B2B communication

What is XML?  Used to describe data and not display data  Tags are not predefined  You define your own tags  XML documents are meant to be self descriptive

XML Example John Mary Reminder Don't forget me this weekend!

XML document tree  XML documents form a tree structure

Everyday Italian Giada De Laurentiis Harry Potter J K. Rowling Learning XML Erik T. Ray The root element in the example is. All elements in the document are contained within. The element has 4 children:,,,.

XML Rules  XML must be well formed so all XML elements must have a closing tag  XML tags are case sensitive  XML elements must be properly nested  XML documents must have a root element  XML attribute values must be quoted Tove Jani

Difference between XML and HTML  XML was designed to transport and store data, with a focus on what data is  HTML was designed to display data, with focus on how data looks

XML Exercise  Write an XML document which is a sample of the following hierarchy  Degree with name attribute  Course [multiple]  Lecturer  First Name  LastName   Students [mulitple]  First Name  LastName   Major  Each student should have an id attribute which is their student id

What is JSON?  JavaScript Object Notation  It is a lightweight text-data interchange format  JSON is “self-describing” and easy to understand  JSON is syntax for storing and exchanging text information similar to HTML  It has the advantage over HTML in that it is smaller than XML, faster and easier to parse  It is language and platform independent  Uses javascript syntax

JSON example { "employees": [ { "firstName":"John", "lastName":"Doe" }, { "firstName":"Anna", "lastName":"Smith" }, { "firstName":"Peter", "lastName":"Jones" } ] }

JSON Rules  Data is in name/value pairs  Data is separated by commas  Curly brackets are used to wrap objects  Square brackets are used to enclose arrays  Name-Value Pair  “firstName” : “Mike”  Equivalent to  firstName = “Mike” in javascript

JSON Values  JSON Values can be  A number (integer of floating point)  A string ( in quotes)  A Boolean (true or false)  An array (square brackets)  An object (curly brackets)  null Example: {“firstName” : “Mike”, “lastName” : “Smith”, “age”:20, “isStudent”: true, parents : [ { “firstName” : “Henry”, “lastName” : “Smith” }, { “firstName” : “Mary”, “lastName” : “Smith” } ] }

JSON Objects { "firstName":"John", "lastName":"Doe" } This is equal to the javascript statements firstName = "John" lastName = "Doe"

JSON Arrays { "employees": [ { "firstName":"John", "lastName":"Doe" }, { "firstName":"Anna", "lastName":"Smith" }, { "firstName":"Peter", "lastName":"Jones" } ] }

JSON uses javascript syntax  You can create an array of objects and assign data to it like this: var employees = [ { "firstName":"John", "lastName":"Doe" }, { "firstName":"Anna", "lastName":"Smith" }, { "firstName":"Peter", "lastName": "Jones" } ]; employees[0].firstName // John employees[0][“firstName”]//John

JSON file extension  JSON files typically end in.json  Mime type for JSON text is “application/json”

JSON exercise  Write a JSON Representation of the following hierarchy  Degree with name attribute  Course [multiple]  Lecturer  First Name  LastName   Students [mulitple]  First Name  LastName   Major  Each student should have an id attribute which is their student id

What is AJAX?  Asynchronous Javascript and XML  It is a term that refers to the interaction of a mix of technologies  Javascript  Web browser  Web server  Allows a web page to ask for and receive a response from a web server and then update itself without ever having to load a web page

What does AJAX allow you to do?  Display new HTML content without reloading the page  Submit a form and instantly display the results  Log in without leaving a page  Browse through database information e.g. Amazon

How Ajax Works  XMLHttpRequest object is the core  This is a feature of browsers that allows JavaScript to send information to a web server and receive information in return  Five steps are usually involved 1. Create an instance of the XMLHttpRequest object 2. Use XHR’s open() method to specify what kind of data is being sent and where the data will go 3. Create a callback function to handle the results 4. Send the request 5. Receive the response

Example of Ajax using traditional javascipt  ajax-example.php ajax-example.php  Look at the use of the XML Http Request Object  Also look for the definition of the callback

Same example written in jQuery $(“#result”).load(“/cgi-bin/simple-ajax- example.cgi");

Ajax Security  Cross Domain Ajax calls  The url used in an ajax call must be on the same website (domain) as the page making the call  Web browsers will not allow you to make Ajax requests to other domains  Essentially we do not want one website being able to access data from another website with no trust involved  cross-domain-ajax-call-is-not-allowed provides a good scenario cross-domain-ajax-call-is-not-allowed