관리 메뉴

moozi

ajax01.html 본문

TIS_2016/HTML5_3기

ajax01.html

moozi 2016. 8. 8. 12:07

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Ajax</title>

    <script>

        function createRequest(){

            var request;

            try{

                request=new XMLHttpRequest();

            }

            catch(exception){

                //IE6.0이하 처리.

                try{

                    request=new ActiveXObject('Msxml2.XMLHTTP');

                }catch(innerException){

                    request=new ActiveXObject('Microsoft.XMLHTTP');

                }

            }

            

            return request;

        }

        

       // function ajax(){

            var request=createRequest();//ajax처리객체

            

            request.onreadystatechange=function(event){

                if(request.readyState==4){

                    if(request.status==200){                       var xml=request.responseXML;//xml을 받음

                                            

                      var names=xml.getElementsByTagName("name");

                     var prices=xml.getElementsByTagName("price");

                     for(var i=0;i<names.length;i++){

                         var name=names[i].childNodes[0].nodeValue;

                         var price=prices[i].childNodes[0].nodeValue;

                         document.body.innerHTML+="<h1>"+name+"</h1>";

                         document.body.innerHTML+="<h1>"+price+"</h1>"

                     }                        

                    }

                }

            }

            

            request.open("GET","data.xml",true);//연결

            request.send();//요청

            //alert(request.responseText);//응답

            

      //  }

        

    </script>

</head>

<body>

    

</body>

</html>

'TIS_2016 > HTML5_3기' 카테고리의 다른 글

ajax연습문제01  (0) 2016.08.08
ajax02.html  (0) 2016.08.08
map.html - 마커아이콘변경, 마커클릭시 infowindow띄우기  (0) 2016.08.05
jQueryMobile연습문제02  (0) 2016.08.05
slider.html  (0) 2016.08.05
Comments