JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
AJAX – XMLHttpRequest
The XMLHttpRequest object requests the data from a server.
Send a Request to a Server
To send a request to a server, use the open() and send() methods of the XMLHttpRequest object:
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
Method | Description |
open(method, url, async) | Specifies the type of request |
send() | Sends the request to the server (used for GET) |
send(string) | Sends the request to the server (used for POST) |
The URL – A File on a Server
The URL parameter of the open() method, is an address to a file on a server:
xhttp.open(“GET”, “ajax_test.asp”, true);
The file can be any kind of file, like .txt and .xml, or server scriptings files like .asp and .php.
Asynchronous – True or False?
Server requests must be sent asynchronously.
The async parameter of the open() method must be set to true:
xhttp.open(“GET”, “ajax_test.asp”, true);
By sending asynchronously, the JavaScript does not have to wait for the server response, but can instead:
- execute other scripts while waiting for server response
- deal with the response after the response is ready
GET or POST?
GET is much simpler and faster than POST, and can be used in most cases.
Use POST requests when:
- A cached file is not an option (update a file or database on the server).
- While sending a large amount of data to the server (POST has no size limitations).
- Sending user input, POST is more robust and secure than GET.
GET Requests
A simple GET request:
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type=”button” onclick=”loadDoc()”>Request data</button>
<p id=”demo”></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById(“demo”).innerHTML = this.responseText;
}
xhttp.open(“GET”, “demo_get.asp”);
xhttp.send();
}
</script>
</body>
</html>
In the example above, you may get a cached result. To avoid this, add a unique ID to the URL.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type=”button” onclick=”loadDoc()”>Request data</button>
<p id=”demo”></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById(“demo”).innerHTML = this.responseText;
}
xhttp.open(“GET”, “demo_get.asp?t=” + Math.random());
xhttp.send();
}
</script>
</body>
</html>
If you want to send information with the GET method, add the information to the URL.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type=”button” onclick=”loadDoc()”>Request data</button>
<p id=”demo”></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById(“demo”).innerHTML = this.responseText;
}
xhttp.open(“GET”, “demo_get2.asp?fname=Henry&lname=Ford”);
xhttp.send();
}
</script>
</body>
</html>
POST Requests
A simple POST request.
Example
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type=”button” onclick=”loadDoc()”>Request data</button>
<p id=”demo”></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById(“demo”).innerHTML = this.responseText;
}
xhttp.open(“POST”, “demo_post.asp”);
xhttp.send();
}
</script>
</body>
</html>
To POST data like an HTML form, add an HTTP header with setRequestHeader(). Define the data you want to send in the send() method:
Example
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type=”button” onclick=”loadDoc()”>Request data</button>
<p id=”demo”></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById(“demo”).innerHTML = this.responseText;
}
xhttp.open(“POST”, “demo_post2.asp”);
xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xhttp.send(“fname=Henry&lname=Ford”);
}
</script>
</body>
</html>
Synchronous Request
For executing a synchronous request, change the third parameter in the open() method to false:
xhttp.open(“GET”, “ajax_info.txt”, false);
Sometimes async = false is used for quick testing. You will also find synchronous requests in older JavaScript code.
Since the code waits for server completion, there is no need for an onreadystatechange function:
Example
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id=”demo”>Let AJAX change this text.</p>
<button type=”button” onclick=”loadDoc()”>Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open(“GET”, “ajax_info.txt”, false);
xhttp.send();
document.getElementById(“demo”).innerHTML = xhttp.responseText;
}
</script>
</body>
</html>