제이쿼리(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"이라고 입려간다.
$.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액세스를 할 때 인증이 필요할 경우 사용자 이름을 지정한다. |
또한 비동기 통신 방식으로 데이터를 전송하거나 요청하려면 데이터를 가공해야 한다.
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"}) | 객체를 문자열 데이터로 가공하여 반환한다. |
'언어공부 > JavaScript&jQuery' 카테고리의 다른 글
제이쿼리(jQuery) 기초 문법 - Ajax($.get())로 XML 데이터 바인딩 (0) | 2021.08.13 |
---|---|
제이쿼리(jQuery) 기초 문법 - Ajax($.getJSON())로 JSON 데이터 바인딩 (0) | 2021.08.12 |
제이쿼리(jQuery) 기초 문법 - Ajax 관련 메소드 (1) (0) | 2021.08.10 |
제이쿼리(jQuery) 기초 문법 - 제이쿼리 비동기 방식 연동 (AJAX) (0) | 2021.08.09 |
제이쿼리(jQuery) 기초 문법 - 애니메이션 메소드 및 효과 (0) | 2021.08.08 |