On 12.04.25, In A lesson on how to program using AJAX scripts.
Ajax Examples
Listed below are several Ajax examples that help one to understand how Ajax works and some of the functions that may be used with Ajax. The first example is a simple string of code that provides a basis for the use of Ajax:
Simple Ajax Example
This example of Ajax code contains one div section and one button that may be used. The div section is used to display information that is returned from the server, while the button is programmed to call a function if clicked and load the loadXMLdoc() file.
<html>
<body>
<div id=”myDiv”><h2>Let AJAX change this text</h2></div>
<button type=”button” onclick=”loadXMLDoc()”>Change Content</button>
</body>
</html>
The loadXMLdoc() must be configured with Ajax in order for the button to work, which requires a separate section of code listed below;
<head>
<script type=”text/javascript”>
function loadXMLDoc()
{
…. AJAX script goes here …
}
</script>
</head>
The script for the loadXMLdoc() would be placed in the code where the “…AJAX script goes here…” section.
Retrieve ASP File Content
The following code is used to allow a website to communicate with a server while a visitor is typing data into a target field, such as the Google search engines function to display suggestions while the user is typing in the search query.
<html>
<head>
<script type=”text/javascript”>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById(”txtHint”).innerHTML=”";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(”txtHint”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(”GET”,”gethint.asp?q=”+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action=”">
First name: <input type=”text” id=”txt1″ onkeyup=”showHint(this.value)” />
</form>
<p>Suggestions: <span id=”txtHint”></span></p>
</body>
</html>
Ajax Example with Callback Function
Ajax is designed to create fast and dynamic web pages and the following code provides an example of the functionality provide by Ajax. The following code shows how one may create an XMLhttprequest with a callback function and retrieve information from a text file. This allows for one to create buttons that alters text and displays the text from a text file.
<html>
<head>
<script type=”text/javascript”>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open(”GET”,url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc(”ajax_info.txt”,function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(”myDiv”).innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id=”myDiv”><h2>Let AJAX change this text</h2></div>
<button type=”button” onclick=”myFunction()”>Change Content</button>
</body>
</html>
Wow…you know a lot on this subject. I am not familiar with computer stuff