Updated March 18, 2023
Introduction to Ajax in ASP.NET
AJAX in ASP.NET is known as Asynchronous JavaScript and XML. It is all about updating functions of a web page, without loading it each and every time we open the webpage. It is a technique used to create very fast and dynamic web pages.
Ajax in ASP.NET is majorly used when the user is having dynamic content and has to be reloaded multiple times after the changes have been done. This technology also speeds up the response time of the page. It also has a user-friendly interface and interactive webpages.
Working of Ajax in ASP.NET
AJAX is the advanced version of the static pages that were used for a long time. AJAX is built for dynamic nature and a user-friendly environment.
AJAX in ASP.NET works like the below-listed points:
- The XMLHTTPRequest object is created from the browser and sent to the server-side.
- The server will process the request sent by the browser and will send the data back to the browser with the requested detail.
- The browser will process the data and update the content on the page.
- Once the content is updated the user can view the data on the screen.
Assume you have an employee data entry portal and you have to add a new employee in the database. In the above flowchart, we can see that the client creates an XMLHTTP request with the requested data to the server. Here, the employee details will start by adding the first and last name of the employee.
On the web page that the user sees already a few employee details must be added to the database. It will show a few suggestions of the names present in the name matching the keyword. The server then sends the requested data back to the client. If the employee in the database is not added then a new entry will be created with his details.
Now the client will process the data sent by the server and the response time is faster as compared to other technologies used. Now the employee details are successfully added to the database, so if the details added recently has to be seen the user can simply enter the employee name and unique id to fetch the results on the screen. Here the user interface is very interactive and the response time is also less.
Examples of Ajax in ASP.NET
Given below are the examples mentioned:
Example #1
In this example, the button is created but the action will not be performed when we click the button.
Code:
<html>
<body>
<div id= "Demonstration">
<h1> Example of AJAX </h1>
<h2> Let's take examples on buttons</h2>
<button type="button" > Click on this button </button>
</div>Output:
Example #2
In this example, by clicking on the button you need to redirect it to some other page, we can see how we can take action.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Let’s see what the user is typing.</p>
<input type="text" id="textbox" oninput="textfunction()">
<p id="text"></p>
<script>
function textfunction() {
var obj = document.getElementById("textbox").value;
document.getElementById("text").innerHTML = "The letters you are typing: " + obj;
}
</script>
</body>
</html>Output:
Example #3
In this example, we will discuss how to perform the load function in ajax.
Code:
<html>
<body>
<div id="Demonstration">
<h3>AJAX EXAMPLE ON LOAD</h3>
<button type="button" onclick="load('ajax_load_GET.asp', loadfunction)">Click on this button
</button>
</div>
<script>
function load(url, copy_function) {
var xhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
copy_function(this);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function loadfunction(xmlhttp) {
document.getElementById("Demonstration").innerHTML =
xmlhttp.responseText;
}
</script>
</body>
</html>Output:
Example #4
After clicking on the button the content of the asp file will get printed on the screen. There are two methods to retrieve the information i.e. GET and POST method.
Code:
<!DOCTYPE html>
<html>
<body>
<h3>AJAX EXAMPLE ON LOAD</h3>
<h3> This example is for POST method </h3>
<button type="button" onclick="loadPOST()">Click on this button</button>
<p id="Demonstration"></p>
<script>
function loadPOST() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Demonstration").innerHTML = this.responseText;
}
};
xmlhttp.open("POST", "ajax_load_POST.asp", true);
xmlhttp.send();
}
</script>
</body>
</html>Output:
Features of Ajax in ASP.NET
The below listed are few important features of AJAX in ASP.NET:
- User-Friendly: This is one of the main features in Ajax where the user interface of the webpage is so flexible and comfortable for the user to use the page as he must have to fill all the details required.
- Web Page Faster: This feature in AJAX is the primary one as it has been built for the same. This feature allows the webpage to create the request and the server response time within seconds. These features also make the webpage reload faster than the usual ones. We don’t have to reload the whole page all the time only the specific part has to be reloaded if it has been changed.
- Server Independent Technology: AJAX in asp.net can be used irrespective of any programming language like JavaScript, PHP, etc. Many languages support AJAX and its characteristics and features.
- Performance: It is mainly used for the performance and speed of a webpage. The time taken from creating the XMLHTTP request to getting the data response back from the server is quick while using AJAX. So one of the major factors is used for performance basis on a webpage.
- Support Browsers: AJAX is primarily used because it supports almost all the browsers used in the market. Apart from the concept that creates the XMLHTTP object, the processing will be the same for all the web browsers because JavaScript language is used in most of web applications.
- Interactive Applications: Using ajax is very easy for the developer or programmer to create more interactive and user-friendly web applications. As we know in today’s world everything is a two-way process where you have to put as well as get the data, so it is helpful in the two-way process where the client can interact with the server to fetch as well as write the data.
Conclusion
In this article, we discussed the features of AJAX in asp.net and how it works in ASP.Net applications. Also, we discussed a few examples where AJAX is used and its characteristics. It is one of the most useful and powerful technology for the modern environment. It is highly used in social media sites like Facebook, Twitter, etc.
Recommended Articles
This is a guide to Ajax in ASP.NET. Here we discuss the working, features of Ajax in ASP.NET along with the examples and code implementation. You may also look at the following articles to learn more –
