Skip to content
This repository has been archived by the owner on Apr 19, 2023. It is now read-only.
/ xhrapp-panlex-api Public archive

Basic web app using XMLHTTPRequest to query PanLex API

License

Notifications You must be signed in to change notification settings

jrpool/xhrapp-panlex-api

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

xhrapp-panlex-api

Basic web app illustrating use of XMLHTTPRequest to get information from a third-party API

Project Members

Jonathan Pool

Discussion

This application demonstrates one method by which a web page can obtain information from a server, different from the server the page comes from, and include the retrieved information in the content of the page.

The page includes a script element that instructs the browser to execute the JavaScript script in the app.js file in the src directory. That script queries a third-party server and adds the received response to the page.

The script uses the XMLHttpRequest library to perform the query to the third-party server.

The xhr object inherits the methods open, send, and addEventListener from the XMLHttpRequest prototype and uses those methods to perform the specified query and change the web page accordingly. The event listener created by xhr listens for an (event of the readystatechange type)[https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState]. When such an event occurs, the event listener passes the event’s data to the replaceLangvarCount function as the function’s event argument and executes the function. One property of the event is its target, which is the event listener (xhr). This property permits replaceLangvarCount to pass xhr as the requester to the giveResponse function. The replaceLangvarCount function does not do anything to the page unless the giveResponse function returns a defined result, and that happens only if the readyState property of xhr is 4 (the response is complete) and, in addition, its status property is 200, i.e. success.

This application succeeds in retrieving data from the PanLex API because that API includes “access-control-allow-origin: *” in its response headers. When an XMLHttpRequest requester on a web page served by server A proposes to send a request to server B, popular web browsers require server B to include that header in its response as a condition of permitting the request to be sent and the response to it to be processed. You can see the response headers by opening your browser’s developer tools to the Network/XHR/Headers pane and refreshing the page.

Demonstration

This application can be demonstrated at https://jpdev.pro/xhrapp-panlex-api/.

Installation and Setup

  1. These instructions presuppose that npm is installed.

  2. Make the parent directory of what will be the project’s directory your working directory.

  3. Clone this repository into it, thereby creating the project directory, by executing:

    git clone git@github.com:jrpool/xhrapp-panlex-api.git xhrapp-panlex-api

  4. Make the project directory your working directory by executing:

    cd xhrapp-panlex-api

  5. Install required dependencies (see package.json) by executing:

    npm i

Usage and Examples

Use this application by opening index.html in a web browser.

About

Basic web app using XMLHTTPRequest to query PanLex API

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published