I’m teaching myself “ajax” here is how to create the basic xmlhttprequest object, interact with a server-side scripting language such as php, and display the returned xml to the page (in this case a series of html form text boxes).
XMLHttpRequest
1 2 3 4 5 6 7 8 9 10 | // script tag here var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); // sets object for non-IE browsers } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); // sets object for IE } |
A function that calls a server side script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | function getCustomer() { // set your variables var txt = document.getElementById("msgID"); var frm = document.orderFrm; var lName = frm.lastname.value; var fName = frm.firstname.value; var phone = frm.phone.value; var zip = frm.zip.value; var city = frm.city.value; var url = "/path/to/get/file" + "&lname=" + lName + "&fname=" + fName + "&zip=" + zip + "&city=" + city; if(XMLHttpRequestObject) { XMLHttpRequestObject.open("GET", url, true); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { try { var xmlDocument = XMLHttpRequestObject.responseXML; if(xmlDocument.getElementsByTagName("id")[0].firstChild.data == 0) { txt.innerHTML = "Multiple Found, try again using a first name and phone #"; return; } frm.customerid.value = xmlDocument.getElementsByTagName("id")[0].firstChild.data; frm.firstname.value = xmlDocument.getElementsByTagName("fname")[0].firstChild.data; frm.lastname.value = xmlDocument.getElementsByTagName("lname")[0].firstChild.data; frm.address1.value = xmlDocument.getElementsByTagName("addr")[0].firstChild.data; frm.city.value = xmlDocument.getElementsByTagName("city")[0].firstChild.data; frm.state.value = xmlDocument.getElementsByTagName("state")[0].firstChild.data; frm.zip.value = xmlDocument.getElementsByTagName("zip")[0].firstChild.data; frm.country.value = xmlDocument.getElementsByTagName("country")[0].firstChild.data; frm.phone.value = xmlDocument.getElementsByTagName("phone")[0].firstChild.data; txt.innerHTML = ""; } catch(err) { txt.innerHTML = "Customer not found"; } } } XMLHttpRequestObject.send(null); } } // close script tag here |
The getCustomer function can be called onclick via a button. The browser will then do an HTTP GET to the page stored in the url variable. The server side script should be able to pass these GETs into the function, perform a query, and return the results in xml format. I’ve set this up so the page the javascript calls does not actually perform the query. It’s a php page that is not accessible via HTTP. Instead the page includes that page, checks if a valid session exists, and makes sure the referring page is the front-end page for security. The php will look something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | while($row = mysql_fetch_array($customer))
{
echo '<?xml version="1.0"?>'
.'<customer>'
.'<id>'.$row[D].'</id>'
.'<fname>'.$row[firstName].'</fname>'
.'<lname>'.$row[lastName].'</lname>'
.'<addr>'.$row[address].'</addr>'
.'<city>'.$row[city].'</city>'
.'<state>'.$row[state].'</state>'
.'<zip>'.$row[zip].'</zip>'
.'<country>'.$row[country].'</country>'
.'<phone>'.$row[phone].'</phone>'
.'</customer>';
return;
} |
Not sure if this is the most secure way to do this, but it’s the best I could come up with in a few minutes on my first crack at ajax. Any suggestions or criticism are welcomed.
Related posts: