Web
Some examples for today are available here:
https://github.com/cs125-illinois/lecture-webapis-examples
Feel free to fork!
> Click or hit Control-Enter to run Example.main above
What is the World Wide Web?
-
A protocol: the Hypertext Transfer Protocol (HTTP)
-
A markup language: the Hypertext Markup Language (HTML)
-
A styling language: Cascading Style Sheets (CSS)
-
A programming language: JavaScript
HTTP: GET Request
HTTP defines how web browsers request (GET) content:
When you type
http://cs125-illinois.github.io/lecture-webapis-examples/simple.html
into your browser, it sends a message to cs125-illinois.github.io that looks
like this:
GET /lecture-webapis-examples/simple.html HTTP/1.1
Host: cs125-illinois.github.ioGET Parameters
You can send some data to the server in a GET request using query
parameters.
-
These follow the path and an
?sign in the URL -
Each takes the form
key=value -
Key-value pairs are separated by
&delimiters -
Here’s an example:
search?safe=off&source=hp?q=cs125:-
safe=off -
source=hp -
q=cs125
-
HTTP: GET Response
If the request succeeds, the server responds with something that looks like this:
HTTP/1.1 200 OK
Date: Sun, 08 Apr 2018 08:56:53 GMT
Last-Modified: Sat, 20 Nov 2014 07:16:26 GMT
Content-Length: 44
Content-Type: text/html
<html>
<body>
...HTTP: POST Request
HTTP also defines how web browsers submit information (POST):
When you submit the form on
http://cs125-illinois.github.io/lecture-webapis-examples/form.html,
it sends a message to cs125-illinois.github.io that looks like this:
POST /lecture-webapis-examples/simple.html HTTP/1.1
Host: cs125-illinois.github.io
text=wordNote that this fails on github.io because it only serves static pages and
doesn’t deal with data provided by users.
HTTP: GET and POST
HTTP defines many other types of requests, but GET and POST are by far the
most common.
-
Every time you load a web page it starts with a
GET, and usually that’s followed by many otherGETrequests to fetch others parts of the page: style sheets, images, JavaScript code. -
Every time you submit a form it uses a
POSTto send data to the server, at which point your Facebook comment is recorded, or your credit card is charged and an package starts its way toward your house
HTTP: GET v POST
The HTTP protocol specifies different semantics for GET and POST:
-
GETshould not change anything about the world, just return a document -
POSTshould change something about the world—create a new account, pay your bill, purchase something, send a message, etc. -
As a result it is safe to repeat a
GETbut potentially problematic to repeat aPOST: hence the "Do not click back" and "Do not submit this form twice" kind of warnings.
Web Page Contents: HTML
HTML defines how each page is structured:
<h1>This is a Simple Web Page</h1>
<p>
HTML includes both content and instructions to the browser determining
how the content should look. For example, the following items should be
in a numbered list:
</p>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<p>
<strong>Here is some bold text.</strong> <i>And this in italics.</i>
</p>Web Evolution
The web has gone through many design changes over the years.
-
Static Sites: the web server returns a file from the disk that contains a complete web document
-
Example: most of
cs125.cs.illinois.eduis a static website
-
-
Dynamic Sites: the web server runs code to produce an HTML document and respond to
POSTrequests created by forms-
Example: sites like
my.cs.illinois.eduare dynamic sites
-
-
Web Apps: most of the site is generated by JavaScript that runs in the user’s browser, with the server providing data as needed
-
Examples:
cs125.cs.illinois.edu/m/grades, Discourse, Gmail, Google Docs
-
Web Page Contents: CSS
CSS defines how each page looks:
body {
font-family: sans-serif;
}
h1 {
font-size: 48px;
font-weight: bold;
}Web Page Contents: JavaScript
JavaScript defines what each page does:
setInterval(function () {
var x = document.getElementById("title")
if (x.style.visibility === "visible") {
x.style.visibility = "hidden"
} else {
x.style.visibility = "visible"
}
}, 1000)Announcements
-
We’ve posted some MP6 errata. Please follow these screencasts if you are having a hard time getting your environment set up.
-
The anonymous feedback form remains available on the course website. Use it to give us feedback!
-
My office hours continue today at 11AM in the lounge outside of Siebel 0226.