AJAX Example Explained
The example above contains a simple HTML form and a link to a JavaScript:
| <html> <head> <script src="selectcustomer.js"></script> </head><body><form> Select a Customer: <select name="customers" onchange="showCustomer(this.value)"> <option value="ALFKI">Alfreds Futterkiste <option value="NORTS ">North/South <option value="WOLZA">Wolski Zajazd </select> </form><p> <div id="txtHint"><b>Customer info will be listed here.</b></div> </p></body> </html> |
As you can see it is just a simple HTML form with a drop down box called "customers".
The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.
When the user selects data, a function called "showCustomer()" is executed. The execution of the function is triggered by the "onchange" event. In other words: Each time the user change the value in the drop down box, the function showCustomer is called.
The JavaScript code is listed below.
The AJAX JavaScript
This is the JavaScript code stored in the file "selectcustomer.js":
| var xmlHttp function showCustomer(str) { var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str xmlHttp=GetXmlHttpObject(stateChanged) xmlHttp.open("GET", url , true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject(handler) { var objXmlHttp=null if (navigator.userAgent.indexOf("Opera")>=0) { alert("This example doesn't work in Opera") return } if (navigator.userAgent.indexOf("MSIE")>=0) { var strName="Msxml2.XMLHTTP" if (navigator.appVersion.indexOf("MSIE 5.5")>=0) { strName="Microsoft.XMLHTTP" } try { objXmlHttp=new ActiveXObject(strName) objXmlHttp.onreadystatechange=handler return objXmlHttp } catch(e) { alert("Error. Scripting for ActiveX might be disabled") return } } if (navigator.userAgent.indexOf("Mozilla")>=0) { objXmlHttp=new XMLHttpRequest() objXmlHttp.onload=handler objXmlHttp.onerror=handler return objXmlHttp } } |
The AJAX Server Page
The server paged called by the JavaScript, is a simple ASP file called "getcustomer.asp".
The page is written in VBScript for an Internet Information Server (IIS). It could easily be rewritten in PHP, or some other server language.
The code runs an SQL against a database and returns the result as an HTML table:
| 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("/db/northwind.mdb")) set rs = Server.CreateObject("ADODB.recordset") rs.Open sql, conn response.write("<table>") do until rs.EOF for each 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>") |
