HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
AJAX is about updating parts of a web page, without reloading the whole page.AJAX can be used for interactive communication with a database
AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
AJAX is based on internet standards, and uses a combination of:
AJAX applications are browser- and platform-independent!
AJAX was made popular in 2005 by Google, with Google Suggest.
In our ASP tutorial, we will demonstrate how AJAX can update parts of a web page, without reloading the whole page. The server script will be written in ASP.
If you want to learn more about AJAX, visit our AJAX tutorial.
The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:
Start typing a name in the input field below:
Suggestions:
In the example above, when a user types a character in the input field, a function called "showHint()" is executed.
The function is triggered by the onkeyup event.
Here is the HTML code:
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 &&
this.status == 200) {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "gethint?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Code explanation:
First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.
However, if the input field is not empty, do the following:
The ASP file checks an array of names, and returns the corresponding name(s) to the browser:
The following example will demonstrate how a web page can fetch information from a database with AJAX:
When a user selects a customer in the dropdown list above, a function called "showCustomer()" is executed. The function is triggered by the "onchange" event:
Source code explanation:
If no customer is selected (str.length==0), the function clears the content of the txtHint placeholder and exits the function.
If a customer is selected, the showCustomer() function executes the following:
The page on the server called by the JavaScript above is an ASP file called "getcustomer".
The source code in "getcustomer" runs a query against a database, and returns the result in an HTML table: