Hier eine kleine von mir gebastelte AJAX Klasse(anleihen von MDC.com). Sie erzeugt einen Query(HTTP GET <url>), returnt das result als javascript-Objekt(assoziativer 2d-Array) und übergibt dies einer vom Entwickler festgelegten Funktion namens doStuff(data):
/** (c) 2010 Arne "w13531" Wenzel [ mailto: w13531 (at) terrorhippiecrew (dot) net ] **/
function makeRequest(url) {
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function() { alertContents(httpRequest); };
httpRequest.open('GET', url, true);
httpRequest.send('');
}
function alertContents(httpRequest) {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var Data = createObject(httpRequest.responseXML);
doStuff(Data);
} else {
alert('There was a problem with the request.');
}
} else {
dontdoStuff();
}
}
function createObject(xmldoc) {
var root = xmldoc.getElementsByTagName('set');
var xObject = new Array();
//durchlaufe vertikal
for (var iNode = 0; iNode < root.length; iNode++) {
var node = root.item(iNode);
var xData = new Array();
//durchlaufe horizontal
for (var iSub = 0;iSub < node.childNodes.length; iSub++) {
var xelement = node.childNodes.item(iSub);
var xe_name = xelement.nodeName;
var xe_value;
//kein wert??
if(xelement.hasChildNodes() == false) {
xe_value = ' ';
} else {
xe_value = xelement.firstChild.data;
}
//zeilen
xData[xe_name] = xe_value;
}
//spalten(mit zeilen)
xObject.push(xData);
}
//gebe den 2d assoziativen array zurück
return xObject;
}
Ok die Funktion doStuff() hat jetzt die Daten, Aber was damit tun??
Hier erstellen wir zB eine HTML Table(oder einen Ladescreen fals die Daten noch auf sich warten lassen):
/** (c) 2010 Arne "w13531" Wenzel [ mailto: w13531 (at) terrorhippiecrew (dot) net ] **/
function doStuff(Data) {
createHTMLTable(Data);
}
function dontdoStuff() {
createHTMLLoading();
}
function createHTMLTable(xObject) {
for (var g = 0;g < xObject.length; g++) {
add_row('page_table',xObject[g]);
}
}
function add_row(tablename ,arr) {
var tbl = document.getElementById(tablename);
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
cell0.innerHTML = arr["xml_tag_name"];
cell1.innerHTML = arr["xml_tag_name"];
cell2.innerHTML = arr["xml_tag_name"];
cell3.innerHTML = arr["xml_tag_name"];
cell4.innerHTML = arr["xml_tag_name"];
}
Und schon hat man einen simplen AJAX-Request ausgeführt.