JavaScript

Loading and parsing XML from JavaScript using AJAX calls

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.

?View Code JAVASCRIPT
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.

  • Share/Bookmark

Tags: , , , , ,

Saturday, September 12th, 2009 AJAX, JavaScript, Tutorials No Comments

JavaScript Confirmation Box

JavaScript can display a nice confirmation box that will allow your script to test user’s choice when necessary.

The JavaScript “confirm” result is of type boolean. The following example should clear things for you:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10

var yesorno = confirm("Do you like PHP?");
 
if( yesorno )
{
    alert("You like PHP, great...");
}
else
{
    alert("Don't like it? Nobody cares anyway.");
}
  • Share/Bookmark

Tags: , , ,

Tuesday, May 13th, 2008 JavaScript No Comments

Categories