Cross Domain XML using JQuery

Ok, I’m sure by now many have tried to ask this question in forum and stackoverflow.

“How do you parse a cross domain xml, using jquery ajax?”

Many would have answered try “jsonp”, which is a json like cross domain solution then, later you tried it and the xml returned is giving you an error of illegal token.  Why? This is because, jsonp is only meant to process and parse incoming json data. It cannot be used to parse xml especially cross domain ones (It cant process the “<” and “>” from xml) .

To do this, there’s 2 solutions

  • You can use backend script to act as a proxy to do parse the crossdomain xml and your ajax to retrieve it’s json in return.
  • Use some kind of proxy script involving google api and yahoo’s YQL
In this tutorial I’m gonna show about how do we use a proxy script using yahoo’s YQL. Which means, we are using yahoo YQL to parse the xml and returns a json data format to your ajax call.
To start this, you will need the followings

In this sample tutorial, we are going to make use of some o’Reilly xml sample which is located in a “different domain” here.

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
<library>
  <book id="b0836217462" available="true">
   <isbn>0836217462</isbn>
   <title lang="en">Being a Dog Is a Full-Time Job</title>
   <author id="CMS">
      <name>Charles M Schulz</name>
      <born>1922-11-26</born>
      <dead>2000-02-12</dead>
   </author>
   <character id="PP">
       <name>Peppermint Patty</name>
       <born>1966-08-22</born>
       <qualification>bold, brash and tomboyish</qualification>
   </character>
   <character id="Snoopy">
       <name>Snoopy</name>
       <born>1950-10-04</born>
       <qualification>extroverted beagle</qualification>
   </character>
   <character id="Schroeder">
       <name>Schroeder</name>
       <born>1951-05-30</born>
       <qualification>brought classical music to the Peanuts strip</qualification>
   </character>
   <character id="Lucy">
       <name>Lucy</name>
       <born>1952-03-03</born>
       <qualification>bossy, crabby and selfish</qualification>
   </character>
  </book>
</library>

You will also need to learn a little bit on how YQL works here

Combined YQL to parse the xml then, use the plugin jquery.xdomainajax.js, then followed by xml2json to convert them into objects

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
<!DOCTYPE html>
<html>
	<head> 
 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
	<script src="xml2json.js"></script>
	<script src="jquery.xdomainajax.js"></script>
	<script>
		// For This example, im going to use sample xml from o'reily for practice
		// located at url http://examples.oreilly.com/9780596002527/examples/first.xml
		// We are going to extract character name nodes for this sample
		function xmlLoader(){
			$.ajax({
			    url: 'http://examples.oreilly.com/9780596002527/examples/first.xml',
			    dataType: "xml",
			    type: 'GET',
			    success: function(res) {
					var myXML = res.responseText;
					// This is the part xml2Json comes in.
					var JSONConvertedXML = $.xml2json(myXML);
					$('#myXMLList').empty();
					for(var i = 0; i < JSONConvertedXML.book.character.length; i++){
						$('#myXMLList').append('<li><a href="#">'+JSONConvertedXML.book.character[i].name+'</a></li>');
					}
					$('#myXMLList').listview('refresh');
					$.mobile.hidePageLoadingMsg();
			    }
			});
		}
 
		$( document ).delegate("#home", "pageshow", function() {
			$.mobile.showPageLoadingMsg();
		  	xmlLoader();
		});
	</script>
</head> 
 
<body> 
<div data-role="page" id="home">
<div data-role="header">
        <h1>Sample Cross Domain XML</h1>
</div>
<div data-role="content">
        <ul data-role="listview" data-theme="c" id="myXMLList">
</ul>
</div>
<div data-role="footer">
	<a href="www.isgoodstuff.com" data-role="button">isGoodStuff.com</a>
</div>
</div>
</body>
</html>

That’s it for today. If you want the sample source code.

JQM Cross XML (4053 downloads)

 

Comments

comments