ArticleDirectory
- Example-HTML form
- Example:
- Example:
AJAX can be used to return database information in XML.
Ajax database to XML instance (Test Description: This instance function is not implemented)
In the following Ajax example, we will demonstrate how to read information from the MySQL database, convert the data to an XML document, and use this document in different places to display information.
This example is similar to the "php Ajax Database" example in the previous section, but there is a big difference: in this example, we use the responsexml function to obtain XML data from the PHP page.
Receiving XML documents as responses gives us the ability to update multiple locations on the page, not just receiving and displaying a PHP output.
In this example, we use the information received from the database to update multiple <span> elements.
Select a name from the drop-down list.
This column consists of four elements:
- MySQL database
- Simple HTML form
- Javascript
- PHP page
Database
The database used in this example looks like this:
ID |
Firstname |
Lastname |
Age |
Hometown |
Job |
1 |
Peter |
Griffin in |
41 |
Quahog |
Brewery |
2 |
Lois |
Griffin in |
40 |
Newport |
Piano Teacher |
3 |
Joseph |
Swanson |
39 |
Quahog |
Police Officer |
4 |
Glenn |
Quagmire |
41 |
Quahog |
Pilot |
HTML form
The preceding example contains a simple HTML form and a link to javascript:
<HTML>
Example-HTML form
- An HTML form is a drop-down list with the name attribute value "users". The optional values correspond to the ID field of the database.
- There are several <span> elements in the form that serve as placeholders for different values we receive.
- When you select a specific option, the function "showuser ()" is executed. This function is triggered by the onchange event.
In other words, every time a user changes the value in the drop-down list, the showuser () function is executed and the result is output in the specified <span> element.
Javascript
This is the Javascript stored in the file "responsexml. js ".Code:
VaR xmlhttpfunction showuser (STR) {XMLHTTP = getxmlhttpobject () if (XMLHTTP = NULL) {alert ("browser does not support HTTP request") return} var url = "responsexml. PHP "url = URL + "? Q = "+ STR url = URL +" & SID = "+ math. random () XMLHTTP. onreadystatechange = statechanged XMLHTTP. open ("get", URL, true) XMLHTTP. send (null)} function statechanged () {If (XMLHTTP. readystate = 4 | XMLHTTP. readystate = "complete") {xmldoc = XMLHTTP. responsexml; document. getelementbyid ("firstname "). innerhtml = xmldoc. getelementsbytagname ("firstname") [0]. childnodes [0]. nodevalue; document. getelementbyid ("lastname "). innerhtml = xmldoc. getelementsbytagname ("lastname") [0]. childnodes [0]. nodevalue; document. getelementbyid ("job "). innerhtml = xmldoc. getelementsbytagname ("job") [0]. childnodes [0]. nodevalue; document. getelementbyid ("age_text "). innerhtml = "Age:"; document. getelementbyid ("Age "). innerhtml = xmldoc. getelementsbytagname ("Age") [0]. childnodes [0]. nodevalue; document. getelementbyid ("hometown_text "). innerhtml = "<br/> from:"; document. getelementbyid ("Hometown "). innerhtml = xmldoc. getelementsbytagname ("Hometown") [0]. childnodes [0]. nodevalue ;}} function getxmlhttpobject () {var objxmlhttp = NULL if (window. XMLHttpRequest) {objxmlhttp = new XMLHttpRequest ()} else if (window. activexobject) {objxmlhttp = new activexobject ("Microsoft. XMLHTTP ")} return objxmlhttp}
Example:
The showuser () and getxmlhttpobject functions are the same as the examples in the section PHP and Ajax MySQL database instances. For more information, see.
Statechanged () function
If you select a project from the drop-down list, run the following function:
- Use the responsexml function to define the "xmldoc" variable as an XML document.
- Retrieve data from this XML document and place them in the correct "span" element.
PHP page
The server page called by JavaScript is a simple PHP file named "responsexml. php.
This page is written in PHP and uses the MySQL database.
The code runs an SQL query for the database and returns the result in XML:
<? Phpheader ('content-type: text/xml'); header ("cache-control: No-cache, must-revalidate "); // a date in the pastheader ("expires: Mon, 26 Jul 1997 05:00:00 GMT"); $ q =$ _ Get ["Q"]; $ con = mysql_connect ('localhost', 'Peter ', 'abc123'); If (! $ Con) {die ('could not connect :'. mysql_error ();} mysql_select_db ("ajax_demo", $ con); $ SQL = "select * from user where id = ". $ Q. ""; $ result = mysql_query ($ SQL); echo '<? XML version = "1.0" encoding = "ISO-8859-1"?> <Person> '; while ($ ROW = mysql_fetch_array ($ result) {echo "<firstname> ". $ row ['firstname']. "</firstname>"; echo "<lastname> ". $ row ['lastname']. "</lastname>"; echo "<age> ". $ row ['age']. "</age>"; echo "<Hometown> ". $ row ['hometown ']. "</Hometown>"; echo "<job> ". $ row ['job']. "</job>";} echo "</person>"; mysql_close ($ con);?>
Example:
When a query is sent from JavaScript to a PHP page, the following occurs:
- the Content-Type of the PHP document is set to "text/XML"
- the PHP document is set to "no-Cache" to prevent caching
- set the $ q variable with the data sent from the HTML page
- PHP opens a connection with the MySQL server
- find the "user" with the specified id
- output data in XML document