[JQuery] Ajax

01. Ajax (Asynchronous Javascript and XML)

 - 비동기 방식의 Javascript와 XML을 가리킴.

 동기 방식 : 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작 수행
 비동기 방식 : 신호를 보냈을 때 응답 상태와 상관없이 다음 동작 수행

- 목적 : 화면 전환 없이 클라이언트 측과 서버 측간의 XML, JSON(Javascript Object Notation), 텍스트, (X)HTML 등의 정보를 교환하기 위해서임.

- 서버에 자료를 요청하면, 서버 스크립트(Server Script) 페이지를 거치지 않아도 자료를 받아 올 수 있음.

 

 

02. 메서드

종류	풀이
load()	외부콘텐츠를 가져올 때 사용 사용자가 지정한 URL주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올때 사용 $("#d1").load("document_1.txt"); //id="d1"인 요소에 기존 하위요소는 모두 제거하고 "document_1.txt" 콘텐츠로 요소 생성.
$.ajax()	데이터를 서버에 HTTP POST, GET 방식으로 전송이 가능 (X)HTML, XML, JSON, 텍스트유형에 데이터를 요청할 수 있는 통합적인 메서드 $.post(), $.get(), $getJSON() 메서드의 기능을 하나로 합쳐 놓은것. 사용자가 지정한 URL경로에 파일의 데이터를 전송하고 요청한 데이터를 불러옴 $.ajax({     url : "전송페이지",     type : "전송방식(get, post)",     data : "전송할 데이터",     dataType : "요청할 데이터 타입(html, xml, json, text, jsonp)",     success:function(result){         전송 성공하면 실행할 실행문들;     } });
$.post()	데이터를 서버에 HTTP POST 방식으로 전송한 후 서버 측의 응답을 받을 때 사용.
$.get()	데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측에 응답을 요청 받을 때 사용
$.getJSON()	데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측 응답을 JSON 형식으로 받을 때 사용
$.getScript()	Ajax를 이용하여 외부 자바스크립트를 불러옴. $("button").click(function(){     $.getScript("damon_ajax_script.js"); });
.ajaxStop(function(){...})	비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수에 실행문이 수행됨.
.ajaxSuccess(function(){...})	ajax 요청이 성공적으로 완료되면 함수에 실행문을 수행함.
serialize()	방문자가 입력 요소에 값을 입력하고 전송하였을 때, 데이터 전송 방식인 'name1=value1 & name2 = value2...' 쿼리 스트링 형식으로 변환하여 액션 페이지에 전송함.
serializeArray()	방문자가 입력 요소에 값을 입력하고 전송하였을 때, 전송 방식인 key1:value1, key2=value2... JSON데이터로 변환하여 액션페이지에 전송함.
ajaxComplete(function(){...})	Ajax 통신이 완료되면 함수에 실행문을 실행함.

 

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

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

 

3. 데이터 요청하기

(1) XML

- XML(Extensible Markup Language :확장성 마크업 언어)

- 확장 가능한 언어이므로 태그명을 사용자가 임의로 작성할 수 있음.

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

 

(2) JSON

 - JSON(JavaScript Object Notation : 자바스크립트 객체 표기법)

 - key와 value 값이 쌍으로 구성된 형태의 객체 표기법

 - XML을 사용했을 때 보다 적은 데이터 용량으로 정보 교환가능. XML 단점을 보완한 데이터 표기방식.

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