jquery ajax 사용법

오늘은 jquery ajax에 대해서 알아보도록 하겠습니다.

 

ajax(아약스 아닙니다...축구광;;)은 Asynchronous Javascript and XML의 약자로 웹페이지가 서버와 비동기 통신을 하는 기술들의 집합체를 말합니다. 물론 동기통신도 가능합니다.

 

에이잭스에서 사용하는 기술

 * XHTML

 * Cascading Style Sheets

 * JavaScript - 동적인 출력과 상호작용

 * XmlHttpRequest - 웹서버와 통신을 담당하며 비동기적 데이터 교환에 사용

 * XML & JSON - 데이터 전송 형식의 종류

 * DOM

 

Ajax가 호출 되면 동작되는 원리

 

 

이미지 출처

 - https://webwox.wordpress.com/2011/08/30/asynchronous-javascript-and-xml-ajax-as-revolution/

 

 

기본함수

$.ajax({옵션속성:값});    //jQuery.ajax();

 

ex)

$(document).ready(function(){

$.ajax({

type : "POST",

url : "/호출할 주소",

dataType : "JSON",    //옵션이므로 JSON으로 받을게 아니면 안써도 됨

data : { id : "넘겨줄 id값", pw : "넘겨줄 pw값" },

success : function(result) {

//통신이 성공적으로 이루어졌을 때 처리하고 싶은 함수

},

complete : function(result){

//통신이 실패했어도 완료가 되었을 때 처리하고 싶은 함수

},

error : function(xhr, status, error) {

//에러가 발생했을 때 처리하고 싶은 함수

alert("error");    //경고창 띄움

}

});

});

 

사용에 앞서 html과 CSS, JavaScript에 대해서 공부해두면 다시 그리고 싶은 영역을 문제없이 그리는데 도움이 됩니다.

 

위에서 사용한 옵션외에도 자주 사용하는 옵션

async : 불리언 - 동기/비동기 설정이 있으며 굳이 써주지 않아도 됩니다.

 

간편형 함수

$.get(); - get방식으로 ajax를 실행

$.post(); - post방식으로 실행

$.getJSON(); - get방식 실행 후 JSON데이터를 가져옴

$.getScript(); - get방식 실행 후 Script데이터를 가져옴

$(select).load(); - 실행 후 선택자에 문자열을 추가

 

웹 상에서 사용하기 좋은 Jquery ajax외에도 jstl(jsp)도 있으나 사용되는 실행되는 것이 약간은 차이가 있습니다.

jstl은 페이지가 처음 로딩될 때 들고온 데이터를 뿌려줄 때 사용이 용이하며, ajax는 이미 페이지 전체가 로딩된 후 특정한 액션을 통해 데이터를 가져와 특정 부분만 페이지를 다시 그려줄 때 용이합니다.

 

다음 시간에는 jsp에서 사용되는 jstl에 대해서 공부해 보도록 하겠습니다.