To demonstrate how to update a page using Ajax, we'll need to set up a demonstration page.
Create a file called ajax.htm that contains the following code:
<button id="text">Request Text</button>
<button id="html">Request HTML</button>
<button id="api">Request API</button>
Ajax response will appear here
This is a standard HTML5 web page that contains three buttons and a div element. Each
button will be used to make a different type of Ajax request. The first will request a text
file, the second will require an HTML file, and the third will request some JSON from an
external API. The div with an id of "output" will be where we'll insert the response we
receive from the Ajax request.
Ajax requests are usually made to files stored on a server, so we'll use a plain text file and an
HTML file that are stored on SitePoint's Amazon Web Service (AWS) servers. These are to
mimic files that would usually be stored on the same server as the website. If you've set up
a local development server, you could create the files and serve them from your local server.
The text file called hello.txt contains this string:
Search WWH ::