AJAX Quiz

CDN (Content Delivery Network)

a group of servers that hosts a web artifact (like JQuery or React ) so that many web sites can reference that artifact

new XMLHttpRequest()

This object (provided by the browser) enables us to write AJAX Code

JSON View

Browser plugin that lets you view JSON data nicely formatted.

AJAX

JavaScript technique that invokes a server side page that contains only data (no user interface).

Web API

Like a method that is exposed over the internet. Input parameters are specified after the ? in the URL. Output is printed to the page.

Asynchronous

Means that user interface is not locked up while waiting for a response.

open

Method of an HTTP request object that lets you specify the URL you want to invoke with your AJAX call

send

Method of an HTTP request object that you invoke (passing null) when all http request properties have been set and you want to initiate the AJAX call.

onreadystatechange

Property of HTTP request object that is set to function that browser will call when AJAX data is available

status

Property of an HTTP request object that could hold a "200" or a "404" depending whether or not request page is found

readyState

Property of an HTTP request object with 1,2,3 and 4 (4 means done and data is available) .

responseText

Property of an http request object that holds the data returned by the AJAX call.

Suppose you have JavaScript code like what's below (in an HTML page). As you can see, two AJAX calls are made, invoking the reusable ajax function presented in Tutorials - AJAX. Imagine, however, that the calls were to two different Web APIs (each Web API having its own domain). True or False: the call back function associated with first AJAX call (handleResponse) will always complete before the call back function associated with the second AJAX call (handleResponse2). function my$(id) { return document.getElementById(id); } var call = "https://api.jikan.moe/v3/search/anime?limit=5&q=Gorou"; ajax(call, handleResponse, my$("error1")); function handleResponse(obj) { if (obj.results.length < 1) { console.log("Character not found in any episode"); } else { console.log("Episode title is " + obj.results[0].title); } } // end handleResponse var call2 = "https://api.jikan.moe/v3/search/anime?limit=5&q=Mitsu

False. False. While it is true that the first AJAX call is made a few milliseconds before the second AJAX call, we cannot say which call back function will complete first - it depends on various factors like internet speed, etc.

Suppose an HTML page (with the following JavaScript in it) was rendered in a browser. Assume that the AJAX call is successful (meaning that the 3rd party Web API responds with data matching the query). Answer the questions below, indicating what you'd see in the console log. Every answer is used exactly once. Note: this is a formative quiz (therefore not locked down, not proctored), but TRY to answer this question BEFORE copy/pasting it into NetBeans and running it :-) var httpReq = new XMLHttpRequest(); //For Chrome, Firefox, etc var call = "https://api.jikan.moe/v3/search/anime?limit=5&q=Naruto"; httpReq.open("GET", call); console.log("kiwi"); httpReq.onreadystatechange = function () { console.log("apple - state is " + httpReq.readyState); if (httpReq.readyState === 4) { if (httpReq.status === 200) { console.log("orange"); extractData(JSON.parse(httpReq.responseText)); console.log("banana"); } else {

1st line: kiwi 2nd line: grape 3rd line: peach 4th line: apricot 5th line: apple state is 2 6th line: apple state is 3 7th line: apple state is 4 8th line: orange 9th line: synopsis 10th line: banana The important thing to realize about an AJAX call is its asynchronous nature. Defining the anonymous (readystatechange) call back function does not invoke it. The AJAX call is not initialized until this line: httpReq.send(null); Then there is a pause (waiting for data). When the data is available, only then is the readystatechange function invoked by the browser (several times). When the data is fully done (readystate = 4), then you get orange - extractData - banana.

jQuery

A JavaScript library of about 10,000 lines of code that provides an AJAX method (along with a lot of other functionality)

Callback function

A function passed by HTML coder to AJAX provider code we wrote. Provider code invokes this consumer function when AJAX data is received. Consumer function contains business logic like placing data on page.

CORS

A mechanism that allows webpage from one domain to request a resource from another domain. However, if the domain does not permit such sharing, an error is raised and the resource is not provided.

JSON

A string that contains JavaScript code you would normally use to define a new object

XML (Extensible Markup Language)

Web data format that looks like HTML but tags are programmer definable (not a finite predetermined list of tags like HTML).