HTTP-Data
Table of Contents
1 Sending Data with HTTP
- GET
- Query arguments in URL
- POST
- Data in request body
- PUT
- Data in request body
1.1 Arguments notes
- Generally, the set of inputs to a function
- Also called parameters
- Functions take data in, return data out
- HTTP calls can be conceptualized as functions (though just one metaphor)
2 Query Arguments
- ?name=Jim&title=i253
- Typically used in GET requests
- Key-Value pairs delimited by =, separated by &
3 Key-Value pairs in Programming
- Hash, Dictionary, HashMap, map
dictionary[key] = value
3.1 Dictionary variable notes
- one variable with many values inside
- Dictionary: word to meaning
- Map: Mathematical term for turning one set of values into another
- Hash: CS method of storing a dictionary
4 GET Review
- What does GET do?
- Should GET modify a resource?
- How is data passed to GET?
4.1 Answers notes
- Request a representation of a resource
- No
- Query Arguments / Parameters
5 GET Request
GET /home?name=World&title=Hello HTTP/1.1 Host: localhost
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 231
Server: Werkzeug/0.8.3 Python/2.7.3
Date: Fri, 21 Sep 2012 04:17:46 GMT
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Hello</title>
<link rel="stylesheet" href="static/css/default.css">
</head>
<body>
<div class="container">
Hello World
</div>
</body>
</html>
5.1 Parts of Response notes
- Headers
- Key-Value pairs, separated by
:
- Key-Value pairs, separated by
- Then data
6 Content-Type Header
- Describes what format the data is in
- MIME: Multipurpose Internet Mail Extensions
- Internet Media Type, Content-Type
6.1 Names notes
- Usually referred to as MIME type, though acronym has Mail in it
- Used throughout systems, from Internet to OS (what application to open)
- So it can be referred to by other names
6.2 Format
- MIME
- type / subtype ; parameters
- type
- the general category of data
- subtype
- formats, encodings
- parameters
- extra information that applies to that subtype
6.3 Type / Subtype notes
- type
- text, image, audio, video
- subtype
- plain, png, mpeg, ogg
- parameters
- charset, version number, …
6.4 Extensible
- Common MIME types are registered
text/plainimage/pngaudio/mpeg- Make up your own with
vnd.,prs.
6.5 Extensible X- notes
- Formerly,
x-was used for experimental types, but has been removed due to conflicts and difficulty in bringing to production vnd.for vendors,prs.for personal,x.for backward compatibilityapplication/x-www-form-urlencodedstarted without getting registered, continued onX-a common theme. You'll see it in Headers as well, but is now not good practice
7 Pranks with Content-Type two_col
- Install a proxy
- Detect images
- Make them wet
7.1 Details notes
- A proxy acts as a go-between for clients (eg. in an office) and servers
- Proxy can modify a request or response
- Image manipulation libraries can alter images
7.2 Flip Images
7.3 Free WiFi revenge notes
- Noticed someone using wifi
- Installed proxy to flip all the images
- http://www.ex-parrot.com/pete/upside-down-ternet.html
8 POST & PUT Data
- Requests have metadata (Headers)
- Requests can have data, too
- Data is formated similarly to query arguments
8.1 POST & PUT Data
PUT /wiki HTTP/1.1 Host: localhost Content-Length: 21 Content-Type: application/x-www-form-urlencoded url=http://disney.com
HTTP/1.0 200 OK Content-Type: text/html; charset=utf-8 Content-Length: 32 Server: Werkzeug/0.8.3 Python/2.7.3 Date: Fri, 21 Sep 2012 04:24:43 GMT Stored wiki => http://disney.com
8.2 Elements notes
- Still using Host header
- Content-Length: number of bytes in the data section
- Content-Type: How the content is formated
application/x-www-form-urlencodedmeans encoded like GET query arguments
9 POST in practice
- Most browsers only support
GET,POST - HTML5 (currently) only supports
GET,POST - So resource accessed by browsers, use
POSTfor all modifying interactions
9.1 Changing notes
- AJAX requests generally work with all methods
- Can "tunnel" requests by using a hidden field, \method="DELETE"
- Keep up with standard
- https://www.w3.org/Bugs/Public/show_bug.cgi?id=10671
- For APIs, use appropriate methods
10 Query Arguments
- Delimited by =, separated by
& - What happens if you want to send a
? - What happens if you want to send a
&? - Just like HTML we need to encode the data
10.1 Encoding
- Map one representation of data to another
- Map normal text to a format accepted by HTTP query params
- Map special characters to the hexidecimal representation
10.2 URL Encoding
- =
%3D- &
%26- space
%20
10.3 Tips notes
10.4 HTML Encoding
- <
<- &
&- >
>- ☃
☃
10.5 Tips notes
- You can encode any character with decimal or hex encoding
- http://www.w3.org/International/questions/qa-escapes
11 Encoding Schemes
GET /home?name=Jim%20%26%20Jenny&title=Awesome HTTP/1.1
Host: localhost
HTTP/1.0 200 OK Content-Type: text/html; charset=utf-8 Content-Length: 243 Server: Werkzeug/0.8.3 Python/2.7.3 Date: Fri, 21 Sep 2012 04:36:18 GMT <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Awesome</title> <link rel="stylesheet" href="static/css/default.css"> </head> <body> <div class="container"> Hello Jim & Jenny </div> </body> </html>
11.1 HTTP Encoding => HTML Encoding notes
- Note how ampersand has two representations depending on encoding scheme!
12 POST & PUT Data
POST /wiki HTTP/1.1 Host: localhost Content-Length: 21 Content-Type: application/x-www-form-urlencoded url=http://disney.com
HTTP/1.0 200 OK Content-Type: text/html; charset=utf-8 Content-Length: 32 Server: Werkzeug/0.8.3 Python/2.7.3 Date: Fri, 21 Sep 2012 04:24:43 GMT Stored wiki => http://disney.com
12.1 More notes
- What do I change to add an extra parameter to this PUT request?
Content-Lengthand append&key=value
13 Forms & HTTP
<form method="GET"> <input type="text" name="school"/> <input type="checkbox" name="classes" value="i253"/> <input type="checkbox" name="classes" value="cs61a"/> <input type="submit"/> </form>
?school=Berkeley&classes=i253&classes=cs61a
13.1 Interpretation notes
- Most frameworks change multiple names to a list of values
- Changing method to POST will send data via post request
- When do you want to do this?
14 Review Content-Type
- Request header used to describe data being sent
- Response header used to describe data in return
- Required in many situations for understanding
14.1 Homework notes
- In the homework, remember to set the
Content-Type