The document discusses web development topics including: - HTTP is the protocol for requesting and transmitting web pages and web APIs use HTTP verbs like GET and POST. - Asynchronous JavaScript and XML (AJAX) allows dynamic web page updates by making HTTP requests in the background. - The same-origin policy prevents JavaScript from making requests across domains for security reasons. Cross-origin resource sharing (CORS) and JSON with padding (JSONP) work around this limitation. - Common HTTP verbs include GET (retrieve data), POST (submit/save data), PUT/PATCH (update data), and DELETE (remove data).

1. Web Services
Web Development 101
Lesson 04.01

2. Client-side is only half
of the web stack.

3. WEB ARCHITECTURE

4. ANATOMY OF AN HTTP REQUEST / RESPONSE PAIR

5. SAMPLE HTTP RESPONSE
http://www.jw.org/en/publication

6. Every web page is the result
of an HTTP transaction

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. AJAX
Asynchronous Javascript and XML

9. AJAX
JSON
Asynchronous Javascript and XML

10. AJAX IN USE

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. Example 04.01.01
http://jsfiddle.net/crgwbr/vS88d/

13. Asynchronous execution
Simulated Concurrency

14. gettingContent = $.getJSON(url);
gettingContent.done(function (data) {
console.log(1);
});
!
console.log(2);

15. var url = BASE_URL + vid + "?callback=?",
gettingContent = $.getJSON(url);

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. Subverting | Same-origin Policy

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. 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. 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. 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. HTTP Verbs
Semantic Meaning and Use

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. Idempotent
[adjective]
Describes an operation that can be applied multiple times without
changing the result beyond the initial application.

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. 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. 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. 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. Example 04.01.02
Bible Reading Application

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. Current Functionality
Hits jw.org Edition API
Lists available languages

32. New Requirements
Sort language list
English should still be the default

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. 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?