프리랜서 웹디자이너 웹퍼블리셔RELATION

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 으로 불려와지고 있다던지 하는 경우, 퍼와지지가 않습니다.

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

이 포스트 공유하기

전체목록