AJAX means Asynchronous JAvascript and XML. Javascript is used at the client side to send informaitons to the server, and get reponses from
the server.
The process is asynchronous, thus the user's web page browsing acitivity will not be
disrupted. At the server side, various language can be used to precess the information, the logic is similar,
of which PHP is very popular. Sometimes CSS is also used to improve the web designs.
That's see an example, following is the input box that use AJAX, you may input "php", "ajax",
"javascript" to get response from the server side.
Following is the web page code:
<html>
<body>
<style type="text/css" media="screen">
.link{
width:350px;
height:22px;
border:1px solid;
}
.link_over{
background-color: #D1E0A4;
height:22px;
width:350px;
border:1px solid;
}
</style>
<input id="searchtxt" autocomplete="off" type="text"
onkeyup="searchindex()" style="width:350px;height:26px" name="q">
<div id="suggest" style="font-size:14px"></div>
<br>
<script language=Javascript>
var req;
document.onclick = onClick;
function onClick(ev)
{
document.getElementById('suggest').innerHTML = '';
}
function searchindex()
{
if (req.readyState == 4 || req.readyState == 0)
{
var str = document.getElementById('searchtxt').value;
req.open("GET", 'script/ajax_example.php?q=' + str, true);
req.onreadystatechange = handleSearchSuggest;
req.send(null);
}
}
function divmainsuggestOut(div_value){
document.getElementById('suggest').innerHTML = '';
}
if (window.XMLHttpRequest){
req = new XMLHttpRequest();
}
else if (window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
function handleSearchSuggest()
{
if (req.readyState == 4)
{
var ss = document.getElementById('suggest');
var str = req.responseText.split("\n");
ss.innerHTML = '';
for(var i=0; i < str.length - 1; i = i + 1){
var stri = str[i];
var elem = stri.split(",");
var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
suggest += 'onmouseout="javascript:suggestOut(this);" ';
suggest += 'onclick="window.location.href=\'' + elem[1] + '\'"; ';
suggest += 'class="link">';
suggest += "<A href=\"" + elem[1] + "\">" + elem[0] + "</A></div>";
ss.innerHTML += suggest;
}
}
}
function suggestOver(d){d.className = 'link_over';}
function suggestOut(d){d.className = 'link';}
</script>
</body>
</html>
Following is the PHP code at the server side:
<?PHP
if (isset($_GET['q'])) $q = $_GET['q'];
$ax = array();
$ax["AJAX"]="ajax.php";
$ax["Javascript"]="../js/";
$ax["PHP"]="index.php";
$ax["R"]="../R/";
$ax["Unit Conversion"]="../../convert/";
$ax["Scientific Calculator"]="../../calc/";
foreach($ax as $key=>$val)
{
$key2 = strtolower($key);
if (preg_match("/$q/",$key2)) echo "$key,$val\n";
}
?>
The above ajax is similar to the search box at the home page of this site.
