JQuery 학습 03 - ajax 를 이용한 XML 데이터 접근

 

제이쿼리 플러그인을 사용하여 탭을 만들수 있음 - 나중에 따로 설명

 

find() 를 이용해 선택자를 선택하고 찾을 수 있음

$(xml).find("runner").each(function(){   }); 이런 식으로 사용 가능

- xml에 runner 태그들을 찾고 each 로 runner 태그들을 하나씩 가져와 다룰 수 있음

$.ajax() 를 통해 데이터를 가져올 수 있음

url : 불러올 파일 경로 , cache : 변수 결과를 컴퓨터에 캐시한다

 

data :  서버로 데이터를 전송할 때 이 옵션을 사용한다.

 

dataType : 서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 

xml, json, script, html 이다. 형식을 지정하지않으면 JQuery 가 알아서 판단한다.

 

success : 성공 했을때 호출할 콜백을 지정한다.

 

error : 에러가 발생 했을 때, 호출할 콜백을 지정한다.

 

type : 데이터를 전송하는 방법을 지정한다. get, post 를 사용할 수 있다.

  $.ajax({
        url: "finishers.xml",
        cache: false,
        dataType: "xml",
        success: function(xml){
        }
        error: function(){
        }
 });

setTimeout(함수, 밀리초) : 밀리초가 지나면 함수 실행

setInterval(함수, 밀리초) : 함수를 실행하고 밀리초 대기 후 또 실행

보통 반복 실행할 때 setInterval 을 사용하지만, 외부 자원(xml등)에 의존성이 있을 때는 문제가 생길 수 있다.

ㄴ 사용자가 입력하길 기다리는 상황에서 준비 되지도 않은 함수를 호출할 가능성이 있음

setTimeout(function(){
    $('header').append('<p style="color:white"> XML 을 불러옵니다. </P>')
    getXMLRacers(FREQ);
    startAJAXcalls();
}, 1000);

jquery ajax 단축 메서드 : get, getJSON, getScript, post, load

.load() : 특정 데이터를 특정 요소 안으로 불러올때 사용한다.

.ajax() : 다양한 정보를 가져오고 서버에 데이터를 보내서 처리할 수 있다.