8/8/13

AJAX Database
Search w3schools.com:

HOME

HTML

C SS

JAVASC RIPT

JQUERY

XML

ASP.NET

PHP

SQL

MORE...

R EFER ENC ES

EXAMPLES

FO R UM

ABO UT

SHARE THIS PAGE

Like

77k

AJAX Basic
AJAX HOME AJAX Intro AJAX Example

AJAX Database Example

Previous
AJAX can be used for interactive communication with a database.

WEB HOSTING

Next Chapter

Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email

AJAX XMLHttpRequest
XHR Create Object XHR Request XHR Response XHR readyState

AJAX Database Example

The following example will demonstrate how a web page can fetch information from a database with AJAX: WEB BUILDING
XML Editor - Free Trial!

Example

AJAX Advanced
AJAX ASP/PHP AJAX Database AJAX XML File

FREE Website BUILDER FREE Website C reator Best Website Templates

Select a customer:
Customer info will be listed here...

STATISTICS Try it yourself

Browser Statistics OS Statistics

AJAX Examples
AJAX Examples

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:

Display Statistics

f u n c t i o ns h o w C u s t o m e r ( s t r ) { v a rx m l h t t p ; i f( s t r = = " " ) { d o c u m e n t . g e t E l e m e n t B y I d ( " t x t H i n t " ) . i n n e r H T M L = " " ; r e t u r n ; } i f( w i n d o w . X M L H t t p R e q u e s t ) { / /c o d ef o rI E 7 + ,F i r e f o x ,C h r o m e ,O p e r a ,S a f a r i x m l h t t p = n e wX M L H t t p R e q u e s t ( ) ; } e l s e { / /c o d ef o rI E 6 ,I E 5 x m l h t t p = n e wA c t i v e X O b j e c t ( " M i c r o s o f t . X M L H T T P " ) ; } x m l h t t p . o n r e a d y s t a t e c h a n g e = f u n c t i o n ( ) { i f( x m l h t t p . r e a d y S t a t e = = 4& &x m l h t t p . s t a t u s = = 2 0 0 ) { d o c u m e n t . g e t E l e m e n t B y I d ( " t x t H i n t " ) . i n n e r H T M L = x m l h t t p . r e s p o n s e T e x t ; } } x m l h t t p . o p e n ( " G E T " , " g e t c u s t o m e r . a s p ? q = " + s t r , t r u e ) ; x m l h t t p . s e n d ( ) ; }
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 off to a file on the server 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 "getcustomer.asp". The server file could easily be rewritten in PHP, or some other server languages. Look at 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:

< % r e s p o n s e . e x p i r e s = 1 s q l = " S E L E C T*F R O MC U S T O M E R SW H E R EC U S T O M E R I D = " s q l = s q l&" ' "&r e q u e s t . q u e r y s t r i n g ( " q " )&" ' " s e tc o n n = S e r v e r . C r e a t e O b j e c t ( " A D O D B . C o n n e c t i o n " ) c o n n . P r o v i d e r = " M i c r o s o f t . J e t . O L E D B . 4 . 0 " c o n n . O p e n ( S e r v e r . M a p p a t h ( " / d b / n o r t h w i n d . m d b " ) ) s e tr s = S e r v e r . C r e a t e O b j e c t ( " A D O D B . r e c o r d s e t " ) r s . O p e ns q l , c o n n

w3schools.com/ajax/ajax_database.asp

1/2

8/8/13

AJAX Database
r e s p o n s e . w r i t e ( " < t a b l e > " ) d ou n t i lr s . E O F f o re a c hxi nr s . F i e l d s r e s p o n s e . w r i t e ( " < t r > < t d > < b > "&x . n a m e&" < / b > < / t d > " ) r e s p o n s e . w r i t e ( " < t d > "&x . v a l u e&" < / t d > < / t r > " ) n e x t r s . M o v e N e x t l o o p r e s p o n s e . w r i t e ( " < / t a b l e > " ) % >

Previous

Next Chapter

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS 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 C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picker

Statistics
Browser Statistics Browser OS Browser Display

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

A D V E RT I SE WI T H U S

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. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

w3schools.com/ajax/ajax_database.asp

2/2