The XMLHttpRequest object is used to exchange data with a server.
Send a Request To a Server
To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
-
open(method, url, async) Specifies the type of request
-
method: the type of request: GET or POST
- url: the server (file) location
- async: true (asynchronous) or false (synchronous)
-
-
send() Sends the request to the server (used for GET)
-
send(string) Sends the request to the server (used for POST)
GET Requests
-
A cached file is not an option (update a file or database on the server).
-
Sending a large amount of data to the server (POST has no size limitations).
-
Sending user input (which can contain unknown characters), POST is more robust and secure than GET.
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "test.php?fname=Crowd&lname=forJobs", true);
xhttp.send();
}
</script>
</body>
</html>
.png)
Output:
.png)
POST Requests
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("POST", "test.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Crowd&lname=forJobs");
}
</script>
</body>
</html>
.png)
Output:
.png)
The onreadystatechange Property
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "test.txt", true);
xhttp.send();
}
</script>
</body>
</html>
Synchronous Request
-
Synchronous XMLHttpRequest (async = false) is not recommended because the JavaScript will stop executing until the server response is ready. If the server is busy or slow, the application will hang or stop.
-
Synchronous XMLHttpRequest is in the process of being removed from the web standard, but this process can take many years.
-
Modern developer tools are encouraged to warn about using synchronous requests and may throw an InvalidAccessError exception when it occurs.
<!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<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", "test.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>
