jQuery - AJAX

* jQuery - AJAX 

  jQuery를 사용하는 중요한 이유중 하나가 AJAX를 간편히 구현할수 있기 때문
  AJAX를 브라우저 호환성 고민하지 않고 구현할수 있기 때문
 
  실제 JavaScript 만으로 AJAX를 구현할경우, 브라우저 특성별 코드들을 만드는등 복잡한 과정 많음.
  jQuery는 이를 간편화 하였다.

 * load() 함수
  $(selector).load(URL, data, callback);
 
  서버로부터 데이터를 읽어와서 select된 element 에 넣음
 
 * URL:  request 할 url
  data :  쿼리스트링에 해당하는 데이터  (key-value 쌍으로 이루어짐)
  callback : load() 완료후 수행할 함수

 * Same Origin Policy (동일 출처 정책)
  어떤 출처에서 불러온 문서나 스크립트가 

  다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식
  참조 : https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

 Chrome은 위 Same Origin Policy 정책을 지키므로
  예제를 실행할 경우 동작 안함. -> CORS 에러 (console 창에서 확인 가능)
  교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)
  AJAX request 와 같이 추가적인 HTTP request 발생시
  실행 중인 웹이 다른 출처의 자원에 접근할수 있도록 브라우저에 알려줌.
  response 하는 서버에서 response 헤더에  Access-Control-Allow-Origin 헤더가 있으면 가능.

  참조 : https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
  
 ※ IE 및 이클립스 내장 브라우저에서는 동일출처정책을 까다롭게 적용안하므로 문제 없이 예제 동작함.

---

 

$(document).ready(function(){
 // ※ 우선 아래 url 의 내용을 확인해보자
var url = "https://www.w3schools.com/jquery/demo_test.txt";  

// 예제를 위해서 서버에서 돌려야 한다  ( request 이기 때문)
    $("#btn01").click(function(){
    
    });

// jQuery selector 를 붙이는 것도 가능!
    $("#btn02").click(function(){
            // "https://www.w3schools.com/jquery/demo_test.txt #p1"
    });

    callback 함수는 3개의 parameter 받는다
    responseTxt : AJAX request 성공하면 받은 내용
    statusTxt : AJAX request status 내용
    xhr : XMLHttpRequest object

    $("#btn03").click(function(){
        $("#div1").load(url, 
         function(responseTxt, statusTxt, xhr){
            if(statusTxt == "success")
                alert("성공\n" + xhr.status + "\n" + xhr.statusText);
            if(statusTxt == "error")
                alert("에러\n" + xhr.status + "\n" + xhr.statusText);
        });     
    });
});

---

■서울시 지하철 역사마스터 정보
http://data.seoul.go.kr/dataList/OA-21232/S/1/datasetView.do

샘플url

XML 버전
http://openapi.seoul.go.kr:8088/(인증키)/xml/subwayStationMaster/1/5/
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/xml/subwayStationMaster/1/5/


JSON 버전
http://openapi.seoul.go.kr:8088/(인증키)/json/subwayStationMaster/1/5/
예] http://openapi.seoul.go.kr:8088/4d46796d7366726f3833774a774955/json/subwayStationMaster/1/5/

 

---

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

<script>
var api_key = "인증키 값";

$(document).ready(function(){
     $("#btn_load").click(function(){
     // 입력정보 가져오기
         var start = $('#start').val();
         var end = $('#end').val();

// XML
     var url = `http://openapi.seoul.go.kr:8088/${api_key}/xml/subwayStationMaster/${start}/${end}/`

     $.ajax({
         url :  url,
         type : "GET",
         cache : false,
         success : function(data, status){
         if(status == "success") parseXML(data);
     }
});

// JSON
var url = `http://openapi.seoul.go.kr:8088/${api_key}/json/subwayStationMaster/${start}/${end}/`
 
     $.ajax({
         url :  url,
         type : "GET",
         cache : false,
         success : function(data, status){
         if(status == "success") parseJSON(data);
          }
      });
 });
 
      $("#btn_remove").click(function(){
      $("#demoXML").empty();
      $("#demoJSON").empty();
     });
});


function parseXML(xmlDOM) {
         var table="<tr><th>역명</th><th>아이디</th><th>호선</th><th>위도</th><th>경도</th></tr>";
  
  $(xmlDOM).find("row").each(function(){   
         table += "<tr>";
         table += "<td>" + $(this).find("STATN_NM").text() + "</td>";
         table += "<td>" + $(this).find("STATN_ID").text() + "</td>";
         table += "<td>" + $(this).find("ROUTE").text() + "</td>";
         table += "<td>" + $(this).find("CRDNT_X").text() + "</td>";
         table += "<td>" + $(this).find("CRDNT_Y").text() + "</td>";
         table += "</tr>";
       });
  $("#demoXML").html(table);
  
}

function parseJSON(jsonObj){
         var row = jsonObj.subwayStationMaster.row;

var table="<tr><th>역명</th><th>아이디</th><th>호선</th><th>위도</th><th>경도</th></tr>";
for (i = 0; i < row.length; i++) { 
        table += "<tr>";
        table += "<td>" + row[i].STATN_NM + "</td>";
        table += "<td>" + row[i].STATN_ID + "</td>";
        table += "<td>" + row[i].ROUTE + "</td>";
        table += "<td>" + row[i].CRDNT_X + "</td>";
        table += "<td>" + row[i].CRDNT_Y + "</td>";
        table += "</tr>";
     } // end for
          $("#demoJSON").html(table);
}
</script>