디자이너들을 위한 jQuery 아작스 (ajax)



프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[AJAX] 디자이너들을 위한 jQuery 아작스 (ajax)

2014.05.02
jQuery 는 이렇게 되고,
<script>
$('#result').load('load.html');
</script>

html 마크업은 이렇게 되어있다고 칩시다.

<div id="result"></div>

그럼 이 페이지를 열었을때 (그러니까 로딩했을때), 어떻게 되는가? 외부에 load.html 라는 이름의 문서가 저 result 라는 이름의 div 에 포함되는 겁니다.
php 를 딱 한가지 아신다면 아마 include_once 이실텐데, 이 php 의 include 나 require 과 똑같은 기능인겁니다.
그런데 왜 아작스라고 부르는가? php 와 다르게 ajax 는 asynchronously 외부 문서가 포함될 수 있기 때문입니다. 그러니까, .load 시, 그러니까 로딩시 저 load.html 이 포함될수도 있지만, .click 시, 그러니까 마우스 클릭시에도 저 문서를 포함해 줄 수 있는 겁니다. (php 의 include 와 비교하자면 php 로는 때려 죽여도 이렇게 못하죠.) 이런 부분이 다르고, 또 하나더 다른 점은,

$('#result').load('load.html'); 에 #first 를 더해 봅시다. 이렇게
$('#result').load('load.html #first');

이러면 어떻게 되는가? 저 외부에 존재하는 load.html 이란 이름의 문서중 first 란 이름의 div 만 포함되는 겁니다.
일단 가장 기본적인 방법만 설명드렸습니다.

.get, .post, 뭐 이런식으로

$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});

callback function 이 필요한 경우 이렇게 사용하는 방법도 있는데, 이것까지 설명드리면 너무 글이 길어지니까 나중에 기회가 되면 하기로 하고. 일단 .load 만 사용해도 php 의 include 보다 훨씬더 여러가지 상황에서 유용하게 쓸수 있음을 아시겠죠?

제가 조금전에 미친듯이 웃은 이유는, 이 jQuery 의 아작스는 크로스 도메인이 안됩니다. 무슨 얘기냐 하면

$('#result').load('http://daum.net #main'); 이런식이 안된다는 겁니다. 그 이유는 보안상의 이유때문인데, 이걸 모르고 왜 이게 안되지 하면서 개삽질을 하는 모습을 보면 웃음이 터지죠. 물론 저도 이랬던 때가 있습니다. 뭐 모를수도 있는거죠.
그리고 이글을 쓰는 진짜 이유는, 대다수, 그러니까 jQuery 를 좀 잘한다는 사람도, 이걸 기정사실로 받아들인다는 겁니다.
하지만 방법이 있다는!!!!!
그리고 이 크로스 도메인 아작스 라는 것은 웹사이트 구축, 특히 디자이너 분 혼자서 사이트를 구축하면서 여러가지 서버, api 기능들, 예를 들자면 지역날씨, 환율정보, 특정지역 정보등, 사이트의 성격상 꼭 필요한 기능들을 아주 쉽게, 힘안들이고, 직접 구축하지 않고, 다른데서 퍼다가 집어 넣을 수 있어서 매우 유용한 기법이기에 꼭 배워두시면 좋은 기술이라서 소개합니다.
물론 php 에 curl 기능이 존재합니다. curl 로 타 사이트 컨텐츠를 긁어 올수 있는데 (전문 용어로 scraping 이라고 합니다.) 이걸 php 로 하게 되면, 기본 header spoofing 에 정규식씨 튀어나오고, G랄 옆차기해야하고, 장난아니게 복잡해집니다. 그리고 긁어오는 컨텐츠도 정리하는데 프로그래밍적 기술이 필요되고, 왠만한 프로그래머들도 취급하기 까다로워 합니다. 프로그래머들도 힘들어 하는걸 어떻게 디자이너가 합니까? 그래서 쉬운 방법을 알려드리는 겁니다.
사이트를 구축하는데 아래 금융정보를 불러와야 한다고 칩시다.

http://info.finance.naver.com/marketindex/exchangeMain.nhn

아, 글이 너무 길어지네요.
일단 보세요.

http://hackya.com/lab/j_scrape

여기에 이부분 info.finance.naver.com/marketindex/exchangeMain.nhn 을 쳐 넣고 submit 해보세요.

1~2초 후에 html 이 다 불려오죠? 이렇게 되는 겁니다. 이제 저기서 숨겨야 할 개체는 display:none 해서 가려주시고, css 먹여주시면 끝. 뭐 css 입히는것도 귀찮다, 그냥 네이버에 나온 그모습 그대로 쓰고 싶다, 이러면 css 파일을 네이버에서 퍼다가 똑같이 먹여주시면 되고. - 중요한 거는 이런 디자인적인 선택을 자유자재로 할수 있다는 겁니다.
자, 이게 어떻게 가능하냐구요?

https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax

크로스 도메인 아작스를 가능하게 해주는, 위 플러그인이 이걸 가능하게 해주는 겁니다.
이게 사실은 해킹에 악용될수 있기도 한데, 디자이너 분들 중에서 이걸로 범죄행위를 벌릴 분들은 없으실거고, 암튼 유용하게 쓰세요. 보시다시피 이 플러그인을 퍼간사람이 수백명에 불과할 정도로, 매우 유용하지만 널리 알려진 플러그인이 아닙니다. (숨겨진 보석 같은거죠.)
일단 저의 예제를 우클릭해서 (크롬에서 우클릭 + 저장하기) 퍼다가 보시구요. 뭐 사실 보고 배울것도 없어요. 너무 간단해서.
그리고 아작스 특수효과 같은거, 왜 불려들어와질때 은은하게 div 가 보여지는 효과같은것들은, 제가 저번 주말에 공개했던 http://hackya.com/bible/demo/ 이걸 다운받아 살펴보시면 이해가 쉽게 되실 겁니다.
마지막으로 우하하하, 이제 인터넷에 어떤자료던 다 퍼다가 쓸수 있겠네 이렇게 생각하시기전에, 이 크로스 도메인 아작스가 만병통치약이 아님을 아셔야 합니다.

php 의 curl 보다는 훨씬더 성공율이 높고 수월하지만, 안퍼와지는 자료도 있습니다. 타켓하는 사이트의 자료자체가 JSON 으로 불려와지고 있다던지 하는 경우, 퍼와지지가 않습니다.

하지만 이런 특수한 경우를 제외하고는 대부분 다 퍼와지니까 매우 유용하게 쓰실 수 있을 겁니다.

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3712
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3901
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2379
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20948
227 [기타] innerHTML 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.11.16 0
226 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
225 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 118
224 [소스] Window.scroll() 꿘쓰 2020.06.22 113
223 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
222 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
221 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.11.12 143
220 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
219 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 227
218 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 389
217 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 410
216 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 578
215 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 678
214 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 645
213 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 656
212 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
211 [소스] 별점주기 꿘쓰 2019.02.21 768
210 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 733
209 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 950
208 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 726