1 / 0

External Data Access

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 REST with jQuery Consuming Twitter REST with jQuery Twitter @Anywhere Twitter @Anywhere Features

snow
Download Presentation

External Data Access

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. External Data Access

    With jQuery and AJAX Doncho Minkov Telerik Corporation www.telerik.com Technical Trainer
  2. Table of Contents RESTful Web Services XML, JSON, RSS Consuming REST with jQuery Consuming Twitter REST with jQuery Twitter @Anywhere Twitter @Anywhere Features Facebook API
  3. RESTful Web Services

    Lightweight Architecture for Web Services
  4. 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
  5. 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
  6. XML, JSON, RSS

    Comparing the Common Service Data Formats
  7. 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 <?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>
  8. JSON JSON (JavaScript Object Notation) Standard for representing simple data structures and associative arrays Lightweight text-based open standard Derived from the JavaScriptlanguage { "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 }
  9. 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
  10. 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>
  11. Consuming REST with jQuery

    How To Make It Work?
  12. 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
  13. Example of $.ajax(…) The path of the REST Service (should be on the same server) $.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); } }); 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. 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
  15. Consuming Our REST with jQuery

    Live Demo
  16. Consuming Twitter REST with jQuery

    Lets Make Our Own Twitter?
  17. Twitter Rest API First lets get familiar with the Twitter REST API We are given a set of methods to Get a number of tweets for a given user Post a tweet using jQuery Search tweets Etc… First need to register a twitter app
  18. Twitter Rest API (2) Registering a Twitter App Go to http://dev.twitter.com Register a App When your app is registered you get: Consumer key The key your app authorizes with Consumer secret Used for user authentication
  19. Methods of Twitter REST API GET statuses/user_timeline Returns the 20 most recent statuses posted by the authenticating user It is also possible to request another user's timeline by using The screen_nameor user_idparameter The other users timeline will only be visible if they are not protected If the authenticating user's follow request was
  20. Example of $.ajax(…) $.ajax({ url : https://twitter.com/statuses/user_timeline/"+ user+".json?callback=?" dataType: "json", timeout:5000, success : function(data) { //Visualize Tweets }, error : function() { //Visualize Errors }, }); Getting Tweets from Twitter with jQuery
  21. Tweets

    Live Demo
  22. Twitter @Anywhere

    How To Make It Easy?
  23. Example of $.ajax(…) What is Twitter @Anywhere? An easy-to-deploy solution Bringing the Twitter communication platform Promotes a more engaged user base Can be used to add FollowButtons, Hovercards, linkifyTwitterusernames Build integrations with "Connect to Twitter"
  24. How to Use @Anywhere? With a registered App at dev.twitter.com You get a AppId In the head part of the app include With anywhere.js included A twttrobject and an anywherefunction Used to make the magic with anywhere <script src="http://platform.twitter.com/anywhere.js?id=YOUR_APP_ID&v=1"></script>
  25. @Anywhere Example

    Live Demos
  26. Search Widget new TWTR.Widget({ version: 2, type: 'search', search: , interval: 300, title: 'It\'s a double rainbow', subject: 'Across the sky', width: 250, height: 300, theme: { shell: {background:'#70fd90',color: '#000000'}, tweets: {background: '#c6fec7', color: '#444444', links: '#1985b5'} }, features: { scrollbar: true, loop: true, live: true, behavior: 'default' } }).render().start();
  27. Tweets List Widget new TWTR.Widget({ version: 2, type: 'profile', search: , interval: 300, title: 'It\'s a double rainbow', subject: 'Across the sky', width: 250, height: 300, theme: { shell: {background:'#70fd90',color: '#000000'}, tweets: {background: '#c6fec7', color: '#444444', links: '#1985b5'} }, features: { scrollbar: true, loop: true, live: true, behavior: 'default' } }).render().start();
  28. Twitter Widgets

    Live Demo
  29. Twitter @Anywhere Features

    Login/Logout, Tweet, etc.
  30. Login – Logout twttr.anywhere(function (T) { T("#login").connectButton({ authComplete: function(user) { //something to do after authentication }, }); }); Login: Logout function logOut() { twttr.anywhere.signOut(); }
  31. Login/Logout

    Live Demo
  32. Features Tweet Box twttr.anywhere(function (T) { T("#tbox").tweetBox(); }); Follow Button twttr.anywhere(function (T) { T('#follow-donchominkov').followButton("donchominkov"); });
  33. Twitter @Anywhere

    Live Demo
  34. Facebook API

    Lets Play a Little with Facebook
  35. Facebook JavaScript SDK Facebook provides a SDK for JavaScript To use the functionality of Facebook Should register an app Through phone number With credit card Absolutely free Made for precautions
  36. Facebook API

    Live Demo
  37. External Data Access
More Related