Java Reference
In-Depth Information
Receiving Information
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:
ajax.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ajax Example</title>
</head>
<body>
<button id="text">Request Text</button>
<button id="html">Request HTML</button>
<button id="api">Request API</button>
<div id="output">
Ajax response will appear here
</div>
<script src="scripts.js"></script>
</body>
</html>
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:
hello.txt
