제이쿼리(jQuery) 기초 문법 - Ajax 관련 메소드 (2)

제이쿼리(jQuery) 기초 문법 

Ajax 관련 메소드

Ajax(Asynchronous JavaScript and XML)는 클라이언트(사용자 컴퓨터)가 비동기 방식으로 자바 스크립트를 이용하여 화면 전환 없이 서버(서비스를 제공하는 컴퓨터)측에 자료(XML, JSON(JavaScript Object Notation), 텍스트, HTML)를 요청할 때 사용한다. Ajax 관련 메소드는 모두 Ajax 기술을 기반으로 제작된 자료 요청 메소드이다.

 

$.ajax() 메소드

$.ajax() 메소드는 사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러온다. 이 때 불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 형식 등이 있고. 선택한 요소에 Ajax를 이용해 요청한 외부 데이터를 불러온다. 

 

<script>
$.ajax({
	url:"전송 페이지"(action url),
	type:"전송 방식"(get, post 방식),
    data:"전송할 데이터",
    dataType:"요청한 데이터 형식"("html","xml","json","text","jsonp"),
    success:function(data){
    	전송에 성공하면 실행될 코드;
    },
    
    error: function(){
    	전송에 실패하면 실행될 코드;
    }
    
});
</script>

 

중괄호 내에 다양한 옵션을 입력할 수 있으며 옵션은 속성과 값으로 이루어진다. url에는 데이터 전송 및 요청할 외부 주소를 입력하며, type에는 전송방식을 입력한다. data에는 전송할 데이터를 입력하며, dataType은 서버로부터 받아올 데이터 형식을 지정한다. 데이터가 HTML일 경우에는 "html"이라고 입려간다. 

 

위의 실습에서 load()메소드가 아닌 ajax()메소드를 사용

 

 

메뉴보기를 누르면 각 ajax()가 실행된다.

 

$.ajax() 메소드의 옵션 종류

종류	설명
async	통신을 동기 또는 비동기 방식으로 설정하는 옵션이다. 기본값은 비동기 통신 방식인 true로 설정되어 있다. 만일 비동기 방식으로 설정되어 있다면 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업을 할 수 있다.
beforeSend	요청하기 전에 함수를 실행하는 이벤트 핸들러이다.
cache	요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설정한다. 기본값은 true이다.
complete	Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러이다.
contentType	서버로 전송할 데이터의 content-type을 설정한다. 기본값은 application/x-www-form-ur-lencoded이다.
data	서버로 전송할 데이터를 지정한다.
dataType	서버에서 받아올 데이터의 형식을 지정한다. 생략하면 요청한 자료에 맞게 자동으로 형식이 설정된다.
error	통신에 문제가 발생했을 때 함수를 실행한다.
success	Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행한다.
timeout	통신시간을 제한한다. 시간 단위는 밀리초이다.
type	데이터를 전송할 방식(get/post)을 설정한다.
url	데이터를 전송할 페이지를 설정한다. 기본값은 현재 페이지이다.
username	HTTP액세스를 할 때 인증이 필요할 경우 사용자 이름을 지정한다.

또한 비동기 통신 방식으로 데이터를 전송하거나 요청하려면 데이터를 가공해야 한다. 

 

 

result.jsp

 

이름을 입력하고 전송을 누르면 아래 문구가 생긴다.

 

Ajax 전송 데이터 가공 메소드의 종류

비동기 통신 방식으로 데이터를 전송하거나 요청할 때 사용하는 Ajax 전송 데이터 가공 메소드이다.

종류	사용법	설명
serialize()	$("form").serialize();	사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 'name1=value1 & name2=value2, ... '와 같은 쿼리스트링 형식의 데이터로 변환해 반환한다.
serializeArray()	$("form").serializeArray();	사용자가 입력요소에 값을 입력한 데이터의 전송 방식을 [{name1:value1},{name2:value2}]와 같은 배열 객체로 변환해 반환한다.
$.param()	$.param(Object);	{name1 : value1, name2 : value2}와 같이 작성된 객체를 가공해 'name1=value1 & name2=value2, ... '와 같은 쿼리스트링 형식의 데이터로 변환해 반환한다.
JSON.parse()	JSON.parse('{"name":"value"}');	객체 형태로 작성한 문자열 데이터를 객체로 가공하여 반환한다. (입력하는 자료형이 객체형태일뿐, 문자열의 데이터를 입력하여 객체를 반환한다.)
JSON.stringify()	JSON.stringify({"name1":"value1","name2":'value2"})	객체를 문자열 데이터로 가공하여 반환한다.