WDD330 L05 Readings Notes

Jeremy Troy Suchanski

Web Frontend Development II

Gary James

May 2, 2022

L05 Readings Notes

Ajax: a technique that allows web pages to communicate asynchronously with a server, and it dynamically updates web pages without reloading, enabling data to be sent and received in the background, as well as portions of a page to be updated in response to user events, while the rest of the program continues to run. The term 'Ajax' was coined from an acronym by Jesse James Garrett in 2005 when he used it to referred to the techniques of (Asynchronous JavaScript and XML) being used by Google in its recent web applications of Gmail and Google Maps. Today, it’s unusual for Ajax not to be used when a partial web page update is required.

Asynchronous: By using callbacks the program doesn’t have to stop and wait for the response when a request for data is sent. It can carry on while waiting for an event that will fire when a response is received.

JavaScript: (originally designed as a client-side scripting language, which added dynamic features to the web page that was returned from the server.) Ajax allows JavaScript to request resources (usually JSON data or small fragments of text or HTML) from a server on behalf of the client.

XML: documents were often used to return data when the term Ajax was originally coined. Currently you must use DOM methods to parse XML files because it is not natively supported in JavaScript.

JSON: is currently the most commonly used in Ajax. It is more lightweight and easier to parse than XML because it is natively supported in JavaScript, so you can deal with JavaScript objects instead of using DOM methods to parse it. The term Ajaj is sometimes used to describe the technique.

Internet: The web of computers separated into two parts: clients and servers.
Client: (i.e a web browser) requests a resource (usually a web page) from a server.
Server: processes the request and sends back a response to the client.
Using Ajax: when requesting resources, a server is required. This typically involves using a server-side language, such as PHP, Ruby, Node.js, or .NET to serve the data response (usually from a back-end database).
Local Development Server: on your own computer to practice using Ajax.
Cross-Origin Resource Sharing (CORS): allows resources to be requested from another website outside the original domain. It works by using HTTP headers to indicate which domains can receive data allowing external sites access to its API data. (Most modern browsers support this method and respect the restrictions specified in the headers.) External websites use this in order to avoid the same-origin policy that browsers enforce.
Same-Origin Policy: blocks all requests from a domain that is different from the page making the request to stop any malicious JavaScript being run from an external source.
Application Programming Interface (API): is a collection of methods that allows external access to another program or service. Many websites allow controlled access to their data via public APIs.
Fetch API: is currently a living standard for requesting and sending data asynchronously across a network which superseded the XMLHttpRequest object that was standardized as part of the HTML5 specification. The Fetch API uses promises to avoid callback hell.

fetch(): a global method that only has the mandatory argument of the URL of the resource you wish to fetch. Code Example:

fetch('https://example.com/data')
.then( // code that handles the response )
.catch( // code that runs if the server returns an error )

Response Interface: Response objects that have a number of properties and methods that allow us to process the response effectively.
Response object properties:

ok property: checks to see if the response is successful & will return true if the status property is between 200 and 299.

status property: is based on the HTTP status code. Usually:

200: the response was successful
201: if a resource was created
204: when the request is successful but no content is returned
Rejected: the promise will only be rejected in the case of a network error (creating the need to manually check for other failures)
Manual check: use an if block to check if the request was successful, and throw an error otherwise. Code Example:

const url = 'https:example.com/data';

fetch(url)

.then((response) => {

if(response.ok) {

return response;

}

throw Error(response.statusText);

})

.then( response => // do something with response )

.catch( error => console.log('There was an error!') )

statusText property: specifies the status message that corresponds to the code returned

headers – headers object that contains any headers associated with the response

url – a string containing the URL of response

redirected – A boolean value specifying if the response is the result of a redirect

type – A string value of 'basic', 'cors', 'error' or 'opaque'.

basic: is used for a response from the same domain.
cors: the data was received from a valid CORS request from a different domain.
opaque: a response received from 'no-cors' request from another domain, which means access to the data will be severely restricted.
error: a network error occurs.

Response object methods:

redirect(): used to redirect to another URL. At the present time, there is no support for the redirect() method in any browser.

text(): takes a stream of text from the response, reads it to completion and then returns a promise that resolves to a USVSting object that can be treated as a string in JavaScript.

Code Example:

fetch(url)

.then( response => response.text() ); // transforms the text stream into a JavaScript string

.then( text => console.log(text) )

.catch( error => console.log('There was an error: ', error))

blob(): used to read a file of raw data, such as an image or a spreadsheet. Once it has read the whole file, it returns a promise that resolves with a blob object. Code Example:

fetch(url)

.then( response => response.blob() ); // transforms the data into a blob object

.then( blob => console.log(blob.type) )

.catch( error => console.log('There was an error: ', error))

json(): used to deal with these by transforming a stream of JSON data into a promise that resolves to a JavaScript object. Code Example (the Object.entries() method is used to view the key and value pairs in the returned object.):

fetch(url)

.then( response => response.json() ); // transforms the JSON data into a JavaScript object

.then( data => console.log(Object.entries(data)) )

.catch( error => console.log('There was an error: ', error))

Creating Response Objects: to create one use a constructor function. The first argument is the data that is to be returned. The second argument is an object that can be used to provide values for any of the properties. These can be useful to use if you are creating an API that needs to send a response, or if you need to send a dummy response for testing purposes. Code Exmaple:

const response = new Response( 'Hello!', {

ok: true,

status: 200,

statusText: 'OK',

type: 'cors',

url: '/api'

});

Request Interface: provide a Request object as an argument for fine-grained control over the request allowing allows a number of options to be set.
Request() constructor: creates Request object and include the following properties:

url: the URL of the requested resource (the only property that is required).

method: a string that specifies which HTTP method should be used for the request. By default, this is 'GET'.

headers: is a Headers object that provides details of the request's headers.

mode: allows you to specify if CORS is used or not. CORS is enabled by default.

cache: allows you to specify how the request will use the browser's cache. For example, you can force it to request a resource and update the cache with the result, or you can force it to only look in the cache for the resource.

credentials: lets you specify if cookies should be allowed with the request.

redirect: specifies what to do if the response returns a redirect. There’s a choice of three values: 'follow' (the redirect is followed), 'error' (an error is thrown) or 'manual' (the user has to click on a link to follow the redirect).

Hypertext Transfer Protocol (HTTP): is what the Web is built upon. A request to a server contains info about which HTTP verb (aka - method) to use.
HTTP methods: are what HTTP uses to tell the server what type of request is being made, which then determines how the server will deal with the request. The five most commonly used verbs when dealing with resources on the web are:

GET requests: to retrieve resources

POST requests: usually used to create a resource but can actually perform any task

PUT requests: to upsert, which means insert a resource or update it entirely

PATCH requests: to make partial updates to a resource

DELETE requests: to delete a resources

Request object: created with constructor. Code Example:

const request = new Request('https://example.com/data', {

method: 'GET',

mode: 'cors',

redirect: 'follow',

cache: 'no-cache'

});

Headers Interface: Typical information contained in headers includes the file-type of the resource, cookie information, authentication information and when the resource was last modified. They can be used to create a Headers object, which can then be added as a property of Request and Response objects.
HTTP headers: used to pass on any additional information about a request or response. A new Headers instance is created using a constructor function. Code Example:

const headers;

headers = new Headers({ 'Content-Type': 'text/plain', 'Accept-Charset' : 'utf-8', 'Accept-Encoding':'gzip,deflate' })

has(): used to check if the headers object contains the header provided as an argument. (i.e. headers.has('Content-Type');)

get(): returns the value of the header in the argument (i.e. headers.get('Content-Type');)

set(): used to set a value of an already existing header, or create a new header with the value provided as an argument if it does not already exist. (i.e. headers.set('Content-Type', 'application/json');)

append(): adds a new header to the headers object. (i.e headers.append('Accept-Encoding','gzip,deflate');)

delete() – Removes the header provided as an argument. (i.e. headers.delete('Accept-Encoding');)

keys(), values() and entries(): Iterators that can be used to iterate over the headers key, values or entries (key and value pairs). (i.e. for(const entry of headers.entries(){

console.log(entry);})

Spinners: It is common for sites to use spinners (or egg timers in the old days!) to indicate that the site is waiting for something to happen. Ajax Load and Preloaders.net are both good resources for creating a spinner graphic for your site.
Sending Information: Ajax can be used to send information. This can be a variety of formats, but is usually a JSON string. Code Example:

const form = document.forms['todo'];

form.addEventListener('submit', addTask, false);

function addTask(event) {

event.preventDefault();

const number = form.task.value;

const task = {

userId: 1,

title: form.task.value,

completed: false

}

const data = JSON.stringify(task);

const url = 'https://jsonplaceholder.typicode.com/todos';

const headers = new Headers({

'Accept': 'application/json',

'Content-Type': 'application/json'

});

const request = new Request(url,

{

method: 'POST',

header: headers,

body: data

})

fetch(request)

.then( response => response.json() )

.then( task => console.log(`Task saved with an id of ${task.id}`) )

.catch( error => console.log('There was an error:', error)) }

Form object: It has attributes and methods

action attribute: most forms have this; it specifies the URL to use if the form is sent without using Ajax.

method attribute: will specify the HTTP verb to use.

generalized request object – Code Example:

const request = new Request(form.action, {

method: form.method,

header: headers,

body: data })

FormData interface: makes it easier to submit information in forms using Ajax by reducing the amount of code needed when submitting forms. Use a constructor function to create a FormData instance. (i.e. const data = new FormData();) Code Example:

const form = document.forms['todo'];

form.addEventListener('submit', addTask, false);

function addTask(event) {

event.preventDefault();

const task = new FormData(form);

const url = `http://echo.jsontest.com/id/1/title/${form.task.value}`;

const headers = new Headers({

'Accept': 'application/json',

'Content-Type': 'application/json'

});

const request = new Request(url,

{

method: 'POST',

mode: 'cors',

header: headers,

body: JSON.stringify(task) })

fetch(request)

.then( response => response.json() )

.then( data => console.log(`${data.title} saved with an id of ${data.id}`) )

.catch( error => console.log('There was an error:', error))

}

append() method: use to add data to the form data instance as key-value pairs Code Ex:

data = new FormData(); // argument of no form creates an empty form data instance

data.append('height', 75);

A Living Standard: (Fetch API) the specification is being developed 'in the wild', meaning it’s still subject to change as developers, browser vendors and end-users provide feedback about how it works. Living standards often stay relatively stable, especially once they are implemented in browser engines. By using it you are helping to develop future standards. (jQuery library has the generic ajax() method like the fetch() method.)