AJAX ( Asynchronous JavaScript and XML). AJAX is used to create more interactive and dynamic web applications.
AJAX permits web pages to be rationalized by switching small amounts of data with the server behindhand the acts. This means that it is conceivable to inform shares of a web page, without refreshing or reloading again the whole web page.
below is the basic example of ajax:
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)// server response and state 200 mean ok and readyState 4 means server is ready to send data for client.
{
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "page.php?q=" + str, true);// page.php is where you want to send request.
xmlhttp.send(); // send the request
}
}
</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>
AJAX permits web pages to be rationalized by switching small amounts of data with the server behindhand the acts. This means that it is conceivable to inform shares of a web page, without refreshing or reloading again the whole web page.
below is the basic example of ajax:
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)// server response and state 200 mean ok and readyState 4 means server is ready to send data for client.
{
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "page.php?q=" + str, true);// page.php is where you want to send request.
xmlhttp.send(); // send the request
}
}
</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>
No comments:
Post a Comment