Just the other day I was building a small in-place application/page and I needed to load some XML data using AJAX.
I’ll just post here the code as I believe a good example is better than a week of training.
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | //---- this function is a wrapper for XMLHttpRequest and is not mine (although I use it for years) function XHConn() { var xmlhttp, bComplete = false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp = false; }}} if (!xmlhttp) return null; this.connect = function(sURL, sMethod, sVars, fnDone) { if (!xmlhttp) return false; bComplete = false; sMethod = sMethod.toUpperCase(); try { if (sMethod == "GET") { xmlhttp.open(sMethod, sURL+"?"+sVars, true); sVars = ""; } else { xmlhttp.open(sMethod, sURL, true); xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && !bComplete) { bComplete = true; fnDone(xmlhttp); } }; xmlhttp.send(sVars); } catch(z) { return false; } return true; }; return this; } //---- we make a call to load categories.xml file found in the same folder as the current page //---- and we forward the response to be processed by a callback function called "procGetCategories" function getCategories() { var ajaxConn = new XHConn(); sParams = ""; ajaxConn.connect("http://"+window.location.hostname+"/categories.xml", "GET", sParams, procGetCategories); } function procGetCategories(objReturn) { xmlDoc = null; try //Internet Explorer { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(objReturn.responseText); } catch(e) // all the others (Opera I'm not sure though .... never tested this on Opera) { parser = new DOMParser(); xmlDoc=parser.parseFromString(objReturn.responseText,"text/xml"); } var root = xmlDoc.childNodes[0]; var catName; var catId; var x=root.childNodes; //---- categories node in my case for (i=0;i<x.length;i++) { if (x[i].nodeType==1) { catId = x[i].childNodes[0].childNodes[0].nodeValue; catName = x[i].childNodes[1].childNodes[0].nodeValue; //---- here you can do whatever you want with the received data. I chosed to create some buttons using "createCategButton" function createCategButton(catId, catName); } } } |
The code is quite simple and clear.
Beware though, there is a size limit when it comes to the receiving data length (around 4000 characters) so either split the data in multiple files or manage the data on the JavaScript side.
Happy coding to all of you.