본문 바로가기
Story/Jquery

Cross Domain XML using JQuery 크로스도메인에서 jquey 로 xml 사용하기

Stdio 2015. 2. 5. 15:46
반응형

jquery 로 xml rss 등을 파싱해서 사용하는건 많이 있지만 외부사이트에 xml 이나 rss 사용시 문제가 발생한다.

이 문제에 대해 검색하던 중 좋은 자료가 있어 남겨놓는다.

 

http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/

 

“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.

Download Here

 

 

crossxml.zip

 

이 사이트에 내용을 참고해서 잘 정리해 놓은 사이트도 있다.

 

 

http://blog.naver.com/PostView.nhn?blogId=kkforgg&logNo=60174424616

반응형
저작자표시 비영리 변경금지

'Story > Jquery' 카테고리의 다른 글

jQuery Selectbox plugin  (0) 2015.03.10
반응형 또는 모바일 페이지에 이미지맵(image map) 사용하기  (0) 2015.02.26
jquery json 사용시 공백문제  (0) 2014.10.06
Jquery fancybox 사용시 iframe type 에서 post 로 값 넘기기  (0) 2014.08.20
jQuery Timer  (0) 2014.06.19

'Story/Jquery' Related Articles

티스토리툴바