WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AJAX Database Example


AJAX can be utilized for intelligent correspondence with a database.


AJAX Database Example

The following precedent will exhibit how a site page can get data from a database with AJAX:

Example


Customer information will be recorded here...


Example Explained - The showCustomer() Function

When a client chooses a client in the dropdown list over, a capacity called "showCustomer()" is executed. The work is activated by the "onchange" event:

showCustomer

work showCustomer(str) {
  var xhttp;
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = work() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("txtHint").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q="+str, true);
  xhttp.send();
}

The showCustomer() work does the following:

  • Check if a client is selected
  • Create a XMLHttpRequest object
  • Create the capacity to be executed when the server reaction is ready
  • Send the demand off to a document on the server
  • Notice that a parameter (q) is added to the URL (with the substance of the dropdown list)

The AJAX Server Page

The page on the server called by the JavaScript above is an ASP document called "getcustomer.asp".

The server document could without much of a stretch be modified in PHP, or some other server languages.

Look at a comparing precedent in PHP.

The source code in "getcustomer.asp" runs an inquiry against a database, and returns the outcome in a HTML table:

<%
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("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
  for every 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>")
%>