Embed Size (px)
Citation preview
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="mailto:[email protected]" 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
Addition 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/~craley/3345/http/form.html
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 – Hyper Text Transform Protocol
• Invented by Tim Berners-Lee and his team
• Is an applications-level protocol on top of TCP/IP
HTTP Communication
• HTTP is a protocol where clients and servers communicate with messages.
• An HTTP client (browsers) 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 and 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 OPTIONSGET DELETE CONNECTPOST TRACE PATCH
HTTP Request Methods
• We will only focus on 4
Methods HEAD PUT OPTIONSGET DELETE CONNECTPOST 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 MethodsHEAD OPTIONSGET 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 MethodsGET OPTIONSPUT HEADDELETE 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 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: FiddlerHost: 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 resource3. Version of HTTP being used
GET /path/to/file/index.html HTTP/1.1
1 2 3
Header Lines: Request Message
• Header fields define additional information about the HTTP message.
• Several possible request message headers, see wiki.
Notable Request HeadersHostContent-typeContent-lengthDateUser-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 Content-Length
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: FiddlerHost: www.google.comContent-type: application/x-www-form-urlencodedContent-Length: 8
name=ted
Initial line
Headers line
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/~craley/3345/http/showResponse.php?parm1=taco&parm2=beef
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.comURI and Query Separator: ?Query String Parameters:
1. Key: n1, Value: bob2. Key: n2, Value: sally
GET REQUEST = (URI + Separator + Query String)
GET Request: URI and Separator
• Concatenate the URI and Separator together
URI: www.example.comURI and Query Separator: ?
www.example.com?
GET Request: Query String
Query String parameters: 1. Key: n1, Value: bob2. 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.comURI and Query Separator: ?Query String Parameters:
1. n1 = bob2. n2 = sally
www.example.com?n1=bob&n2=sally
Using telnet: GET
• $ telnet www.google.com 801. GET / HTTP/1.12. Host: www.google.com3. <enter>
Using telnet: POST
• $ telnet www.google.com 801. POST / HTTP/1.12. Host: www.google.com3. Content-type: application/x-www-form-urlencoded4. Content-length: 85. <enter>6. 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 a 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 –X GET “www.google.com”$ curl –X PUT “www.google.com”$ curl –X DELETE “www.google.com”$ curl –X 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”
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
Date: Sat, 15 Sep 2012 04:45:14 GMTExpires: -1Cache-Control: private, max-age=0Content-Type: text/html; charset=ISO-8859-1Set-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.comSet-Cookie: NID=63=rRYwex2AO2q9Z2y6lde7aRvbY6rCNEPy4nzW47g0MeAfofvScqQZt-3Zc4jz097J31Xs9HxE46ZtaB6l6803pj9KYexa5Zs0QyzXJ1KxjexFtFGa7XQayzd7SoiqH0R4; expires=Sun, 17-Mar-2013 04:45:14 GMT; path=/; domain=.google.com; HttpOnlyP3P: 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: gwsX-XSS-Protection: 1; mode=blockX-Frame-Options: SAMEORIGINTransfer-Encoding: chunked
<!doctype html……
initial line
headers line
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
HTTP/1.1 200 OK
1 2 3
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. Use HTTP methods explicitly2. Be stateless3. Expose directory structure-like URIs4. 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 Bad
POST /users HTTP/1.1Host: myserver Content-Type: application/xml <?xml version="1.0"?> <user> <name>Robert</name> </user>
GET /user?action=add&name=Robert
Good Web APIs
Correct usage of HTTP PUT:• PUT is for updating data.
Good Bad
PUT /users/Robert HTTP/1.1 Host: myserver Content-Type: application/xml <?xml version="1.0"?> <user> <name>Bob</name> </user>
GET /user?action=up&newName=Robert&oldName=Bob
Good Web APIs
Correct usage of HTTP DELETE:• DELETE is for deleting data.
Good Bad
DELETE /users/BobHTTP/1.1 Host: myserver Content-Type: application/xml <?xml version="1.0"?> <user> <name>Bob</name> </user>
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.
• Requires a FAT-client
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.
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... );
