AJAX ASP/PHP example

insert image description here

AJAX is used to create more dynamic applications.

AJAX ASP/PHP example

The following example will show you how the web page communicates with the web server when the user types characters in the input box: Please type letters (A - Z) in the input box below:

code part

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
      
      
  var xmlhttp;
  if (str.length==0)
  {
      
       
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
      
      
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
      
      
    // 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","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<h3>在输入框中尝试输入字母 a:</h3>
<form action="">
输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p>
</body>
</html>

running result
insert image description here

example

Example analysis showHint() function

When the user types characters in the input box above, the function "showHint()" will be executed. This function is triggered by the "onkeyup" event:

function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // 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","/try/ajax/gethint.php?q="+str,true);
  xmlhttp.send();
}

Source code analysis:

If the input box is empty (str.length==0), the function clears the contents of the txtHint placeholder and exits the function.

If the input box is not empty, the showHint() function performs the following tasks:

Create an XMLHttpRequest object
Execute function when server response is ready
Send the request to the file on the server
Note that we added a parameter q to the URL (with the content of the input box)

AJAX Server Pages ASP and PHP

The server page called by the JavaScript above is an ASP file named "gethint.asp".

Below, we create two versions of the server file, one written in ASP and the other in PHP.

asp file

The source code in "gethint.asp" checks an array of names and returns the corresponding names to the browser:

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
 
'get the q parameter from URL
q=ucase(request.querystring("q"))
 
'lookup all hints from array if length of q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if
 
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>

php file

The code below is written in PHP and does the same thing as the ASP code above.

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
 
//get the q parameter from URL
$q=$_GET["q"];
 
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
    
    
  $hint="";
  for($i=0; $i<count($a); $i++)
  {
    
    
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    
    
      if ($hint=="")
      {
    
    
        $hint=$a[$i];
      }
      else
      {
    
    
        $hint=$hint." , ".$a[$i];
      }
    }
  }
}
 
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
    
    
  $response="no suggestion";
}
else
{
    
    
  $response=$hint;
}
 
//output the response
echo $response;
?>

Ajax ASP/PHP

Article directory

AJAX ASP/PHP example