Upload
braima
View
75
Download
4
Tags:
Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
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 StringQuery 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 APIsThis 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... );