[Do it!] 09. 제이쿼리 비동기 방식 연동 [2.Ajax 관련 메서드]

Ajax 관련 메서드들

종류	설명
load()	외부 콘텐츠를 가져올 때 사용
$.ajax()	데이터를 서버에 HTTP POST,GET 방식으로 전송할 수 있음 HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적 메서드 표에 있는 $.post(), $.get(), $.getJSON() 메서드의 기능을 하나로 합쳐 놓은 것
$.post()	데이터를 서버에 HTTP POST 방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.get()	데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.getJSON()	데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 JSON 형식으로 받을 때 사용
$.getScript()	Ajax를 이용하여 외부 자바스크립트 불러오기
.ajaxStop(function(){...})	비동기방식으로 서버에 응답 요청이 완료되었을 때 함수 실행
.ajaxSuccess(function(){...})	ajax 요청이 성공적으로 완료되면 함수가 실행
.ajaxComplete(function(){...})	Ajax 통신이 완료되면 함수가 실행

 

load() 메서드

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

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

데이터에는 전송할 데이터를 입력

전송이 완료되면 콜백 함수에 저장된 코드가 실행

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

 

$.ajax() 메서드

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

불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 형식 등이 있으며, 선택한 요소에 Ajax를 이용해 요청한 외부 데이터를 불러옴

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

 

$.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 엑세스를 할 때 인증이 필요한 경우 사용자 이름을 지정

 

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

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

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

 

자바스크립트의 보안 정책과 외부 데이터 바인딩하기

자바스크립트의 보안 정책은 자바스크립트로 A 사이트(www.aaa.com)의 데이터를 B 사이트(www.bbb.com)로 불러오는 것을 허용하지 않음

이 정책을 동일 출처 원칙(Same-origin policy)라고 함

즉, ajax() 메서드로 서로 다른 도메인의 데이터를 전송할 수 없을 뿐만 아니라 교차 도메인(Cross-Domain)도 허용하지 않음

 

서로 다른 사이트에서 데이터를 주고 받으려면 서버 언어를 사용해 데이터를 가져오거나 JSONP를 사용하는 방법이 있음

 

서버 언어를 사용하는 방법 : 서로 다른 사이트에서 데이터를 요청하고 이를 ajax로 가공

=> 관리자가 직접 접근할 수 없는 외부 서버의 데이터를 가져올 때 사용

 

JSONP를 사용하는 방법 : "동일 출처 보안 정책"을 피해야 하고 관리자의 외부 서버 접근이 가능해야한다는 전제 조건이 필요

=> 교차 도메인으로 데이터를 불러올 때 사용

 

RSS(신문사 새 소식) 연동하기

신문사 사이트에 접속하여 RSS(Really Simple Syndication)를 불러오는 방법

* RSS : '초간편 배포'라는 의미. 새로운 읽을거리가 자주 갱신되는 블로그나 뉴스에서 주로 사용하는 XML 기반의 콘텐츠 배급 포맷. RSS를 사용하면 뉴스나 블로그의 관심 있는 읽을거리만 모아서 볼 수 있다는 장점. 또한 사이트 연동이 가능. 사이트에 RSS를 연동하면 자신이 운영하는 사이트의 내용이 풍부해져 설치하기 전보다 방문자가 늘어나는 효과가 있음