external data access
DESCRIPTION
External Data Access. With jQuery and AJAX. Doncho Minkov. Telerik Corporation. www.telerik.com. Technical Trainer. Table of Contents. RESTful Web Services XML, JSON, RSS Consuming Our REST with jQuery Consuming Twitter REST with jQuery Twitter @Anywhere Twitter @Anywhere Features - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/1.jpg)
External Data Access
With jQuery and AJAX
Doncho MinkovTelerik
Corporationwww.telerik.com
Technical Trainer
![Page 2: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/2.jpg)
Table of Contents RESTful Web Services XML, JSON, RSS Consuming Our REST with jQuery Consuming Twitter REST with jQuery
Twitter @Anywhere Twitter @Anywhere Features Facebook API
![Page 3: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/3.jpg)
RESTful Web ServicesLightweight Architecture for Web
Services
![Page 4: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/4.jpg)
What is REST?"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
![Page 5: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/5.jpg)
RESTful Services One URI for a resource, multiple operations Add a new document "RestTalk" in
category "Code" PUT http://mysite.com/docs/Code/RestTalk
Get the document / some page GET http://mysite.com/docs/Code/RestTalk GET http://
mysite.com/docs/Code/RestTalk/pages/3 Remove the document
DELETE http://mysite.com/docs/Code/RestTalk
Retrieve metadata HEAD http://mysite.com/docs/Code/RestTalk
5
![Page 6: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/6.jpg)
XML, JSON, RSSComparing the Common Service Data
Formats
![Page 7: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/7.jpg)
XML 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
<?xml version="1.0"?><library> <book><title>HTML 5</title><author>Bay Ivan</author></book> <book><title>WPF 4</title><author>Microsoft</author></book> <book><title>WCF 4</title><author>Kaka Mara</author></book> <book><title>UML 2.0</title><author>Bay Ali</author></book></library>
![Page 8: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/8.jpg)
JSON 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, "address": { "streetAddress": "33 Alex. Malinov Blvd.", "city": "Sofia", "postalCode": "10021" }, "phoneNumber": [{ "type": "home", "number": "212 555-1234"}, { "type": "fax", "number": "646 555-4567" }]},{ "firstName": "Bay", "lastName": "Ivan", "age": 79 }
![Page 9: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/9.jpg)
RSS 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
![Page 10: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/10.jpg)
RSS – Example
10
<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel> <title>W3Schools Home Page</title> <link>http://www.w3schools.com</link> <description>Free web building tutorials</description> <item> <title>RSS Tutorial</title> <link>http://www.w3schools.com/rss</link> <description>New RSS tutorial on W3Schools</description> </item> <item> <title>XML Tutorial</title> <link>http://www.w3schools.com/xml</link> <description>New XML tutorial on W3Schools</description> </item></channel></rss>
![Page 11: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/11.jpg)
Consuming REST with jQuery
How To Make It Work?
![Page 12: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/12.jpg)
Consuming REST With jQuery
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
![Page 13: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/13.jpg)
Example of $.ajax(…)$.ajax({
url: "RestService.svc/students/all",type: "GET", timeout: 5000, dataType: "json",success: function (students) {
$('#loadStudentsButton').html("students loaded");
// do something with the students data// visualize them, etc…
}, error: function (err) { $('#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
![Page 14: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/14.jpg)
Example of $.ajax(…)$.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
![Page 15: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/15.jpg)
Consuming Our REST
with jQueryLive Demo
![Page 16: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/16.jpg)
Questions?
External Data Access
![Page 17: External Data Access](https://reader036.vdocuments.mx/reader036/viewer/2022062323/568165ad550346895dd89995/html5/thumbnails/17.jpg)
Homework 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