Web Services
Web Development 101
Lesson 04.01
Client-side is only half
of the web stack.
WEB ARCHITECTURE
ANATOMY OF AN HTTP REQUEST / RESPONSE PAIR
SAMPLE HTTP RESPONSE
http://www.jw.org/en/publication
Every web page is the result
of an HTTP transaction
Architect: Web Email Client
Entirely Web Based Email Client
Application


Clicking a folder displays the
contents of the f...
AJAX
Asynchronous Javascript and XML
AJAX

JSON
Asynchronous Javascript and XML
AJAX IN USE
Web APIs
Application Programming Interface (API).

Can use any data format—normally JSON is preferred.

Aim to provide dat...
Example 04.01.01
http://jsfiddle.net/crgwbr/vS88d/
Asynchronous execution
Simulated Concurrency
gettingContent = $.getJSON(url);	
gettingContent.done(function (data) {
console.log(1);
});
!

console.log(2);
var url = BASE_URL + vid + "?callback=?",	
gettingContent = $.getJSON(url);
Same-origin policy
Enforced by all major browsers

Prevents AJAX calls from being made to other domains

Web apps can’t (b...
Subverting | Same-origin Policy
Cross Origin Resource Sharing
Javascript (example1.com) makes request to API (example2.com)

Browser includes origin heade...
CORS Pitfalls
Recent addition to HTTP spec

All [new] API’s should support it, but don’t expect browser’s to

CORS is the ...
JSON with Padding (JSONP)
Exploits a loop-hole in browser security

Supported by all browsers and is commonly used.

Plan ...
JSONP
Browser creates script tag with API Resource as src

<script src=”http://www.jw.org/01001001?callback=abcdef”></scri...
HTTP Verbs
Semantic Meaning and Use
HTTP Verbs
Describe the what the client is attempting to accomplish with the
request.

Basic Verbs: GET, POST, HEAD

Recen...
Idempotent
[adjective]

Describes an operation that can be applied multiple times without
changing the result beyond the i...
i = 0

i = 0

!

!

f (x) ->
x + (i + 1);

f (x) ->
x + (++i);

>>> f(1)	
2	
>>> f(1)	
2	
>>> f(1)	
2

>>> f(1)	
2	
>>> f(...
GET: Request data from the server. Request is read-only and
idempotent.

POST: Save data from the client to the server. Re...
PUT: Replace existing data with data from the client. Request involves
writes, but is idempotent.

PATCH: Replace part of ...
Which verb would be correct?
Request the body of an email from the server

Send a new email

Delete an email

Save a new m...
Example 04.01.02
Bible Reading Application
jw.org Bible API
Editions Endpoint	
GET http://www.jw.org/en/publications/bible/json/	
Lists available Bible Editions and ...
Current Functionality

Hits jw.org Edition API

Lists available languages
New Requirements

Sort language list

English should still be the default
New Requirements
Add selects for:

Editions within a language

Books and chapters within an edition

All select filters sho...
Review
What kind of protocol is HTTP? 

What’s a Web API?


What are HTTP Verbs?


How do JS Apps access Web
APIs?


What ...
Upcoming SlideShare
Loading in …5
×

05 Web Services

291 views
164 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
291
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

05 Web Services

  1. 1. Web Services Web Development 101 Lesson 04.01
  2. 2. Client-side is only half of the web stack.
  3. 3. WEB ARCHITECTURE
  4. 4. ANATOMY OF AN HTTP REQUEST / RESPONSE PAIR
  5. 5. SAMPLE HTTP RESPONSE http://www.jw.org/en/publication
  6. 6. Every web page is the result of an HTTP transaction
  7. 7. Architect: Web Email Client Entirely Web Based Email Client Application Clicking a folder displays the contents of the folder Loading the application displays the inbox Clicking the compose button displays a modal window to write a new email Clicking on any of the messages displays the content of the message
  8. 8. AJAX Asynchronous Javascript and XML
  9. 9. AJAX JSON Asynchronous Javascript and XML
  10. 10. AJAX IN USE
  11. 11. Web APIs Application Programming Interface (API). Can use any data format—normally JSON is preferred. Aim to provide data to Applications, rather than full web-pages. Should use HTTP Verbs Semantically
  12. 12. Example 04.01.01 http://jsfiddle.net/crgwbr/vS88d/
  13. 13. Asynchronous execution Simulated Concurrency
  14. 14. gettingContent = $.getJSON(url); gettingContent.done(function (data) { console.log(1); }); ! console.log(2);
  15. 15. var url = BASE_URL + vid + "?callback=?", gettingContent = $.getJSON(url);
  16. 16. Same-origin policy Enforced by all major browsers Prevents AJAX calls from being made to other domains Web apps can’t (by default) call APIs on another domain
  17. 17. Subverting | Same-origin Policy
  18. 18. Cross Origin Resource Sharing Javascript (example1.com) makes request to API (example2.com) Browser includes origin header stating where the JS is from Origin: http://www.example1.com API decides http://www.example1.com is OK Response includes Access-Control-Allow-Origin header Access-Control-Allow-Origin: http://www.example1.com Browser allows request to finish when it sees the allow header
  19. 19. CORS Pitfalls Recent addition to HTTP spec All [new] API’s should support it, but don’t expect browser’s to CORS is the way of the future and the proper way to share resources, but still to unreliable.
  20. 20. JSON with Padding (JSONP) Exploits a loop-hole in browser security Supported by all browsers and is commonly used. Plan on using only as a patch until CORS support is better. Only supports making GET requests
  21. 21. JSONP Browser creates script tag with API Resource as src <script src=”http://www.jw.org/01001001?callback=abcdef”></script> Browsers have no problem with this Server responds with JSON wrapped in a function call. abcdef({“hello”: “world”}); Browser executes code, resulting in function call with object passed as a param. jQuery’s $.getJSON does this automatically by adding callback=? to the URL
  22. 22. HTTP Verbs Semantic Meaning and Use
  23. 23. HTTP Verbs Describe the what the client is attempting to accomplish with the request. Basic Verbs: GET, POST, HEAD Recently Added: PUT, PATCH, DELETE
  24. 24. Idempotent [adjective] Describes an operation that can be applied multiple times without changing the result beyond the initial application.
  25. 25. i = 0 i = 0 ! ! f (x) -> x + (i + 1); f (x) -> x + (++i); >>> f(1) 2 >>> f(1) 2 >>> f(1) 2 >>> f(1) 2 >>> f(1) 3 >>> f(1) 4
  26. 26. GET: Request data from the server. Request is read-only and idempotent. POST: Save data from the client to the server. Request involves a write and is not idempotent. HEAD: Same as GET, but only return the HTTP Headers.
  27. 27. PUT: Replace existing data with data from the client. Request involves writes, but is idempotent. PATCH: Replace part of the existing data with data from the client. Request involves writes, but is idempotent. DELETE: Delete the specified data. Request involves writes, but is idempotent.
  28. 28. Which verb would be correct? Request the body of an email from the server Send a new email Delete an email Save a new message draft Update an existing message draft Move an email to a new folder
  29. 29. Example 04.01.02 Bible Reading Application
  30. 30. jw.org Bible API Editions Endpoint GET http://www.jw.org/en/publications/bible/json/ Lists available Bible Editions and Languages Contains english and vernacular language names Contains links to Books Endpoint ! Books Endpoint GET http://www.jw.org/en/publications/bible/nwt/books/json/ Lists available books in the given language/edition ! Verse Range Endpoint GET http://www.jw.org/en/publications/bible/nwt/books/json/html/01001001 Returns rendered verse range Verse ID is 8 digits: <booknum><chapterNum><verseNum> Supports ranges with: <VerseID>-<VerseID>
  31. 31. Current Functionality Hits jw.org Edition API Lists available languages
  32. 32. New Requirements Sort language list English should still be the default
  33. 33. New Requirements Add selects for: Editions within a language Books and chapters within an edition All select filters should automatically update other select boxes’ values
  34. 34. Review What kind of protocol is HTTP? What’s a Web API? What are HTTP Verbs? How do JS Apps access Web APIs? What are each of the HTTP Verbs used for? What can AJAX be used for? What’s the Same Origin Policy? How does JS handle asynchronous events? How do you get around it?

×