Transcript curl - SMU

HTML forms, HTTP, & REST
HTML Forms
• A composition of controls that include
buttons, checkboxes, text input, etc. that are
used to capture user input.
• Rely on an action attribute to specify where
to send the form data.
• Rely on a method attribute to specify how to
process the form data.
HTML Form action attribute
• Specifies a form processing agent
• Usually an HTTP URI
• Could launch an email client. Useful for debugging
<form name="myWebForm" action=“processForm.php"
method="post">
<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>
HTML Form method attribute
• Specify the HTTP method to submit the form
• Two possible values:
– get
– post
Form Controls
• Types of controls:
– Button
– Checkbox
– Radio button
– Hidden Control
– File Select
– Text input
– Menus
– Others
Additional Info
• Controls have initial values which can be
specified using the value attribute.
• When a form is reset using a reset input
control, all inputs values will be restored to
their initial value.
Adding Structure to forms
• Some form controls automatically have labels
associated with them (button)
• Other form controls do not have labels
(textfields, checkboxes, radio buttons, menus).
• Use the <label> element to specify labels
for controls that do not have implicit labels.
Labels
• Each label element is associated with exactly
one control
• Use the for attribute to explicitly associate a
label with a control
• The for attribute value must match the id
attribute of the associated control
Label example
<label for=“fname”>First Name:</label>
<input type=“text” id=“fname” name=“fname”/>
or
<label for=“fname”>First Name:
<input type=“text” id=“fname”
name=“fname”/>
</label>
Benefits of using a <label>
• When a user clicks the text inside the <label>,
the associated control is automatically
focused.
Adding structure to forms
• The <fieldset> element allows developers to
group related controls and labels.
• The <legend> element allows developers to
assign a caption to a fieldset.
Complete Form Example
<form action="showResponse.php?foo=bar" method="post">
<label for="userName">Username:</label>
<input type="textarea" name="userName" id="userName"/>
Gender:
<label for="male">Male</label><input type="radio" id="male" name="sex" value="male"/>
<label for="female">Female</label><input type="radio" id="female" name="sex" value="female"/>
<label for="bi">Both</label><input type="radio" id="bi" name="sex" value="bi">
<fieldset>
<legend>Cookies you like</legend>
<label for="sugar">Sugar</label><input type="checkbox" id="sugar" name="cookiePref[]" value="sugar"/>
<label for="oatmeal">Oatmeal</label><input type="checkbox" id="oatmeal" name="cookiePref[]"
value="oatmeal"/>
<label for="chocChip">Chocolate Chip</label><input type="checkbox" id="chocChip" name="cookiePref[]"
value="chocChip"/>
<label for="snicker">Snickerdoodle</label><input type="checkbox" id="snicker" name="cookiePref[]"
value="snicker"/>
</fieldset>
<select name="car">
<option value="Ford">Ford</option>
<option value="Chevy">Chevy</option>
<option value="Hummer">Hummer</option>
</select>
<!-- Use this to specify POST, PUT, or DELETE HTTP Methods
This requires the server look for this param being passed in -->
<input type="hidden" name="putOrDelete" value="PUT"/>
<label for="passwd">Password</label><input type="password" id="passwd" name="passwd"/>
<input type="submit" value="Submit"/>
</form>
Successful Controls
• A successful control is “valid” for submission.
• These controls have their name paired with
their current value and are submitted for
processing.
• Any disabled control can not be successful
Successful Controls
• All “on” checkboxes may be successful
• Only one “on” radio box with the same name
attribute can be successful.
• Only selected values in a menu can be
successful.
Let’s give it a try!
http://lyle.smu.edu/~jmmurphy/cse3345/http/form.ht
ml
HTTP
HTTP Outline
• HTTP Communications Protocol
• HTTP Request Methods
• HTTP Messages
– Request Messages
– Using telnet, curl, and hurl
– Response Messages
• Response Status Codes
HTTP Quick facts
• HTTP – Hypertext Transfer Protocol
• Invented by Tim Berners-Lee and his team
• Is an application level protocol on top of
TCP/IP
HTTP Communication
• HTTP is a protocol where clients and servers
communicate with messages.
• An HTTP client (usually a browser) sends
message requests to servers on Port 80.
• HTTP Servers wait for client HTTP requests
and respond with response messages.
HTTP Communication
• The point of HTTP Communication is to access a
particular resource and perform a particular
action on it.
• To GET the contents of the SMU webpage, you
visit www.smu.edu.
• People POST data to www.amazon.com to create
an order when they want to buy an item.
HTTP Communication
• The internet’s sole purpose is to get, edit,
create, and delete resources (and maybe
waste a lot of your time).
HTTP Outline
• HTTP Communications Protocol
• HTTP Request Methods
• HTTP Messages
– Request Messages
– Using curl
– Response Messages
• Response Status Codes
HTTP Request Methods
• HTTP1.1 defines 9 methods that indicate a
desired action to be performed on a resource.
Methods
HEAD
PUT
OPTIONS
GET
DELETE CONNECT
POST
TRACE PATCH
HTTP Request Methods
• We will only focus on 4
Methods
HEAD
PUT
OPTIONS
GET
DELETE CONNECT
POST
TRACE PATCH
HTTP GET
• Requests a specified resource
• Should only be used to retrieve data and have
no other side effect
HTTP POST
• Submits data to be processed to the identified
resource
• Used to create data
• Used to edit data
HTTP PUT
• Uploads a representation of the specified
resource
• Updates or edits a resource
• Must update the entire resource. Not just
parts of it.
HTTP DELETE
• Deletes a specified resource
HTTP Safe Methods
• Safe methods are intended for information
retrieval only and do not change the state of a
server.
Safe Methods
HEAD
OPTIONS
GET
TRACE
HTTP Idempotent Methods
• Idempotent – multiple identical requests should
have the same effect on the server as a single
request.
• Idempotent doesn’t mean the response won’t be
different.
• Idempotent means the server state will be the same
every time for multiple requests.
HTTP Idempotent Methods
Idempotent Methods
GET
OPTIONS
PUT
HEAD
DELETE
TRACE
Not Safe or Idempotent
• POST is not a safe or idempotent method!
HTTP Police
• There are no HTTP Police to enforce whether a
method is Safe or Idempotent.
• The HTTP protocol nor the web server enforce
this for you.
• It is up to YOU as the back-end developer!
HTTP Police
• ONLY YOU can prevent GET methods from
triggering server state changes!
HTTP Outline
• HTTP Communications Protocol
• HTTP Request Methods
• HTTP Messages
– Request Messages
– Using telnet, curl, and hurl
– Response Messages
• Response Status Codes
HTTP Messages
• Contain the URI aka resource, the request
method (GET), and additional info.
HTTP Message Format
• An initial line
• Zero or more header lines
• Message body
HTTP Request Message Example
GET http://www.google.com/ HTTP/1.1
User-Agent: Fiddler
Host: www.google.com
Initial line
Headers line
body
Initial Line: Request Message
• Consists of 3 parts separated by spaces:
1. HTTP Method name (GET,POST, etc.)
2. Local path of requested resource
3. Version of HTTP being used
1
2
3
GET /path/to/file/index.html HTTP/1.1
Header Lines: Request Message
• Header fields define additional information about the
HTTP message.
• Several possible request message headers, see wiki.
Notable Request Headers
Host
Content-type
Content-length
Date
User-Agent
Header Lines: Request Message
• In HTTP 1.1, a client must specify a Host
header.
• For POST requests that include a body, a client
must also specify Content-type and ContentLength
Message body: Request Message
• Used to store data for POST, PUT, and DELETE
methods.
HTTP Request Message Example
POST http://www.google.com/ HTTP/1.1
User-Agent: Fiddler
Host: www.google.com
Content-type: application/x-www-form-urlencoded
Content-Length: 8
Initial line
Headers line
name=ted
body
HTTP Outline
• HTTP Communications Protocol
• HTTP Request Methods
• HTTP Messages
– Request Messages
– Using telnet, curl, and hurl
– Response Messages
• Response Status Codes
Sending a GET request with a browser
• Open your favorite browser
• Paste your GET request string in the URL bar
and submit it
http://lyle.smu.edu/~jmmurphy/cse3345/http/s
howResponse.php?param1=smu&param2=mustangs
How to send a GET request with
Parameters
• GET requests can append a query string to the
end of the requested URI
URI: www.example.com
URI and Query Separator: ?
Query String Parameters:
1. Key: n1, Value: bob
2. Key: n2, Value: sally
GET REQUEST = (URI + Separator + Query String)
GET Request: URI and Separator
• Concatenate the URI and Separator together
URI: www.example.com
URI and Query Separator: ?
www.example.com?
GET Request: Query String
Query String parameters:
1. Key: n1, Value: bob
2. Key: n2, Value: sally
• Create a key-value pair by concatenating the key with
the value separated by an “=“ character.
– n1=bob
– n2=sally
• Create the query string by concatenating all key-value
pairs together separated by a “&” character.
– n1=bob&n2=sally
GET Request: URI + Separator + Query
String
• Concatenate them all together
URI: www.example.com
URI and Query Separator: ?
Query String Parameters:
1. n1 = bob
2. n2 = sally
www.example.com?n1=bob&n2=sally
Using telnet: GET
• $ telnet www.google.com 80
1. GET / HTTP/1.1
2. Host: www.google.com
3. <enter>
Using telnet: POST
• $ telnet www.google.com 80
1.
2.
3.
4.
5.
6.
POST / HTTP/1.1
Host: www.google.com
Content-type: application/x-www-form-urlencoded
Content-length: 8
<enter>
name=ted
Using curl command
• curl – used to transfer data to/from servers
• Useful for fetching a webpage
$ curl “www.google.com”
Using curl command: -i
• Use –i option to print HTTP header
information for a fetched webpage
$ curl –i “www.google.com”
Using curl command: Send GET
request
• GET data immediately follows the request URI
and begins with a “?”
curl “www.example.com?n1=bob&n2=sally”
POST Requests
• POST requests use the same query string as a
GET request
• However for POST requests, the query string is
not included in the URL but in the client
request body
Send a POST request with the browser
• Use an HTML form with the action set to post.
Using curl command: Send POST
request
• POST query string is sent with the –d
parameter.
• You don’t need the “?” for POST requests.
curl –d “n1=bob&n2=sally” “www.example.com”
Using curl command: -X
• Use –X option to specify a custom HTTP
request method (GET, PUT, DELETE, POST).
$
$
$
$
curl
curl
curl
curl
–X
–X
–X
–X
GET “www.google.com”
PUT “www.google.com”
DELETE “www.google.com”
POST “www.google.com”
Using curl command: Send PUT
request
• PUT query string is sent with the –d
parameter.
• You don’t need the “?” for PUT requests.
curl –d –X PUT “n1=bob&n2=sally” “www.example.com”
Using curl command: Send DELETE
request
• DELETE query string is sent with the –d
parameter.
• You don’t need the “?” for DELETE requests.
curl –d –X DELETE “n1=bob&n2=sally” “www.example.com”
Hurl
• Online utility for making CURL requests
• http://www.hurl.it/
HTTP Outline
• HTTP Communications Protocol
• HTTP Request Methods
• HTTP Messages
– Request Messages
– Using telnet, curl, and hurl
– Response Messages
• Response Status Codes
HTTP Response Message
• The message sent from the server to the client
after the server receives a request message.
HTTP Response Message Format
• An initial line
• Zero or more header lines
• Message body
HTTP Response Message Example
HTTP/1.1 200 OK
initial line
Date: Sat, 15 Sep 2012 04:45:14 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=ISO-8859-1
Set-Cookie: PREF=ID=eff3eeca6edc9216:FF=0:TM=1347684314:LM=1347684314:S=rYavmahIW-zC321Y; expires=Mon,
15-Sep-2014 04:45:14 GMT; path=/; domain=.google.com
Set-Cookie: NID=63=rRYwex2AO2q9Z2y6lde7aRvbY6rCNEPy4nzW47g0MeAfofvScqQZt3Zc4jz097J31Xs9HxE46ZtaB6l6803pj9KYexa5Zs0QyzXJ1KxjexFtFGa7XQayzd7SoiqH0R4; expires=Sun, 17-Mar-2013
04:45:14 GMT; path=/; domain=.google.com; HttpOnly
headers
P3P: CP="This is not a P3P policy! See
http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."
Server: gws
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Transfer-Encoding: chunked
line
<!doctype html……
body
Initial Line: Response Message
• Consists of 3 parts separated by spaces:
– The version of HTTP being used
– Response status codes
– English phrase describing the status code
1
2
3
HTTP/1.1
200
OK
HTTP Response Status Codes
• Success codes in 2xx
–
–
–
–
OK 200
CREATED 201
Accepted 202
No Response 204
• Error codes in 4xx
– Forbidden 403
– Not found 404
HTTP Response Status Codes
• Error codes in 5xx
– Internal error 500
– Not implemented 501
• Redirection 3xx
– Moved 301
– Found 302
– Not modified 304
Headers Line: Response Message
• Provide information about the response
Headers
• Date
• Expires
• Content-type
Header Lines: Response Message
• In HTTP 1.1, a server must specify a Date
header.
Message Body: Response Message
• Can contain html, xml, json, etc
• Usually returns html for webpage
REST
REST Outline
• What is REST?
• REST Web Services
• HTML and REST
What is REST?
• Representational State Transfer (REST)
• Defines architectural principles for creating
web services that focus on a system’s
resources.
• Used by a wide range of clients written in
many different programming languages.
REST Outline
• What is REST?
• REST Web Services
• HTML and REST
REST Web Services
Follows four basic principles:
1.
2.
3.
4.
Use HTTP methods explicitly
Be stateless
Expose directory structure-like URIs
Transfer XML, JSON, or text
1. Use HTTP methods explicitly
• Use methods that follow the HTTP protocol.
• This principle establishes a 1:1 mapping of
CRUD operations to HTTP methods.
CRUD to HTTP methods
CRUD – create, read, update, and delete
•
•
•
•
To create a resource on the server use POST
To retrieve a resource use GET
To update an entire resource use PUT
To delete a resource use DELETE
Bad Web APIs
• Many Web APIs misuse and abuse HTTP
methods
This example uses HTTP GET to trigger a transaction to create a
new user named Robert.
GET /adduser?name=Robert
Bad Web APIs
This example uses HTTP GET to trigger a transaction to delete
user named Robert.
GET /deleteUser?name=Robert
This example uses HTTP GET to trigger a transaction to update
user’s name from Bob to Robert.
GET /updateUser?newName=Robert&oldName=Bob
Good Web APIs
Correct usage of HTTP GET:
•
The request URI identifies one specific resource:
GET /users/Robert
•
The query string in a request URI uses a set of parameters
that define search criteria:
GET /users?name=Robert
Good Web APIs
Correct usage of HTTP GET:
•
GET is for data retrieval only
•
GET should be free of server-side changes
•
GET is called a SAFE method b/c of the previous two
points.
Good Web APIs
Correct usage of HTTP POST:
•
POST is for creating data.
Good
POST /users HTTP/1.1
Host: myserver
Content-Type:
application/xml
<?xml version="1.0"?>
<user>
<name>Robert</name>
</user>
Bad
GET
/user?action=add&name=Robert
Good Web APIs
Correct usage of HTTP PUT:
•
PUT is for updating data.
Good
PUT /users/Robert
HTTP/1.1 Host: myserver
Content-Type:
application/xml
<?xml version="1.0"?>
<user>
<name>Bob</name>
</user>
Bad
GET
/user?action=up&newName=Robert
&oldName=Bob
Good Web APIs
Correct usage of HTTP DELETE:
•
DELETE is for deleting data.
Good
DELETE /users/Bob
HTTP/1.1 Host: myserver
Content-Type:
application/xml
<?xml version="1.0"?>
<user>
<name>Bob</name>
</user>
Bad
GET
/user?action=del&name=Robert
Good Web APIs
• For URIs use nouns instead of verbs
• The verbs GET, PUT, DELETE, and POST should
be all the verbs you need
2. Be stateless
• Send complete and independent requests
• Don’t require the server to hold client state
information
• This is similar to static methods where you
give it all the data that’s needed to perform
the desired operation.
3. Expose directory structure-like URIs
• URIs determine how intuitive a RESTful web
service is
• Using directory structure makes URIs:
– more intuitive to the point where they are easy to
guess
– self documenting
3. Expose directory structure-like URIs
Examples:
1. http://www.myservice.org/discussion/topics/{topic}
2. http://www.myservice.org/discussion/2008/12/10/{topic}
• Notice no spaces in directory names. If you need a space, use underscore
instead.
4. Transfer XML, JSON, and text
• For sending data to server use XML, JSON, or text
• For receiving data from a server use XML or JSON
• Let clients specify transfer type with MIME type
header.
– application/xml
– application/json
– text/plain
REST Outline
• What is REST?
• REST Web Services
• HTML and REST
HTML and REST
• Unfortunately, HTML only supports GET and
POST actions for form processing.
• PUT and DELETE are in consideration for being
added to the HTML spec.
HTML and REST
• To use PUT and DELETE in HTML, you can
specify a method=“post” for your form and
include a hidden field to specify a PUT,
DELETE, or POST action.
AJAX and REST
You can specify PUT and DELETE using
XMLHttpRequests:
$.ajax( {
url: '/controller/action',
type: 'PUT',
data: function() { ...package some data as XML },
dataType: 'xml',
... more options...
);