- 4 years ago
- Zaid Bin Khalid
- 9397 Views
-
8
In this session, you will learn what Ajax is and how to implement it in JavaScript with the help of example and code.
What is Ajax?
Ajax full form is Asynchronous JavaScript And XML. Ajax is just used for loading data from the server and update selective parts of a webpage without reloading the whole page.
You can hardly find an application that does not use Ajax to some extent. Ajax has become so popular in no time. For an example of some Ajax use online applications are: Google Maps, Google Docs, Youtube, Facebook, Flickr, and so many other apps which used Ajax.
Understanding How Ajax Works
Ajax Communication JavaScript uses a unique object to perform into the browser an XMLHttpRequest (XHR) object which is used to make an HTTP request to the server and in return receive data.
All modern browsers support the XMLHttpRequest (XHR) object like (Chrome. Firefox, Safari, Opera)
The following diagram demonstrates how Ajax communication works:
Sending Request and Retrieving the Response
The first thing before you continued with Ajax object between server and client you must do is to instantiate an XMLHttpRequest object, as shown below:
var request = new XMLHttpRequest();
The next step is using the open ( ) method of the XMLHttpRequest object to send the request to the server is to instantiating the newly-created request object.
Two parameters typically accepted in the open ( ) method—such as “GET”, “POST”, etc., as shown:
request.open("GET", "info.txt"); -Or- request.open("POST", "add-user.php");
After that you use the send ( ) method to finally send the request of the XMLHttpRequest object.
request.send(); -Or- request.send(body);
Generally to send the small amount of data to the server used GET method and to send the large amount of data to the server used POST method.
Performing an Ajax GET Request
To get or retrieve some information from the server, which does not require any change in the database you can use GET.
As shown in the example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax GET Demo</title>
<script>
function displayFullName() {
// Creating the XMLHttpRequest object
var request = new XMLHttpRequest();
// Instantiating the request object
request.open("GET", "greet.php?fname=John&lname=Clark");
// Defining event listener for readystatechange event
request.onreadystatechange = function() {
// Check if the request is compete and was successful
if(this.readyState === 4 && this.status === 200) {
// Inserting the response from server into an HTML element
document.getElementById("result").innerHTML = this.responseText;
}
};
// Sending the request to the server
request.send();
}
</script>
</head>
<body>
<div id="result">
<p>Content of the result DIV box will be replaced by the server response</p>
</div>
<button type="button" onclick="displayFullName()">Display Full Name</button>
</body>
</html>
Performing an Ajax POST Request
The POST method is mainly used to submit a form of data to the webserver,
As shown in the example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Ajax POST Demo</title>
<script>
function postComment() {
// Creating the XMLHttpRequest object
var request = new XMLHttpRequest();
// Instantiating the request object
request.open("POST", "confirmation.php");
// Defining event listener for readystatechange event
request.onreadystatechange = function() {
// Check if the request is compete and was successful
if(this.readyState === 4 && this.status === 200) {
// Inserting the response from server into an HTML element
document.getElementById("result").innerHTML = this.responseText;
}
};
// Retrieving the form data
var myForm = document.getElementById("myForm");
var formData = new FormData(myForm);
// Sending the request to the server
request.send(formData);
}
</script>
</head>
<body>
<form id="myForm">
<label>Name:</label>
<div><input type="text" name="name"></div>
<br>
<label>Comment:</label>
<div><textarea name="comment"></textarea></div>
<p><button type="button" onclick="postComment()">Post Comment</button></p>
</form>
<div id="result">
<p>Content of the result DIV box will be replaced by the server response</p>
</div>
</body>
</html>
Browsers do not allow to make cross-domain Ajax requests due to security reasons. That means you can only request URLs from the same domain as the original page with the help of Ajax requests. You can load from any domain and other resources like images, style sheets, JS files, and many more.
- 4 years ago
- Zaid Bin Khalid
- 9397 Views
-
8