Ajax 관련 메서드

728x90

728x170

* Ajax 관련 메서드들

- Ajax(Asynchronous JavaScript and XML)는 클라이언트(방문자 컴퓨터)가 비동기 방식으로 자바스크립트를 이용하여 환면 전환 없이 서버(서비스 제공 컴퓨터) 층에 자료(XML, (X)HTML, JSON, 텍스트 유형 등)를 요청할 때 사용함.

- Ajax 관련 메서드의 종류

종류	풀이
load()	외부 콘텐츠를 가져올 때 사용함.
$.ajax()	데이터를 서버에 HTTP, POST, GET 방식으로 전송이 가능하며, (X)HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드. 이 표에서 $.post(), $.get(), $.getJSON() 메서드의 기능을 하나로 합쳐 놓은 것이라고 보면 됨.
$.post()	데이터를 서버에 HTTP POST 방식으로 전송한 후 서버 측의 응답을 받을 때 사용.
$.get()	데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측에 응답요청 받을 때 사용.
$.getJSON()	데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측 응답을 JSON 형식으로 받을 때 사용.
$.getScript()	Ajax를 이용하여 외부 자바스크립트를 불러옴. 예) $("button").click(function(){ $.getScript("demo_ajax_script.js"); {);
.ajaxStop(function(){...})	비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수의 실행문이 수행됨.
.ajaxSuccess(function(){...})	ajax 요청이 성공적으로 완료되면 함수의 실행문을 수행함.
serialize()	방문자가 입력 요소에 값을 입력하고 전송하였을 때, 데이터 전송 방식인 'name1=value & name2=value2..." 쿼리 스트링 형식의 데이터로 변환하여 액션 페이지에 전송함.
serializeArray()	방문자가 입력 요소에 값을 입력하고 전송하였을 때, 전송 방식인 key1:value1, key2:value2... JSON 데이터로 변환하여 액션 페이지에 전송.
ajaxComplete(function(){...})	Ajax 통신이 완료되면 함수의 실행문을 실행함.

(1) load() 메서드

- 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용.

- 요청한 콘텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있음.

- 기본형

$(요소 선택).load(url, data, 콜백 함수)

-> URL 주소에는 외부 콘텐츠를 요청할 외부 주소를 입력함.

-> 데이터(data)에는 전송할 데이터를 입력함.

-> 전송할 데이터와 콜백 함수 입력은 생략할 수 있음.

(2) .ajax() 메서드

- 사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러옴.

- 이때 불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 유형 등이 있음.

- 선택한 요소에 Ajax를 이용해 요청한 외부 데이터를 불러올 수 있음.

- 기본형

$.ajax({

url: "전송 페이지"(액션 페이지),

type: "전송 방식"(get, post 방식),

data: "전송할 데이터",

dataType: "요청한 데이터 타입" ("html", "xml", "json", "text", "jsonp"),

success: function(result){

전송 성공하면 실행할 실행문들;

}

});

-> url에는 데이터 전송 및 요청할 외부 주소를 입력함.

-> type에는 전송 방식을 입력함.

-> data에는 전송할 데이터를 입력함.

-> dataType은 서버로부터 반환 받아올 데이터 형식을 지정함. 데이터가 (X)HTML일 경우에는 "html", XML일 경우에는 "xml", JSON일 경우에는 "json"이라고 입력함.

-> 데이터 전송 및 요청이 정상적으로 이뤄지면 함수 내의 실행문이 실행됨. 이때 매개 변수(result)에는 요총한 데이터가 젖아됨.

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

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

* XML 데이터 요청하기

- XML(Extensible Markup Language: 확장성 마크업 언어)은 확장 가능한 언어이므로 태그명을 사용자가 임의로 작성할 수 있음.

- 이렇게 사용자가 임의의 태그명을 만들어 사용할 수 있ㅅ으므로, 많은 지식이 없어도 서버 측에 데이터를 XML의 데이터로 가공하는 것은 어렵지 않음.

-그래서 XML은 주로 데이터를 배포하는 목적으로 사용됨.

- XML을 사용하면 구조화된 데이터를 서버 측에 접근하지 못하는 응답 요청자도 데이터를 불러와 사용할 수 있음.

- 가령, 데이터베이스에서 데이터를 PHP를 사용해 불러왔다면, JSP 또는 ASP 사용자는 다른 프로그래밍 언어를 사용하므로 PHP에서 불러온 데이터를 요청할 수 없지만, PHP로 불러온 데이터를 XML 데이터 형식으로 가공했다면 JSP 또는 ASP에서도 용청할 수 있게 됨.

- XML 기본형

<?xml version="1.0" encoding="UTF-8"?>

<tag1>

</tag1>

-> 상단에는 버전과 인코딩 방식을 선언하고, 사용자가 임의로 시작 태그와 종료 태그를 사용하여 구조화된 데이터를 만듦

* JSON 데이터 요청하기

- JSON은 JavaScript Object Notation의 약자로 자바스크립트 객체 표기법을 의미함.

- JSON은 key와 value 값이 쌍으로 구성된 형태의 객체 표기법으로, XML과 마찬가지로 클라이언트(Client)와 서버(Server) 사이에 정보를 교환하기 위한 목적으로 사용됨.

- JSON은 XML보다 표기법이 좀 더 간단함.

- JSON 기본형

{key:value1, key2:value2, key3:value3...}

-> 중괄호 내에 key와 value 값을 쌍으로 표기함.