1. 동적 콘텐츠란 무엇입니까?
대부분의 인기 웹사이트는 온라인 광고를 통해 수익을 창출합니다. 웹 페이지의 광고 공간은 제한되어 있습니다. 광고 투자를 가치 있게 만들기 위해 광고주는 작은 광고 공간에 많은 양의 정보를 담아야 할 뿐만 아니라 광고가 사용자의 관심을 끌 수 있는지 확인해야 합니다. 현재 대부분의 웹사이트에서 웹페이지에 배치되는 배너 광고는 일반적으로 페이지를 구성하는 동안 서버에 의해 생성됩니다. 우리는 전송된 페이지에 새 광고를 동적으로 삽입할 수 없습니다. 새 광고를 표시하려면 페이지를 새로 고치는 것이 유일한 방법입니다. 예를 들어 페이지를 프로그래밍 방식으로 새로 고칠 수 있습니다.
브라우저 창 개체의 setTimeOut 함수를 사용하여 페이지를 정기적으로 새로 고칠 수 있습니다. 그러나 이러한 방식으로 광고를 새로 고치면 사용자는 페이지 새로 고침 과정을 명확하게 느끼게 되며 적절한 새로 고침 빈도를 결정하기도 어렵습니다.
입력 포커스가 페이지로 이동할 때마다(예: 브라우저가 활성화될 때) 브라우저가 페이지를 다시 다운로드하도록 페이지의 만료 시간을 몇 초로 설정합니다.
yahoo.com 및 msn.com과 같은 일부 대형 웹사이트에서는 이미 이러한 기술을 채택했습니다. 두 가지 방법 모두 장점과 단점이 있습니다. Java만 사용할 경우 네트워크 프로그래밍과 일부 인터페이스 프로그래밍 작업을 통해 배너 광고 새로 고침 시스템을 완벽하게 구현할 수 있지만 다운로드 시간이 길고 새로 고침이 지연되는 문제를 해결해야 합니다.
2. Java를 사용하여 콘텐츠 푸시 구현
JavaScript 인터프레임 통신과 네트워크 통신을 관리하는 Java 애플릿을 결합하면 푸시 기술을 사용하여 이 문제를 해결할 수 있습니다. 이러한 시스템에서 Java Applet의 작업은 서버에 연결하고 콘텐츠 업데이트를 수신하는 것입니다. 새 콘텐츠가 수신되면 애플릿은 새 콘텐츠를 표시하는 HTML 코드를 구성하고 JavaScript 함수를 호출한 다음 새 콘텐츠가 포함된 HTML을 JavaScript 함수에 전달합니다. JavaScript 함수는 DHTML 및 DOM 기술을 사용하여 페이지의 <div> 태그 내용을 매개변수에 전달된 새 내용으로 바꿉니다. 브라우저 보안 제한으로 인해 애플릿에 의해 열린 소켓 포트는 애플릿을 다운로드한 서버에만 연결할 수 있습니다.
웹 서버는 포트 80에서 연결 요청만 수신합니다. 따라서 웹 서버 외에도 애플릿의 소켓 연결 요청을 수락하는 네트워크 응용 프로그램 서비스도 필요합니다. 이 네트워크 응용 서비스는 주기적으로 데이터베이스를 쿼리하고 변경된 데이터를 연결된 모든 애플릿에 게시(푸시)합니다. 숨겨진 프레임과 JavaScript의 프레임 간 통신 기능을 사용하면 대부분의 JavaScript 논리를 사용자로부터 숨길 수 있습니다.
이 전체 과정에서 가장 어려운 작업은 Java Applet과 JavaScript 코드 간의 통신입니다. Netscape는 netscape.javascript.JSObject라는 클래스를 제공합니다. 이 객체를 사용하려면 특별한 "MAYSCRIPT" 속성을 포함하는 애플릿 태그를 추가하십시오:
<APPLET code="MyApplet.class" height=1 width=1 MAYSCRIPT>
JSObject의 메소드를 사용하면 애플릿이 문서 객체와 상호 작용하고 JavaScript 명령을 호출할 수 있습니다. 예를 들어, 다음 코드를 Applet에 넣으면 창 객체에 액세스할 수 있습니다.
import netscape.javascript.*; public class MyApplet은 java.applet.Applet{ private JSObject mainwin; public void init(){ mainwin = JSObject.getWindow ( this); } }
JSObject 참조를 얻은 후 문서 창 개체에 액세스하고 JSObject의 eval() 메서드를 통해 JavaScript 함수를 호출할 수 있습니다.
3. DHTML을 사용하여 페이지 업데이트
애플릿의 새 내용을 문서에 작성할 때 기존 내용에 영향을 주지 않기 위해 HTML <div></div> 태그를 사용할 수 있습니다. 이 태그는 IE와 Netscape에서 다릅니다.
IE 및 Netscape 6의 경우 이 HTML 태그는 다음과 같습니다.
// 업데이트할 모든 콘텐츠는 ID <div id="iexplorer" width=700px ></div>로 식별되어야 합니다.
Netscape 4.x 버전의 경우 이 HTML 태그는 다음과 같습니다.
<DATA><layer id="netscapev" ></layer></DATA>
명확성을 위해 적절한 ID를 참조하여 애플릿에서 HTML 콘텐츠를 직접 업데이트할 수 있지만 단순화를 위해 HTML 코드를 업데이트하는 프로그램 논리를 JavaScript 함수에 넣겠습니다. 다음 JavaScript 코드는 브라우저 유형을 ie 변수에 저장합니다.
applnname=navigator.appName; if(applnname=="Microsoft Internet Explorer") { ie=true; } else { ie=false
}
데이터 코드를 작성하고 이를 JavaScript 변수 콘텐츠에 저장한 다음 할당데이터() 메서드를 호출합니다. 콘텐츠 데이터는 일반 HTML부터 XML, 바이너리 데이터까지 무엇이든 될 수 있습니다.
// 브라우저 유형에 따라 적절한 메소드 함수 insertData() { if(ie) {explore();} else {navig() } };
브라우저가 IE 또는 Netscape 6인 경우 애플릿은 explore() 메소드를 호출합니다.
//content는 HTML 형식으로 표시해야 하는 새 데이터를 설명하는 javascript 변수입니다. function explore() { iexplorer.innerHTML=content ; }
브라우저가 Netscape 4.0 이상이고 애플릿이 navig() 메소드를 호출하는 경우:
function navig() { document.netscapev.document.write(“<DATA>“ + content + “</DATA>“); document.netscapev.document.close() }
4. 통신 프로세스
서버측에서는 ImageAppliation.java 클래스의 인스턴스가 소켓 연결 요청에 응답하고 각각의 새 연결 요청에 대해 새 스레드를 생성합니다. 코드를 단순화하기 위해 각 스레드는 데이터 파일이 변경되었는지 여부만 확인합니다. 데이터 파일이 변경된 경우 스레드는 파일 내용을 읽고 새 데이터를 연결된 애플릿으로 보냅니다(샘플 애플리케이션은 전체 파일을 애플릿으로 보냅니다).
클라이언트 측에서는 숨겨진 프레임에 Applet ImageApplet.java가 포함되어 있으므로 브라우저의 HTML 소스 코드 보기 기능을 사용하여 Applet 태그를 볼 수 없습니다. 애플릿은 서버(애플릿을 다운로드하기 위한 원본 서버)에 연결하는 기능을 구현하고 간단한 통신 프로토콜을 구현합니다. 서버와 연결을 설정한 후 애플릿은 서버로부터 데이터를 수신하고, HTML 코드를 구성하고, JavaScript 함수를 호출하여 데이터를 문서에 전달합니다.
public void upDateHTML(String str){ //data는 다음의 이름입니다. //quote는 JavaScript 변수입니다. //str은 새로 구성된 HTML 코드입니다. mainwin.eval("document.data.quote.value="" + str + """); ()"); return; }
netscape.javascript.JSObject는 애플릿에서 JavaScript로의 통신을 완료합니다. 클라이언트 브라우저 버전에 따라 다른 버전이 필요합니다. Netscape용으로 제공되는 압축 클래스 파일 java40.jar을 다운로드할 수 있습니다. IE에는 이미 JSObject 클래스가 포함되어 있지만 찾기가 약간 어렵습니다. $windows$JavaPackages 디렉터리를 검색하여 JSObject 클래스가 포함된 ZIP 파일을 찾을 수 있습니다.
서버는 toString() 메소드를 통해 ImageArrayElement.java 클래스의 인스턴스를 문자열로 직렬화하고 이를 애플릿으로 보냅니다. 서버는 데이터 파일에서 각 객체를 구성하고 toString() 메서드를 호출한 후 모든 객체를 나타내는 문자열을 연결하고 마지막으로 결과 문자열을 보냅니다. 다른 쪽 끝에서는 애플릿이 이 문자열을 수신하고 구문 분석한 후 각 ImageArrayElement 객체를 재구성합니다. 여기서 데이터가 긴 문자열 형식으로 전송되는 이유는 이 방법은 매우 간단한 처리 프로세스만 필요하므로 사용자는 실시간에 가까운 속도로 데이터 변경 사항을 즉시 알 수 있지만 다른 방법도 사용할 수 있습니다. 객체를 벡터로 보내는 메소드 메소드입니다.
라이브 애플리케이션에서는 일반적으로 현재 페이지에 새 데이터를 투명하게 삽입해야 합니다. 그러나 샘플 애플리케이션에서는 프로그램 실행 프로세스를 보다 직관적으로 만들기 위해 새 콘텐츠가 도착하면 사용자에게 메시지를 표시합니다.
푸시 기술의 가장 큰 장점은 애플리케이션 서버가 변경된 데이터만 네트워크로 전송하므로 대기 시간이 최소화된다는 것입니다. 이 애플릿은 매우 작은 작업을 담당하므로(사용자 인터페이스가 포함되지 않고 이 작업 부분은 브라우저에서 처리됨) 애플릿은 크기가 작고 매우 빠르게 로드됩니다.
5. 이 글의 예제를 실행하는 방법
이 기사의 샘플 애플리케이션을 테스트하려면 컴퓨터에 웹 서버와 JDK 1.7 이상이 설치되어 있어야 합니다.
설치 지점:
ZIP 압축 파일의 압축을 풀고 웹 서버의 기본 루트 디렉터리에 설치합니다.
IIS 서버의 경우 기본 루트 디렉터리는 Inetputwwwroot입니다.
jsdk2.1에 포함된 무료 서버의 경우 기본 디렉터리는 <설치 디렉터리>webpages입니다.
아카이브의 압축을 풀면 모든 파일이 <웹 서버 루트>/exp/ 디렉터리에 설치됩니다.
기본 페이지에 다음 코드 줄을 추가합니다. 각 서버에는 고유한 기본 페이지가 있습니다. IIS의 기본 페이지는 "default.htm"입니다. 자세한 지침은 웹 서버 설명서를 참조하세요.
<ul><li> <a href="/exp/ImageMain.htm"> Java 기반 동적 Ad-Banner</a></li> </ul>
애플리케이션 실행 단계:
DOS 창을 열고 <Default Web Directory>/exp를 입력한 후 "java ImageApplication"을 실행합니다. 시스템에 "서버가 포트 6011에서 수신 대기를 시작했습니다"가 표시됩니다. 클래스 경로 환경 변수가 현재 작업 디렉터리를 가리키는지 확인하세요.
웹 서버를 시작합니다.
브라우저를 열고 다음 URL을 입력하십시오: http://localhost:8080 . 이 URL은 "Java 기반 동적 광고 배너" 링크가 있는 웹 서버의 기본 페이지를 엽니다. 이 기사의 샘플 애플리케이션을 실행하려면 이 링크를 클릭하세요.
메모장으로 "/exp/images.txt" 파일을 열고 내용 한 줄을 복사하여 붙여넣은 후 파일을 저장하세요. 콘텐츠 업데이트를 요청하는 JavaScript 창이 시스템에 표시되는 것을 즉시 확인할 수 있습니다. JavaScript 창을 닫으면 페이지에 새 콘텐츠가 표시됩니다.
이 문서에 있는 예제의 전체 코드를 여기(411KB/u/info_img/2009-06/20/pushweb.zip)에서 다운로드하세요.