HyperText Transfer Protocol

JavaScript Workshop

Contents

1. HTTP

2. AJAX

3. CORS

HyperText

HYPERTEXT TRANSFER PROTOCOL

SERVER

Client

Client

Client

Client

HyperText Transfer Protocol

HTTP Request

HyperText Transfer Protocol

HTTP Response

Cookie

Set-Cookie: RMID=732423sdfs73242;
    expires=Fri, 31 Dec 2010 23:59:59 GMT;
    path=/; domain=.example.net

HTTP Methods

GET

GET /path/resource?param1=value1&param2=value2

Idempotent

• The GET method requests a representation of the specified resource.
• Requests using GET should only retrieve data and should have no other effect.

No Body

Might be cached

HTTP Methods

POST

POST /path/resource

Not Idempotent

• The POST method requests that the server accept the entity enclosed in the request as a new subordinate of the web resource identified by the URI.

Body Available

Should not be cached

HTTP Methods

PATCH

PATCH /path/resource/:id

Not Idempotent

• The PATCH method applies partial modifications to a resource

Body Available

Should not be cached

HTTP Methods

PUT

PUT /path/resource/:id

Idempotent

• The PUT method requests that the enclosed entity be stored under the supplied URI.
• If the URI refers to an already existing resource, it is modified. 
• If the URI does not point to an existing resource, then the server can create the resource with that URI.

Body Available

Should not be cached

HTTP Methods

DELETE

DELETE /path/resource/:id

Idempotent

• The DELETE method deletes the specified resource.

Body Available

Should not be cached

HTTP Methods

HEAD

HEAD /path/resource

Idempotent

• The HEAD method asks for a response identical to that of a GET request, but without the response body.

No Body

Can be cached

HTTP Methods

OPTIONS

OPTIONS /path/resource

Idempotent

• The OPTIONS method returns the HTTP methods that the server supports for the specified URL.

No Body

Safe Methods

GET  HEAD  OPTIONS

Safe methods are intended only for information retrieval and should not change the state of the server. They should not have side effects, beyond relatively harmless effects such as logging, caching, the serving of banner advertisements or incrementing a web counter.

STATUS CODES

STATUS CODES - 10x

101 Switching Protocols

This means the requester has asked the server to switch protocols and the server is acknowledging that it will do so.

STATUS CODES - 2xx

STATUS CODES - 30x

This class of status code indicates the client must take additional action to complete the request.

STATUS CODES - 4xx

STATUS CODES - 5xx

Persistent connections

Connection: keep-alive

asynchronous JavaScript and XML

AJAX is a set of web development techniques utilizing many web technologies used on the client-side to create asynchronous Web applications.

var xhr = new XMLHttpRequest();
xhr.open('get', 'path/resource');

xhr.onreadystatechange = function () {
    // readyState 4 means the request is done.
    var DONE = 4;
    // status 200 is a successful return.
    var OK = 200; 
    if (xhr.readyState === DONE) {
        if (xhr.status === OK) {
            alert(xhr.responseText);
        } else {
            alert('Error: ' + xhr.status);
        }
    }
};

xhr.send(null);

asynchronous JavaScript and XML

Pros:

• Less traffic
• Less load on server
• Quick interface
• Potentially better user experience

Cons:

• No default integration with default browser behavior
• Bad Search Engine support
• Project are harder
• JavaScript should be enabled in browser
• AJAX can be slow
• Security issues

JQUERY

$.ajax("https://example.com")
  .success(function(data, textStatus, jqXHR){
    //do something
  }).error(function(jqXHR, textStatus, errorThrown){
    //handle error
  });

JQUERY

$.ajax({
  url:"https://example.com",
  method: "POST",
  async: true,
  data: { "message": "my custom data" }
}).success(function(data, textStatus, jqXHR){
  //do something
}).error(function(jqXHR, textStatus, errorThrown){
  //handle error
});

SUPERAGENT

 request
   .post('https://example.com')
   .send({ "message": "my custom data" })
   .set('X-API-Key', 'foobar')
   .set('Accept', 'application/json')
   .end(function(err, res){
     if (res.ok) {
       alert('yay got ' + JSON.stringify(res.body));
     } else {
       alert('Oh no! error ' + res.text);
     }
   });

Cross-origin resource sharing

api.example.com

example.com/index.html

Cross-origin resource sharing

Cross-origin resource sharing

AJAX Request

var url = 'http://api.example.com';
var xhr = createCORSRequest('PUT', url);
xhr.setRequestHeader(
    'X-Custom-Header', 'value');
xhr.send();

Cross-origin resource sharing

api.example.com

example.com/index.html

Cross-origin resource sharing

XMLHttpRequest cannot load http://api.example.com. Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

Thanks!