1. With jQuery and AJAX Doncho Minkov Telerik Corporation www.telerik.com Technical Trainer

2.  RESTful Web Services  XML, JSON, RSS  Consuming Our REST with jQuery  Consuming Twitter REST with jQuery  Twitter @Anywhere  Twitter @Anywhere Features  Facebook API

3. Lightweight Architecture for Web Services

4. "Representational state transfer (REST) is a style of software architecture for distributed hypermedia systems such as the World Wide Web." http://en.wikipedia.org/wiki/Representational_State_Transfer  Application state and functionality are resources  Every resource has an URI  All resources share a uniform interface  This natively maps to the HTTP protocol

5.  One URI for a resource, multiple operations  Add a new document "RestTalk" in category "Code"  PUT http://mysite.com/docs/Code/RestTalk http://mysite.com/docs/Code/RestTalk  Get the document / some page  GET http://mysite.com/docs/Code/RestTalk http://mysite.com/docs/Code/RestTalk  GET http://mysite.com/docs/Code/RestTalk/pages/3 http://mysite.com/docs/Code/RestTalk/pages/3  Remove the document  DELETE http://mysite.com/docs/Code/RestTalk http://mysite.com/docs/Code/RestTalk  Retrieve metadata  HEAD http://mysite.com/docs/Code/RestTalk http://mysite.com/docs/Code/RestTalk 5

6. Comparing the Common Service Data Formats

7.  XML is markup-language for encoding documents in machine-readable form  Text-based format  Consists of tags, attributes and content  Provide data and meta-data in the same time 7 <library> HTML 5 Bay Ivan HTML 5 Bay Ivan WPF 4 Microsoft WPF 4 Microsoft WCF 4 Kaka Mara WCF 4 Kaka Mara UML 2.0 Bay Ali UML 2.0 Bay Ali </library>

8.  JSON (JavaScript Object Notation)  Standard for representing simple data structures and associative arrays  Lightweight text-based open standard  Derived from the JavaScript language 8 { "firstName": "John", "lastName": "Smith", "age": 25, "firstName": "John", "lastName": "Smith", "age": 25, "address": { "streetAddress": "33 Alex. Malinov Blvd.", "address": { "streetAddress": "33 Alex. Malinov Blvd.", "city": "Sofia", "postalCode": "10021" }, "city": "Sofia", "postalCode": "10021" }, "phoneNumber": [{ "type": "home", "number": "212 555-1234"}, "phoneNumber": [{ "type": "home", "number": "212 555-1234"}, { "type": "fax", "number": "646 555-4567" }] { "type": "fax", "number": "646 555-4567" }]}, { "firstName": "Bay", "lastName": "Ivan", "age": 79 }

9.  RSS (Really Simple Syndication)  Family of Web feed formats for publishing frequently updated works  E.g. blog entries, news headlines, videos, etc.  Based on XML, with standardized XSD schema  RSS documents (feeds) are list of items  Each containing title, author, publish date, summarized text, and metadata  Atom protocol aimed to enhance / replace RSS 9

10. 10 <channel> W3Schools Home Page W3Schools Home Page http://www.w3schools.com http://www.w3schools.com Free web building tutorials Free web building tutorials RSS Tutorial RSS Tutorial http://www.w3schools.com/rss http://www.w3schools.com/rss New RSS tutorial on W3Schools New RSS tutorial on W3Schools XML Tutorial XML Tutorial http://www.w3schools.com/xml http://www.w3schools.com/xml New XML tutorial on W3Schools New XML tutorial on W3Schools </channel></rss>

11. How To Make It Work?

12.  Can be done with three methods  $.ajax(…)  $.get(…)  $.post(…)  $.get(…) and $.post(…) use $.ajax(…) under the hood  These methods load data from the server  Using rest service  Return JSON, Atom, RSS

13. $.ajax({ url: "RestService.svc/students/all", type: "GET", timeout: 5000, dataType: "json", success: function (students) { $('#loadStudentsButton').html("students loaded"); $('#loadStudentsButton').html("students loaded"); // do something with the students data // visualize them, etc… }, error: function (err) { error: function (err) { $('#loadStudentsButton').html("error: " + err.status); $('#loadStudentsButton').html("error: " + err.status); }}); The path of the REST Service (should be on the same server) Request type ('GET' or 'POST') The type of data to expect(JSON,XML) In case the request is successful In case the request is unsuccessful  Example of jQuery.ajax(…) get request

14. $.ajax({ url: "RestService.svc/students/new", type: "POST", timeout: 5000, contentType: "application/json", data: JSON.stringify(student), success: function () { $('#createStudentButton').html("student created"); //reload the students }, error: function (err) { $('#createStudentButton').html("error: " + err.status); }}); The type of data to sent to the server (JSON, XML) We have a student object (in JSON) and should make it readable for the server  Example of jQuery.ajax(…) post request

15. Live Demo

16. Questions?

17.  Complete the Students project by consuming the services and developing appropriate UI :  GET /students/subjects  Returns an array with all subjects  GET /students/subject-students ?subject=THE_SUBJECT  Returns an array of students, that have a mark for THE_SUBJECT