Every web page is the result
of an HTTP transaction
Architect: Web Email Client
Entirely Web Based Email Client
Clicking a folder displays the
contents of the folder
Loading the application displays
Clicking the compose button
displays a modal window to
write a new email
Clicking on any of the messages
displays the content of the
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
Cross Origin Resource Sharing
Browser includes origin header stating where the JS is from
API decides http://www.example1.com is OK
Response includes Access-Control-Allow-Origin header
Browser allows request to ﬁnish when it sees the allow header
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.
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
Browser creates script tag with API Resource as src
Browsers have no problem with this
Server responds with JSON wrapped in a function call.
Browser executes code, resulting in function call with object passed as a
jQuery’s $.getJSON does this automatically by adding callback=? to the URL
Describe the what the client is attempting to accomplish with the
Basic Verbs: GET, POST, HEAD
Recently Added: PUT, PATCH, DELETE
Describes an operation that can be applied multiple times without
changing the result beyond the initial application.
i = 0
i = 0
f (x) ->
x + (i + 1);
f (x) ->
x + (++i);
GET: Request data from the server. Request is read-only and
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.
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 speciﬁed data. Request involves writes, but is
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
jw.org Bible API
Lists available Bible Editions and Languages
Contains english and vernacular language names
Contains links to Books Endpoint
Lists available books in the given language/edition
Verse Range Endpoint
Returns rendered verse range
Verse ID is 8 digits: <booknum><chapterNum><verseNum>
Supports ranges with: <VerseID>-<VerseID>
Hits jw.org Edition API
Lists available languages
Sort language list
English should still be the default
Add selects for:
Editions within a language
Books and chapters within an edition
All select ﬁlters should automatically update other select boxes’ values
What kind of protocol is HTTP?
What’s a Web API?
What are HTTP Verbs?
How do JS Apps access Web
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
How do you get around it?