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수업을 들으면서 어느정도 감을 잡은 후에 이 소스를 다시 본다면 이해가 갈 것이다 !!
그리고 그 후에는 창작의 날개를 펼 수 있을 것이다..
