8/12/2019 AJAX Database

1/2

8/8/13 AJAX Database

w3schools.com/ajax/ajax_database.asp 1/2

HOME HTML CSS JAVASCRIPT JQUERY XML ASP.NET PHP SQL MORE... REFERENCES | EXAMPLES | FORUM | ABOU

SHARE THIS PAGE

Like 77k

AJAXBasic

AJAX HOME

AJAX Intro

AJAX Example

AJAXXMLHttpRequest

XHR Create Object

XHR Request

XHR Response

XHR readyState

AJAXAdvanced

AJAX ASP/PHP

AJAX Database

AJAX XML File

AJAXExamples

AJAX Examples

Previous Next Chapter AJAX Database Example

AJAX can be used for interactive communication with adatabase.

AJAX Database Example

The following example will demonstrate how a web page canfetch information from a database with AJAX:

Example

Select a customer:

Customer info w ill be listed here...

Try it yourself

Example Explained - The showCustomer() Function

When a user selects a customer in the dropdown 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)

{// 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","getcustomer.asp?q="+str,true);

xmlhttp.send();

}

The showCustomer() function does the following:

Check if a customer is selected

Create an XMLHttpRequest object

Create the function to be executed when the server response is ready

Send the request o ff to a file on the s erver

Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

The AJAX Server Page

The page on the server called by the JavaScript above is an ASP file called "ge tcustomer.asp".

The server file could eas ily be rew ritten in PHP, or some other s erver languages. Look a t a corresponding example

in PHP.

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

8/12/2019 AJAX Database

2/2

8/8/13 AJAX Database

w3schools.com/ajax/ajax_database.asp 2/2

REPORT ERROR | HOME | TO P | PRINT | FORUM | ABOUT | ADVERTISE WITH US

Previous Next Chapter

response.write("")

do until rs.EOF

for each x in rs.Fields

response.write("" & x.name & "")

response.write("" & x.value & "")

next

rs.MoveNext

loop

response.write("")

%>

Top 10 Tutorials

HTML Tutorial

HTML5 Tutorial

CSS Tutorial

CSS3 Tutorial

JavaScript Tutorial

jQuery Tutorial

SQL Tutorial

PHP Tutorial

ASP.NET Tutorial

XML Tutorial

Top 10 References

HTML/HTML5 Reference

CSS 1,2,3 Reference

CSS 3 Browser Support

JavaScript

HTML DOM

XML DOM

PHP Reference

jQuery Reference

ASP.NET Reference

HTML Colors

Examples

HTML Examples

CSS Examples

XML Examples

JavaScript Examples

HTML DOM Examples

XML DOM Examples

AJAX Examples

ASP.NET Examples

Razor Examples

ASP Examples

SVG Examples

Quizzes

HTML Quiz

HTML5 Quiz

XHTML Quiz

CSS Quiz

JavaScript Quiz

jQuery Quiz

XML Quiz

ASP Quiz

PHP Quiz

SQL Quiz

Color Picker

Statistics

Browser Statistics

Browser OS

Browser Display

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

While using this site, you agree to have read and accepted our terms of use and privacy policy.Copyright 1999-2013 by Refsnes Data. All Rights Reserved.

http://w3schools.com/about/about_copyright.asphttp://w3schools.com/about/about_privacy.asphttp://w3schools.com/about/about_copyright.asphttp://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://w3schools.com/tags/ref_colorpicker.asphttp://w3schools.com/quiztest/quiztest.asp?qtest=SQLhttp://w3schools.com/quiztest/quiztest.asp?qtest=PHPhttp://w3schools.com/quiztest/quiztest.asp?qtest=ASPhttp://w3schools.com/quiztest/quiztest.asp?qtest=XMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=jQueryhttp://w3schools.com/quiztest/quiztest.asp?qtest=JavaScripthttp://w3schools.com/quiztest/quiztest.asp?qtest=CSShttp://w3schools.com/quiztest/quiztest.asp?qtest=XHTMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=HTML5http://w3schools.com/quiztest/quiztest.asp?qtest=HTMLhttp://w3schools.com/svg/svg_examples.asphttp://w3schools.com/asp/asp_examples.asphttp://w3schools.com/aspnet/webpages_examples.asphttp://w3schools.com/aspnet/aspnet_examples.asphttp://w3schools.com/ajax/ajax_examples.asphttp://w3schools.com/dom/dom_examples.asphttp://w3schools.com/htmldom/dom_examples.asphttp://w3schools.com/js/js_examples.asphttp://w3schools.com/xml/xml_examples.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/html/html_examples.asphttp://w3schools.com/tags/ref_colornames.asphttp://w3schools.com/aspnet/webpages_ref_classes.asphttp://w3schools.com/jquery/jquery_ref_selectors.asphttp://w3schools.com/php/php_ref_array.asphttp://w3schools.com/dom/dom_nodetype.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/cssref/css3_browsersupport.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/tags/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css3/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/html5_intro.asphttp://w3schools.com/html/default.asphttp://w3schools.com/ajax/ajax_xmlfile.asphttp://w3schools.com/ajax/ajax_aspphp.asphttp://w3schools.com/about/about_advert.asphttp://w3schools.com/about/default.asphttp://w3schools.com/forum/default.asphttp://w3schools.com/ajax/ajax_database.asp?output=printhttp://w3schools.com/ajax/ajax_database.asp#tophttp://w3schools.com/default.asphttp://w3schools.com/ajax/ajax_database.asphttp://www.w3schools.com/