bluetail의 소프트한 세상

CNN실시간 뉴스를 불러와 보도록 하자 !!

일단 원리를 설명하자면....

내가 만든 HTML페이지에서 CNN홈페이지의 웹 서버어플리케이션에 직접 접근을 할 수 없다. 절대 네버 불가능하다.

안돼는 이유...

자바스립트(클라이언트 코드)에서 바로 다른 사이트의 내용을 실시간으로 읽어서 보여주려할 때.....서로 충돌 한다.(정확한 표현인지는 모르겟음...여튼..)

Ajax도 마찬가지로 자바스크립트로 되어있기 때문에 클라이언트 코드에 속한다. 이건 당연한 얘기 !  

비동기 요청으로 다른싸이트를 실시간으로 보여주려하니 마찬가지로 접근을 할 수 없을 것이다...

그렇다면...... 어떻게 하면 접근을 할 수 있을까???

Ajax를 사용한다면 간단?? 하게 불러올 수 있다.

이것은 웹서버에 직접 접근을 하는 방법이 아니라 CNN홈페이지에 링크를 통해서 우회접근을 하면 가능하다.

전문용어로 얘기 하자면 실시간으로 다른 도메인의 내용을 읽어서 보여주기 위해서는 클라이언트 코드와 서버코드가 서로 협조해서 작업을 해야하는데 이게 어긋나는 것이다. XMLHttpRequest객체는 자신의 싸이트에만 접속이 가능하도록 보안설정이 되어있기 때문이다 ! 그래서 다른 도메인에는 접속을 할 수 없으므로 ~!~! XMLHttpRequest객체가 접속 가능한 서버에 프락시 서버로 사용된 프로그램을 두고 XMLHttpRequest객체가 그 프락시 서버 프로그램에 접속을 한다면 !! 가능해 지는 것이다...!

소스코드를 공개 할까 말까 이 내용을 작성 할까말까 나 잡혀가는거 아닌가 생각을 많이 하다가 

서버를 해킹해서 접근한 것이 아니기 때문에 나는 법적으로 문제가 없다 판단....올리기로 결심했다.

말없이 글이 안올라간다면 필자 잡혀간거다 ㅠㅠ 꼭 이런것이 있다고만 알고 악용하지 않기를 바란다. (오바했나?)

일단 CNN뉴스 링크로 들어간다..

우리가 필요한 것 즉 링크로 되어있는 것은 제목과 거시기.mp3라는 것을 알 수 있다.

소스코드를 보면 이렇다..

일단 CNN홈페이지에 들어가서 우클릭후 소스보기를 한다.

전혀 알수가 없다......

다운로드 링크는 구지 달지 않으련다....그냥 네이버에서 검색하면 나옴...

이렇게 해도 모르겠다.....하지만 알록달록 구분하게는 잘 되었다...

그렇다면 아까 우리가 중요하다고 한 두가지 제목과 거시기.mp3 !!

요딴거 두개....

ctrl+f 로 .mp3 와 CNN News Update 를 검색하면 !!

요딴거 여섯개와

요딴게 <title>태그에 제목이 쓰여져 있다.

나이스다...굳잡 !

그렇다면 프로그램 소스 짜는 문제는 시간문제...!!

<!--cnnnews.jsp 페이지-->

 

Jsp페이지에서 간단한 JAVA소스로 HTML이나 xml을 (VIEW페이지를) 긁어올 수 있다.

그렇다면 긁어온 페이지를 아까 위에서 본 링크로 식별해서 링크만 따오면 된다 !

밑에 소스를 보면 알 수 있다.

<!-- cnnView.jsp -->

 

여기서 firstChild건 nodeValue건 궁금한 것들이 많겠지만 아직은 설명하지 않겠다.

Ajax 첫 강의 자료를 올릴 때 그때 자세히 설명을 해주겠다 !!

클릭을 한다면 요딴식으로 다운로드창이 나오고

재생을 할 수도 있다 !!

 

노래듣다가 클릭하면 겁나게 짜증난다....리듬감 없이 쌩으로된 영어가 귓속에 팍팍 박힌다...@_@...

이번 강의에서 중요한 것은 어떻게 이렇게 되지? 라는 궁금증만 안고 갓으면 좋겠다.

절대로 이해해달라고 얘기는 하지 못한다. 

지금 이런것을 한번에 알려고 노력해도 이게 무슨 멍멍이 소리인가 생각할테니 말이다.

일부러 소스코드는 이미지로 올렸으니 관심이 있으신 분들은 따라서 타이핑 해보기를 바란다.

타이핑 해본사람은 분명히 도움이 된다 !

그리고 필자가 작성한 Ajax수업을 들으면서 어느정도 감을 잡은 후에 이 소스를 다시 본다면 이해가 갈 것이다 !!

그리고 그 후에는 창작의 날개를 펼 수 있을 것이다..

 

完了 !!

Ajax기법을 설명 드리자면 웹 2.0세대가 오면서 기존 에 상위에 있던 기업들이 다 쓰러지고 다른 신기술을 가진 기업들이 상위를 차지했던 시기다. 예를들 면 라이코스, 한미르등등 기존에 최고 주가를 가지고 있던 웹 엔터테이먼트 들이 서서히 자취를 감추고 Daum, Naver등이 살아남은 것 이 예다. 이 기점 을 웹 2.0세대라고 하는데 이것을 실행시킨 기술이 바로 Ajax기술인 것이다. Ajax는 단순히 JavaScript가 아니라 동적으로 데이터베이스에 접근을 할 수도 있고, 동적으로 다른 웹페이지의 정보를 가지고 올 수도 있다. 예를 들자면...

Naver페이지를 예로 들면 웹 검색엔진의 검색어를 입력할 때 키보드 자판을 누를 때 마다 검색할 수 있는 단어들이 밑으로 생기는 것을 확인 할 수 있다.

이렇게 검색어 하나하나 입력 할 때 마다 데이터 베이스에 Connection하여 얻어온 값을 화면에 뿌려준다.

또 하나의 예를 들면

이렇게 원하는 테이블의 공간만 고쳐줄 수도 있고 그냥 단순히 고치는 것만이 아니라 세션값도 그대로 얻어올 수 있다.

 마지막으로 실시간 검색어 인데

마우스를 갇다 댓을 1위부터 10위까지의 정보를 가져 오는 페이지 역시 Ajax다. Ajax의약자는 비 동기 자바스크립트와 XML, Asynchronous JavaScript + XML의 뜻을 내포하고 있고, Ajax의 작업 패턴으로 는 두 가지가 있는데 전통적인 웹 애플리케이션 작업 패턴방식은 그림으로 설명 드리면,

이 그림은 사용자의 요청을 보냈을 시 사용자는 서버 의 응답이 올 때까지 어떠한 다른 화면도 볼 수 없 고, 위의 그림과 같이 요청을 보냈다면 서버의 응답 을 받고 다시 진행하고 다시 보내고 하는 형태로 브라우저의 결과를 볼 수 있다.

또 다른 패턴인 Ajax 애플리케이션 작업 패턴은

위와 다르게 사용자의 요청을 보냈어도 사용자는 현재 웹 브라우저의 내용들을 확인할 수 있고, 서버의 응답이 왔을 때 응답결과를 바로 페이지의 전환 없이 브라우저에서 확인할 수 있다.

AJAX의 장점 / 단점

간단명료하게 페이지의 전환 없이 원하는 데이터를 가져올 수 있고, UI 개선에 많은 도움을 준다. 예를 들어 구글 맵과 같이 페이지의 전환이 없이 마우스의 드래그로 위치 정보를 바로 화면에 보여 질 수 있는 것이다. 또 하나 예를 들면 웹에서 구현되는 웹 오피스 같은 웹 어플 이랄까.. 네이버 가계부 와 캘린더도 Ajax 기술을 이용해 서 개발된 것이다.

이런 장점에도 불구하고 Ajax는 치명적인 단점을 가지고 있다. 

Ajax는 자바스크립트가 지원이 되지 않는 브라우저에서는 '먹통'이 된다. Ajax로 개발 시 IE, 파이어 폭스, 오페라, 사파리 등 여러 브라우저에 호환 되게 개발해야 할 것이고, 자바스크립트가 지원되지 않는 브라우저에서도 사용자가 컨텐츠에 접근할 수 있게 해야 한다는 사실을 명심해야 한다. 또한 자바스크립트이기 때문에 보안에 아주!!!!!!취약한다. 방법을 여기서 설명하긴 뭐하지만 일단 기본적인 예로 웹 페이지에서 우클릭후 소스보기를 하면 소스가 모두 ! 공개된다. 해커는 아주 좋아하겠지만..이건 여기까지만 설명하기로 하고...

마지막으로 Ajax는 특정한 웹 언어에 종속적이지 않다. 자바 스크립트의 일부분이며 결국 서버에서 얻어온 특정한 데이터 형식(XML, JSON, TEXT, HTML 등)에 따라 가공해주어 표출해주면 된다. 

完了 !!