with jquery and ajax doncho minkov telerik corporation technical trainer
TRANSCRIPT
![Page 1: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/html5/thumbnails/1.jpg)
External Data Access
With jQuery and AJAX
Doncho Minkov
Telerik Corporationwww.telerik.com
Technical Trainer
![Page 2: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/html5/thumbnails/3.jpg)
RESTful Web ServicesLightweight Architecture for Web
Services
![Page 4: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/html5/thumbnails/6.jpg)
XML, JSON, RSSComparing the Common Service Data
Formats
![Page 7: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/html5/thumbnails/11.jpg)
Consuming REST with jQuery
How To Make It Work?
![Page 12: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/html5/thumbnails/15.jpg)
Consuming Our REST
with jQueryLive Demo
![Page 16: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/html5/thumbnails/16.jpg)
Questions?
External Data Access
![Page 17: With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer](https://reader030.vdocuments.net/reader030/viewer/2022032703/56649cf75503460f949c7408/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