<info 340/>

AJAX

Joel Ross
Autumn 2022

INFO 340 Inclement Weather Policy

If there's snow makes traveling difficult or dangerous, class meetings (lecture and labs) will be held synchronously over Zoom.

 

We will announce shifts by 6:30am at latest

View of the Day

  • Q&A (poll everywhere)

  • AJAX ("lecture")

  • fetch() and Promises (code demo)

  • Effect Hooks (code demo)

Questions?

https://pollev.com/joelross

HTTP Requests

protocol

domain

resource

"Hi Wikipedia, I'd like you to send me the Informatics page!"

two

t
 

(how to handle info)

(who has info)

(what info you want)

Browsers submit HTTP requests to a server when you follow a hyperlink or submit a form.

Form Attributes

We use attributes on a <form> to specify the HTTP Request

<form role="form" method="GET" action="/signup">

  <label for="unameBox">Name:</label>
  <input type="text" name="username" id="unameBox">

  <button type="submit">Sign up!</button>

</form>

GET: (default) sends a GET request; data is appended to the URI as a query parameter (e.g., ?username=value)

POST: sends a POST request; data is included in the request body.

The URI

HTTP Verbs

HTTP requests include a target resource and a verb (method) specifying what to do with it

GET Return a representation of the current state of the resource
POST Add a new subresource (e.g., insert a record)
PUT Update the resource to have a new state
PATCH Update a portion of the resource's state
DELETE Remove the resource
OPTIONS Return the set of methods that can be performed on the resource

A technique for having code (JavaScript) send an HTTP Request, rather than the browser

XML

EXtensible Markup Language

A generalized syntax for semantically defining structured content (HTML with own tags!)

<person>
   <firstName>Alice</firstName>
   <lastName>Smith</lastName>
   <favorites>
      <music>jazz</music>
      <food>pizza</food>
   </favorites>
</person>

XML

JSON

<breakfast_menu>
  <food>
    <name>Belgian Waffles</name>
    <price>$5.95</price>
    <description>
      Two of our famous Belgian Waffles with plenty of real maple syrup
    </description>
    <calories>650</calories>
  </food>
  <food>
    <name>Strawberry Belgian Waffles</name>
    <price>$7.95</price>
    <description>
      Light Belgian waffles covered with strawberries and whipped cream
    </description>
    <calories>900</calories>
  </food>
  <food>
    <name>Berry-Berry Belgian Waffles</name>
    <price>$8.95</price>
    <description>
      Light Belgian waffles covered with an assortment of fresh berries and whipped cream
    </description>
    <calories>900</calories>
  </food>
  <food>
    <name>French Toast</name>
    <price>$4.50</price>
    <description>
      Thick slices made from our homemade sourdough bread
    </description>
    <calories>600</calories>
  </food>
  <food>
    <name>Homestyle Breakfast</name>
    <price>$6.95</price>
    <description>
      Two eggs, bacon or sausage, toast, and our ever-popular hash browns
    </description>
    <calories>950</calories>
  </food>
</breakfast_menu>
{
  "breakfast_menu": {
    "food": [
    {
      "name": "Belgian Waffles",
      "price": "$5.95",
      "description": "Two of our famous Belgian Waffles with plenty of real maple syrup",
      "calories": "650"
    },
    {
      "name": "Strawberry Belgian Waffles",
      "price": "$7.95",
      "description": "Light Belgian waffles covered with strawberries and whipped cream",
      "calories": "900"
    },
    {
      "name": "Berry-Berry Belgian Waffles",
      "price": "$8.95",
      "description": "Light Belgian waffles covered with an assortment of fresh berries and whipped cream",
      "calories": "900"
    },
    {
      "name": "French Toast",
      "price": "$4.50",
      "description": "Thick slices made from our homemade sourdough bread",
      "calories": "600"
    },
    {
      "name": "Homestyle Breakfast",
      "price": "$6.95",
      "description": "Two eggs, bacon or sausage, toast, and our ever-popular hash browns",
      "calories": "950"
    }
    ]
  }
}

A technique for having code (JavaScript) send an HTTP Request, rather than the user

JSON

XMLHttpRequest

AJAX requests are built on a browser-provided object called XMLHttpRequest. We don't use this method because it is overly verbose and complicated. 

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       // Action to be performed when the document is read;
       var xml = xhttp.responseXML;

       var movie = xml.getElementsByTagName("track");
       //...
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

fetch()

The modern method for submitting XmlHttpRequests. Included in the DOM's API.

//send an AJAX request to the given url
fetch('url');

Not supported by all browsers! http://caniuse.com/#search=fetch Can add API features to browsers that do not yet support them by including a polyfill: an external library (code) that replicates that API.

https://github.com/github/fetch, or install whatwg-fetch library

//in index.js
import 'whatwg-fetch'

Asynchronous

AJAX requests are asynchronous, so happen simultaneously with the rest of the code.

That means that after the request is sent, the next line of code is executed without waiting for the request to finish! 

   console.log('About to send request');

   //send request for data to the url
   fetch(url);

   console.log('Sent request');

(1)

(2)

(3)

(4) Data is actually received some time later,
      and Promise is fulfilled

does NOT return the data,

but a Promise for it

Promises

We use the .then() method to specify a callback function to be executed when the promise is fulfilled (when the asynchronous request is finished) 

//what to do when we get the response
function successCallback(response) {
   console.log(response);
}

//when fulfilled, execute the callback function
//(which will be passed the fetched data)
const promise = fetch(url);
promise.then(successCallback);


//more common to use anonymous variables/callbacks:
fetch(url).then(function(response) {
   console.log(response);
});

reads like English?

callback will be passed the request response

fetch() Responses

The parameter fetch() passes to its .then() callback is the http response, not the data itself!

The response to an HTTP request (such as from fetch()) has two parts:

  1. Header with information about the response. Like a postal envelope.

  2. Body with the content (data) of the response. Like a postal letter.

HTTP Response Codes

source

api

Encoding the Body

The parameter passed to the .then() callback is the response, not the data we're looking for.

So we need to extract the data from that response.

The fetch() API provides a method .json() that we can use to encode the data from the response into a readable format... but this method is also asynchronous and returns a promise!

fetch(url).then(function(response) {
   const newPromise = response.json();


   //... what now?
});

not the data

another promise

Returning Promises

If the .then() callback itself returns a Promise, then the "original" promise will take on the status and data of that returned promise (e.g., be replaced with the new IOU) 

const outerPromise = getAsyncData(myFirstSource).then(function(firstData){
    //do something with `firstData`

    const newPromise = getAsyncData(mySecondSource); //a second async call!
    return newPromise; //return the promise.
}); //`outerPromise` now takes on the status and data of `newPromise`

outerPromise.then(function(secondData){
    //do something with `secondData`, the data downloaded from `mySecondSource`
});

All together

fetch(url)
    .then(function(response) {
        const dataPromise = response.json();
        return dataPromise;
    })
    .then(function(data) {
        //do something with the data!!
        console.log(data);
    });

Catching Errors

We can use the .catch() function to specify a callback that will occur if a promise is rejected (an error occurs). This method will "catch" errors from all previous .thens 

fetch(url)
  .then(function(data) {
     return response.json();
  })
  .then(secondCallback)
  .catch(function(error) {
     //called if EITHER previous callback
     //has an error

     //param is object representing the error itself
     console.log(error.message);
  })
  .then(thirdCallback) //"finally"

async/await

Managing Promise callback chains can get tricky. ES 2017 introduced a new set of keywords async and await that can let you write Promise-based code synchronously.

//an `async` function is one that runs asynchronously
//(meaning it returns a promise)
async function myAsyncFunction() {
  
  //`await` indicates that the code should "hold" until
  //the asynchronous promise is fulfilled
  //can only be used inside of an `async` function
  const response = await fetch(url); //wait for fetch
  const data = await response.json(); //wait for encode
  
  console.log(data); //can use data ("synchronously")  

}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

fetch() in React

You can use fetch() in response to user interactions (e.g., button clicks) by calling the function and then assigning any data to a state variable.

function MyComponent(props){
  //initialize state as empty
  //make sure component doesn't error with this initial value!
  const [stateData, setStateData] = useState([])
  
  const handleClick = (event) => {
    fetch(dataUri) //send AJAX request
      .then((res) => res.json())
      .then((data) => {
        //do any data processing here...
        setStateData(data); //assign data to state
                            //rerenders using data
      })
  }
  
  return ...  
}

Effect Hooks

To fetch() data when the component first renders, you need to use an effect hook (which runs after the first render)

//import the hooks used
import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  const [stateData, setStateData] = useState([]);

  //specify the effect hook function
  useEffect(() => {
    fetch(dataUri) //send AJAX request
      .then((res) => res.json())
      .then((data) => {
        //do any data processing here...
        setStateData(data); //assign data to state
      })
  }, []) //array is the second arg to the `useEffect()` function
         //It lists which variables will "rerun" the hook if they 
         //change

  return ...
}

Effect Hook Cleanup

In order to "clean up" any work done in an effect hook (e.g., disconnect listeners), have the callback return a "cleanup function" to execute. Not needed for fetch()

import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  //specify the effect hook function
  useEffect(() => {

    //...do persistent work, set up subscriptions, etc

    //function to run when the Component is being removed
    function cleanup() {
      console.log("component being removed")
    }    
    return cleanup; //return function for React to call later    
  }, [])

  return ...
}

Action Items!

  • Review Ch 18, 16.3 (AJAX)

  • Read Ch 19: Firebase

  • Problem Set 09 due Friday

    • It's small! Get it done!​
       

Lab: Project work

Next time: Firebase databases!

info340au22-ajax

By Joel Ross

info340au22-ajax

  • 427

More from Joel Ross