AJAX Database instance

insert image description here

AJAX can be used to communicate dynamically with the database.

AJAX database instance

The following example will demonstrate how the web page reads information from the database via AJAX: Please select a customer in the drop-down list below:

example

code part

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showCustomer(str)
{
      
      
  var xmlhttp;    
  if (str=="")
  {
      
      
    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/getcustomer.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">客户信息将显示在这...</div>
</body>
</html>

running result
insert image description here

Example to explain the showCustomer() function

When the user selects a customer in the drop-down list above, a function called "showCustomer()" is executed. The function is triggered by the "onchange" event:

function showCustomer(str)
{
    
    
  var xmlhttp;   
  if (str=="")
  {
    
    
    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/getcustomer.php?q="+str,true);
  xmlhttp.send();
}

The showCustomer() function performs the following tasks:

Check if a customer is selected
Create an XMLHttpRequest object
Execute the created function when the 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 in the input field)

AJAX server page

The server page called by the JavaScript above is a PHP file called "getcustomer.php".

It's also easy to write server files in PHP, or in other server languages. See the corresponding example written in PHP.

The source code in "getcustomer.php" is responsible for querying the database and returning the results in an HTML form:

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
 
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
 
response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop
response.write("</table>")
%>

Ajax database

Article directory

AJAX Database instance