Where The Streets Have No Name

jquery에서 xml데이터 처리 본문

Developement/Web

jquery에서 xml데이터 처리

highheat 2008. 4. 10. 17:50
참고 : http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html

test4_ds.php

<?php
$group = $_GET[group];
header("Content-type: text/xml;charset=utf-8");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";

switch($group)
{
    case 1:
        $xml="<members>
                <member>
                    <name>¶µ¹½ºŸ</name>
                    <company>wecon</company>
                    <telnum>010-2238-0321</telnum>
                </member>
                <member>
                    <name>mira</name>
                    <company>wecon2</company>
                    <telnum>010-2222-2333</telnum>
                    </member>
                <member>
                    <name>mira</name>
                    <company>wecon2</company>
                    <telnum>010-2222-2333</telnum>
                </member>
            </members>";
        break;


    case 2:
        $xml="<members>
                <member>
                    <name>mikoung</name>
                    <company>uranos</company>
                    <telnum>010-233-3333</telnum>
                </member>
                <member>
                    <name>uram</name>
                    <company>uranos2</company>
                    <telnum>010-1111-2323</telnum>
                    </member>
                <member>
                    <name>deokgon</name>
                    <company>uranos3</company>
                    <telnum>010-234-9999</telnum>
                </member>
            </members>";

        break;

    default:

        break;
}

echo iconv("CP949","UTF-8", $xml);
?>

xmldata.html

<html>
  <head>
     <script type="text/javascript" src="../../lib/jquery.js"></script>    
     <script type="text/javascript">
            $(document).ready(function(){
          
                $("#msg").ajaxError(function(event, request, settings){
                   $(this).append("<li>Error requesting page : " + settings.url + "</li>");
                 });
                                 
                 $("#msg").ajaxStart(function(){                       
                   $(this).empty();                  
                   $("#xmldata").empty();                   
                 });
                
                 //에러여부에 상관없이 작업요청후 끝난후 실행
                 $("#msg").ajaxStop(function(){
                     var now = new Date(); // 현재시간 가져오기                            
                     var stopTime = now.toLocaleString()+':'+now.getMilliseconds()+'ms';
                     $(this).append("stop : "+stopTime);                  
                 });
                
                
                //data call               
                $('#btn1').click(function() {                                   
                   
                    $.ajax({                       
                       type: "GET",
                       url: "xmldata.xml",
                       data: null,                       
                       success: function(xml){
                           alert(xml);
                       },   
                       error: function(){
                           alert('error...');
                       }
                    });
                });
               
                $('#btn2').click(function() {                                   
                   
                    $.ajax({                       
                       type: "GET",
                       url: "http://*****.com/shop/test/test4_ds.php?group=1",
                       data: null,
                       dataType: "xml",                       
                       success: function(xml){                          
                            $('#xmldata').html('<div>total count : '+$(xml).find("member").length+'</div>');
                                                       
                            $(xml).find("member").each(function(index){
                                    //alert($(this).find("name").text());                           
                                    $('#xmldata').append('<div>'+$(this).find("name").text()+'</div>');
                                    $('#xmldata').append('<div>'+$(this).find("company").text()+'</div>');
                                    $('#xmldata').append('<div>'+$(this).find("telnum").text()+'</div>');                           
                            });
                       },   
                       error: function(){
                           alert('error...');
                       }
                    });
                });
                             

            });       

     </script>
   </head>
  <body>     
      <div id="msg"></div>
    <br>
    <input type="button" id="btn1" value="call xmldata">   
    <input type="button" id="btn2" value="call xmldata(remote)">   
    <br>
    <div id="xmldata">
            <div id="totalcount"></div>
    </div>      
  </body>
</html>