jQuery Ajax 사용

jQuery Ajax 사용

Ajax는 서버와의 비동기 통신을 말한다. 일반적으로 Ajax하면 요즘은 자바스크립트를 이용한 브라우져의 동적 DOM의 처리, 즉 DHTML, CSS등을 포함하지만, jQuery에서는 Ajax라는 네임스페이스를 통해 비동기 서버 통신을 하는것을 말한다.

먼저 다음 간단한 예를 보자.

타입1

$.ajax({
    type: "GET",
    url: "test.js",
    dataType: "script"
})

 GET방식으로 서버에서 자바스크립트 (test.js)를 로딩하고 실행하는 코드이다.

 

타입2

$.ajax({
    type: "POST",
    url: "next.jsp",
    data: "name=John&location=Boston",
    success: function(msg){
        alert( "Data Saved: " + msg );
    }
});

서버로 부터 POST방식으로 파라메터(name, location등등)를 주어 데이터를 가져온 후 이를 success콜백을 이용해 처리하는 코드이다. 아마 Ajax에서 가장 많이 사용하는 코드일 것이다.

 

타입3

$.ajax({
    url: "test.html",
    cache: false,
    success: function(html){
        $("#results").append(html);
    }
});

cache 프라퍼티 - test.html 을 가장 최근에 수정된 페이지로 받겠다는 것이다. (캐쉬를 사용하지 않겠다는 의미)

html 을 받은후에 results라는 아이디를 가진 엘리먼트의 자식노드로써 추가하고있다. 쌩

dom api 로 표현하자면 document.getElementById("results").innerHTML = html; 이 될 것이다.

하지만 append는 "result 엘리먼트의 자식이 존재할 경우, 가장 마지막에 붙인다라는 의미로 사용되어 진다. 하지만 innerHTML의 경우에는 기존에 자식이 존재하던, 하지 않던 덮어씌어 버린다라는 차이가 있다.

 

타입4

var html = $.ajax({
    url: "some.php",
    async: false
}).responseText;

async(비동기) 프라퍼티 - "동기"로 요청 (기본 값은 비동기이다.) 

즉, some.php로 request를 날린후에 response가 오기전까지는 브라우저를 유저의 어떠한 인터렉션도 허용되지 않게 블락킹 시켜버리겠다는 의미이다.

위의 코드는 콜백함수인 success라는 프라퍼티 없다. 이 경우 var html = $.ajax().responseText; 와 같이 사용하였다.

어차피 서버로부터 response 가 오기전까지는 스크립트수행이 블락되어있으니까 저 코드가 가능한 것이다.

 

타입5

$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

JQuery Ajax 실행 시 에러가 발생하면 경고창을 띄워줄 수 있도록 설정

참조 : http://boast.tistory.com/105