XML AJAX
AJAX is a developer's dream, because you can:
- Update a web page without reloading the page
- Request data from a server - after the page has loaded
- Receive data from a server - after the page has loaded
- Send data to a server - in the background
What is AJAX?
AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:
- A browser built-in XMLHttpRequest object (to request data from a web server)
- JavaScript and HTML DOM (to display or use the data)
The XMLHttpRequest Object
All modern browsers support the XMLHttpRequest object.
The XMLHttpRequest object can be used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Create an XMLHttpRequest Object
All modern browsers (Chrome, Firefox, Edge (and IE7+), Safari, Opera) have a built-in XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
variable = new XMLHttpRequest();
Example:
vvar xhttp = new XMLHttpRequest();
The "ajax_info.txt" file used in the example above, is a simple text file and looks like this:
<h1>AJAX</h1> <p>AJAX is not a programming language.</p><p>AJAX is a technique for accessing web servers from a web page.</p><p>AJAX stands for Asynchronous JavaScript And XML.</p> |
For security reasons, modern browsers do not allow access across domains.
This means that both the web page and the XML file it tries to load, must be located on the same server.
The examples on W3Schools all open XML files located on the W3Schools domain.
If you want to use the example above on one of your own web pages, the XML files you load must be located on your own server.
REQUEST
Send a Request To a Server
To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: OPEN
Method:open(method, url, async)
Description: pecifies the type of requestmethod: the type of request: GET or POSTurl: the server (file) locationasync: true (asynchronous) or false (synchronous
GET is simpler and faster than POST, and can be used in most cases.
However, always use POST requests when:
- A cached file is not an option (update a file or database on the server).
- Sending a large amount of data to the server (POST has no size limitations).
- Sending user input (which can contain unknown characters), POST is more robust and secure than GET.
GET Requests
A simple GET request:
xhttp.open("GET", "demo_get.asp", true); xhttp.send(); |
In the example above, you may get a cached result. To avoid this, add a unique ID to the URL:
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true); xhttp.send(); |
If you want to send information with the GET method, add the information to the URL:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true); xhttp.send(); |
POST Requests
A simple POST request:
xhttp.open("POST", "demo_post.asp", true); xhttp.send(); |
To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method:
Example
xhhttp.open("POST", "demo_post2.asp", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhttp.send("fname=Henry&lname=Ford"); |
AJAX XML Example
The following example will demonstrate how a web page can fetch information from an XML file with AJAX:
Get CD info |
Example Explained
When a user clicks on the "Get CD info" button above, the loadDoc() function is executed.
The loadDoc() function creates an XMLHttpRequest object, adds the function to be executed when the server response is ready, and sends the request off to the server.
When the server response is ready, an HTML table is built, nodes (elements) are extracted from the XML file, and it finally updates the element "demo" with the HTML table filled with XML data:
function loadDoc() { |
The XML File
The XML file used in the example above looks like this: "cd_catalog.xml".
AJAX PHP Example
The following example demonstrates how a web page can communicate with a web server while a user types characters in an input field:
EXAMPLE Start typing a name in the input field below: |
Example Explained
In the example above, when a user types a character in the input field, a function called "showHint()" is executed.
The function is triggered by the onkeyup event.
Here is the HTML code:
<html> <head><script> function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET", "gethint.php?q=" + str, true); xmlhttp.send(); } } </script> </head> <body> <p><b>Start typing a name in the input field below:</b></p> <form> First name: <input type="text" onkeyup="showHint(this.value)"> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html> |
Code explanation:
First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.
However, if the input field is not empty, do the following:
- Create an XMLHttpRequest object
- Create the function to be executed when the server response is ready
- Send the request off to a PHP file (gethint.php) on the server
- Notice that q parameter is added gethint.php?q="+str
- The str variable holds the content of the input field
The PHP File - "gethint.php"
The PHP file checks an array of names, and returns the corresponding name(s) to the browser:
<?php // Array with names$a[] = "Anna"; $a[] = "Brittany"; $a[] = "Cinderella"; $a[] = "Diana"; $a[] = "Eva"; $a[] = "Fiona"; $a[] = "Gunda"; $a[] = "Hege"; $a[] = "Inga"; $a[] = "Johanna"; $a[] = "Kitty"; $a[] = "Linda"; $a[] = "Nina"; $a[] = "Ophelia"; $a[] = "Petunia"; $a[] = "Amanda"; $a[] = "Raquel"; $a[] = "Cindy"; $a[] = "Doris"; $a[] = "Eve"; $a[] = "Evita"; $a[] = "Sunniva"; $a[] = "Tove"; $a[] = "Unni"; $a[] = "Violet"; $a[] = "Liza"; $a[] = "Elizabeth"; $a[] = "Ellen"; $a[] = "Wenche"; $a[] = "Vicky"; // get the q parameter from URL $q = $_REQUEST["q"]; $hint = ""; // lookup all hints from array if $q is different from "" if ($q !== "") { $q = strtolower($q); $len=strlen($q); foreach($a as $name) { if (stristr($q, substr($name, 0, $len))) { if ($hint === "") { $hint = $name; } else { $hint .= ", $name"; } } } } // Output "no suggestion" if no hint was found or output correct values echo $hint === "" ? "no suggestion" : $hint; ?> |
AJAX is used to create more interactive applications.
AJAX ASP Example
The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:
EXAMPLE Start typing a name in the input field below: |
Example Explained
In the example above, when a user types a character in the input field, a function called "showHint()" is executed.
The function is triggered by the onkeyup event.
Here is the HTML code:
<html> <head><script> function showHint(str) { if (str.length == 0) { document.getElementById("txtHint").innerHTML = ""; return; } else { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xmlhttp.open("GET", "gethint.asp?q=" + str, true); xmlhttp.send(); } } </script> </head> <body> <p><b>Start typing a name in the input field below:</b></p> <form> First name: <input type="text" onkeyup="showHint(this.value)"> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html> |
Code explanation:
First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.
However, if the input field is not empty, do the following:
- Create an XMLHttpRequest object
- Create the function to be executed when the server response is ready
- Send the request off to an ASP file (gethint.asp) on the server
- Notice that q parameter is added gethint.asp?q="+str
- The str variable holds the content of the input field
The ASP File - "gethint.asp"
The ASP file checks an array of names, and returns the corresponding name(s) to the browser:
<% response.expires=-1dim a(30) 'Fill up array with names a(1)="Anna" a(2)="Brittany" a(3)="Cinderella" a(4)="Diana" a(5)="Eva" a(6)="Fiona" a(7)="Gunda" a(8)="Hege" a(9)="Inga" a(10)="Johanna" a(11)="Kitty" a(12)="Linda" a(13)="Nina" a(14)="Ophelia" a(15)="Petunia" a(16)="Amanda" a(17)="Raquel" a(18)="Cindy" a(19)="Doris" a(20)="Eve" a(21)="Evita" a(22)="Sunniva" a(23)="Tove" a(24)="Unni" a(25)="Violet" a(26)="Liza" a(27)="Elizabeth" a(28)="Ellen" a(29)="Wenche" a(30)="Vicky" 'get the q parameter from URL q=ucase(request.querystring("q")) 'lookup all hints from array if length of q>0 if len(q)>0 then hint="" for i=1 to 30 if q=ucase(mid(a(i),1,len(q))) then if hint="" then hint=a(i) else hint=hint & " , " & a(i) end if end if next end if 'Output "no suggestion" if no hint were found 'or output the correct values if hint="" then response.write("no suggestion") else response.write(hint) end if %> |
AJAX can be used for interactive communication with a database.
AJAX Database Example
The following example will demonstrate how a web page can fetch information from a database with AJAX:
Customer info will be listed here.. |
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:
SHOW CUSTOMER
function showCustomer(str) { var xhttp;if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("txtHint").innerHTML = this.responseText; } }; xhttp.open("GET", "getcustomer.php?q="+str, true); xhttp.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 off to a file on the server
- Notice that a parameter (q) is added to the URL (with the content of the dropdown list
AJAX Server Page
The page on the server called by the JavaScript above is an PHP file called "getcustomer.php".
The source code in "getcustomer.php" runs a query against a database, and returns the result in an HTML table:
<?php $mysqli = new mysqli("servername", "username", "password", "dbname");if($mysqli->connect_error) { exit('Could not connect'); } $sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country FROM customers WHERE customerid = ?"; $stmt = $mysqli->prepare($sql); $stmt->bind_param("s", $_GET['q']); $stmt->execute(); $stmt->store_result(); $stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country); $stmt->fetch(); $stmt->close(); echo "<table>"; echo "<tr>"; echo "<th>CustomerID</th>"; echo "<td>" . $cid . "</td>"; echo "<th>CompanyName</th>"; echo "<td>" . $cname . "</td>"; echo "<th>ContactName</th>"; echo "<td>" . $name . "</td>"; echo "<th>Address</th>"; echo "<td>" . $adr . "</td>"; echo "<th>City</th>"; echo "<td>" . $city . "</td>"; echo "<th>PostalCode</th>"; echo "<td>" . $pcode . "</td>"; echo "<th>Country</th>"; echo "<td>" . $country . "</td>"; echo "</tr>"; echo "</table>"; ?> |
The XML Document Used
In this chapter we will use the XML file called "cd_catalog.xml".
Display XML Data in an HTML Table
This example loops through each <CD> element, and displays the values of the <ARTIST> and the <TITLE> elements in an HTML table:
<html> <head><style> table, th, td { border: 1px solid black; border-collapse:collapse; } th, td { padding: 5px; } </style> </head> <body> <button type="button" onclick="loadXMLDoc()">Get my CD collection</button> <br><br> <table id="demo"></table> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xmlhttp.open("GET", "cd_catalog.xml", true); xmlhttp.send(); } function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>Artist</th><th>Title</th></tr>"; var x = xmlDoc.getElementsByTagName("CD"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; } document.getElementById("demo").innerHTML = table; } </script> </body> </htm> |