External Data Access with jQuery

External Data Access With jQuery and AJAX Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it

Table of Contents ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

RESTful Web Services Lightweight Architecture for Web Services

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 ,[object Object],[object Object],[object Object],[object Object]

RESTful Services ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

XML, JSON, RSS Comparing the Common Service Data Formats

XML ,[object Object],[object Object],[object Object],[object Object],<?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>

JSON ,[object Object],[object Object],[object Object],[object Object],{ "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 }

RSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

RSS – Example <?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>

Consuming REST with jQuery How To Make It Work?

Consuming REST With jQuery ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example of $.ajax(…) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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 ,[object Object]

Example of $.ajax(…) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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 ,[object Object]

Consuming Our REST with jQuery Live Demo

Consuming Twitter REST with jQuery Lets Make Our Own Twitter?

Twitter Rest API ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Twitter Rest API (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Methods of Twitter REST API ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Example of $.ajax(…) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Twitter @Anywhere How To Make It Easy?

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Example of $.ajax(…)

How to Use @Anywhere? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<script src="http://platform.twitter.com/ anywhere.js?id=YOUR_APP_ID&v=1"></script>

Search Widget ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tweets List Widget ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Twitter @Anywhere Features Login/Logout, Tweet, etc.

Login – Logout ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],function logOut() { twttr.anywhere.signOut(); } ,[object Object]

Features ,[object Object],twttr.anywhere(function (T) { T("#tbox").tweetBox(); }); ,[object Object],twttr.anywhere(function (T) { T('#follow-donchominkov').followButton("donchominkov"); });

Facebook API Lets Play a Little with Facebook

Facebook JavaScript SDK ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

External Data Access with jQuery

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a External Data Access with jQuery

Similar a External Data Access with jQuery (20)

Más de Doncho Minkov

Más de Doncho Minkov (20)

Último

Último (20)

External Data Access with jQuery