HTTP requests from JS in the browser

Question 1

Make an HTTP request from the browser

Answer 1

Simple, use XHR or the XMLHTTPRequest object. As for a POST request we might be able to use the FormData object for that, rather than having to use postman to send our post request.

Question 2

Describe what XHR is (browser)

Answer 2

https://www.quora.com/Does-Node-js-utilize-XMLHttpRequest

XHR stands for extensible http request, it could also be called XMLHttpRequest (extensile markup language).

XHR is an API in the form of an object whose methods transfer data between a web browser and a web server. Despite the name HTTP isn’t the only protocol our XHR API can read and the API doesn’t only translate our protocol into XML, it can translate our protocols into XML, JSON, HTML, plain text.

Think of XHR as an object with methods on top of it that perform duties you need (primarily communicating to a server of course).

Methods on the XHR object: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Using the XHR object: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

It might be worthwhile to know that the ActiveXObject exists as an alternative to XMLHTTPRequest mainly because this existed prior to XHR and works on older browsers such as IE6 and older.

Question 3

Describe what AJAX is (browser)

Answer 3

AJAX or asynchronous javaScript and XML, but really it is a high concept or abstracted way of explaining the use of the XMLHTTPRequest object to talk with a server and pull down information instantly without a page refresh.

AJAX is primarily used for two things: getting data from a server and redrawing the html page without ever having to reload the entire page.

Question 4

Describe the difference between normal HTTP requests and XHR

Answer 4

Therere might be differences in the header results but the main difference is in how the client and xhr respond to getting data. The client or browser would clear out the window and load the server response into the window.The XHR would leave the window unaffected and instead return the server response to the javaScript code to do as it would.

Question 5

Make an HTTP request from the browser without any libraries

Answer 5

When we request data from a server such as what we do every time we write a URL we might never see the actual response data, what we see is the result of our browser decoding the data to present a UI for us to use. Making a raw HTTP request returns this data.

Every browser comes with a way for us to view this raw response data. Using chrome you can look up the network data yourself simply by entering the website you want as an URL and using the network programs in your chrome dev tools.

Question 6

Make an HTTP request from the browser using jQuery

Answer 6

jQuery makes it easy to make an HTTP request.

$('.myButton').click(function() { 
  $.ajax({ 
    'url' : 'page.php',
  //Can be either a 'GET' or 'POST' request method
    'type' : 'GET',
  //Any post-data/get-data parameters
  //This is optional
    'data' : {
      'paramater1' : 'value',
      'parameter2' : 'another value'
    },
  //The response from the server
    'success' : function(data) {
    //You can use any jQuery/JavaScript here!!!
      if (data == "success") {
        alert('request sent!');
      }
    }
  });
});

https://stackoverflow.com/questions/5942105/jquery-get-request-on-http-url

Question 7

Make use of the fetch API in the browser

Answer 7

The fetch API does primarily two things:

• > it provides a fetch method which allows us to logically and asynchronously interact with fetched resources from across a network.
• > helps us access and manipulate parts of the HTTP pipeline such as the response and requests.

So yes the fetch API is similar to jQuery.ajax( ) but it differs in two ways:

1. ) By default, fetch will not receive or send cookie data.
2. ) The Promise returned on an error status will resolve as normal with the OK status set to false. Fetch only rejects on network failure or failure to adequately get a response.

var myImage = document.querySelector(‘img’);

fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Question 8

Find right method to use given browser support constraints

Answer 8

…

Question 9

Describe HTTP CORS.

Answer 9

HTTP CORS (Cross-Origin Resource Sharing)

https://www.youtube.com/watch?v=gwKTj2wddfE

Question 10

Describe the HTTP Same-origin policy

Answer 10

…

Question 11

Describe at least one workaround to the HTTP Same-origin policy.

Answer 11

…