role of server in ajax korean

BEA Confidential. | 1

Chapter 5. role of the server

Byungwook Cho K.

2006-08-01


Agenda

1. 개요

2. 서버 구성 방법

3. 서버와 클라이언트간 데이터 통신 방법


1. 개요

AJAX 클라이언트와 서버를 연계하는 방법을 알아본다 .

Presentation Layer 를 표현하기 위한 서버의 구현 방법

서버와 클라이언트 사이에서 데이터를 통신하는 방법

클라이언트에서 서버로 데이터를 전달 하는 방법


2. 서버 구성 방법(Native web server coding without a framework)

Native web server coding without a framework

ASP,PHP,JSP 와 같은 스크립트 언어만 사용하여 수작업으로 구현각각 페이지를 링크로 연결 (변경시 링크 수정 필요 )


2. 서버 구성 방법(Model 2 framework)

Model 2 framework출력을 담당하는 VIEW 와 , 흐름을 통제하는 Controller 로 분리Struts, JPF(BEA)

흐름은 중앙 집중화 자동화가 되지만 , VIEW 는 여전히 수작업에 의존


2. 서버 구성 방법(Component based framework)

Component based framework MFC,AWT 와 같은 GUI 컴포넌트 ( 위젯 ) 를 웹서버 차원에서 지원 Desktop 위젯 : 그래픽 API 로 구성 , 웹위젯 : Javascript,HTML

.NET 의 Windows Forms, Java 의 JSF(Java Server Faces)

AJAX 와 연결 기능적으로 AJAX 와 Component based framework 은 유사함 위젯은 서버에서 구현되기 때문에 AJAX 와 사용시 문제점이 발생할

수 있음 두 기술의 연동은 앞으로 고려되어야 할 문제


2. 서버 구성 방법(SOA 적용 )

SOA based XML 기반으로 통신하기 때문에 데이터를 AJAX 에서 다루기 좋음 서버객체를 클라이언트에서 호출하기

DWR (JAVA), SAJAX (PHP, .NET etc)

package com.manning.ajaxinaction;

public class Person{

private String name=null;

public Person(){}

public String getName(){

return name;

}

public void setName(String name){

this.name=name;

}

}

<dwr>

<init>

<convert id="person" converter="bean"

match="com.manning.ajaxinaction.Person"/>

</init>

<allow>

<create creator="new" javascript="person">

<param name="class"

value="com.manning.ajaxinaction.Person">

</create></allow></dwr>

var name = person.getName();

< Person.java > <dwr.xml>

<javascript>


2. 서버 구성 방법(SOA 적용 )

SOA based서비스 노출 정도 조절

클라이언트에서 서버 API 를 직접 호출하기 때문에 tightly coupled ( 변경시 클라이언트 변경 내용이 많아짐 )

Façade 패턴으로 해결

Fine grainned 된 호출 ( 작고 자주 호출되는 ) 은 서버의 부하를 증대 시킴


3. 서버와 클라이언트간 데이터 통신 방법(Client only & Content-centric interaction)

Client only interactions HTML 과 함께 다운된 Javascript 로만 클라이언트를 처리

Content-centric interactions 클라이언트에서 Iframe 을 생성하고 , Iframe 을 통해서 서버의

contents 를 Loading

Loading 된 컨텐츠를 보여주는데만 집중 [* Iframe 은 각자 다른 실행 영역을 가진다 .] Iframe 과 Frame 간 통신이 어렵다

대안으로 Iframe 으로 받은 내용을 Frame 에 innerHTML 로 넣는 방안


3. 서버와 클라이언트간 데이터 통신 방법(Script-centric interactions )

Script-centric interactions Script 를 서버에서 동적으로 생성하고 Load 하여 실행 Iframe 방식 함수 호출

function showInfo(){

:

}

call showInfo();

2.Iframe:Load javascript1.Invoke

3. call function호출시

showInfo() : 작동 안함

top.showInfo()



Script-centric interactions Eval 방식 (XMLHttpRequest 로 읽고 eval 로 실행 )

다수의 짧은 스크립트보다는 소수의 긴 스크립트 호출에 사용 (부하가 크다 )

function evalScript(){

var script = this.req.responseText;

eval(script);

}


3. 서버와 클라이언트간 데이터 통신 방법( data-centric )

Data centric interaction 서버에서 XML 형태의 데이터를 받아서 DOM 으로 Parsing 하여

사용function showInfo(event){

var planet=this.id;

var scriptUrl=planet+".xml";

new net.ContentLoader(scriptUrl,parseXML);

}

function parseXML(){

var name="";

var descrip="";

var xmlDoc=this.req.responseXML;

var elDocRoot=xmlDoc.getElementsByTagName("planet")[0];

if (elDocRoot){

attrs=elDocRoot.attributes;

name=attrs.getNamedItem("name").value;

var ptype=attrs.getNamedItem("type").value;

if (ptype){

descrip+="<h2>"+ptype+"</h2>";

}

descrip+="<ul>";

for(var i=0;i<elDocRoot.childNodes.length;i++){

elChild=elDocRoot.childNodes[i];

if (elChild.nodeName=="info"){

descrip+="<li>"+elChild.firstChild.data+"</li>\n";

}

}

descrip+="</ul>";

}else{ alert("no document");}

top.showPopup(name,descrip);

}


3. 서버와 클라이언트간 데이터 통신 방법( data-centric )

XSLT 를 사용하는 방법 (11 장 )

<planet name="earth" type="small">

<info id="a" author="dave" date="26/05/04">

Earth is a small planet, third from the sun

</info>

<info id="b" author="dave" date="27/02/05">

Surface coverage of water is roughly two-thirds

</info>

<info id="c" author="dave" date="03/05/05">

Exhibits a remarkable diversity of climates and landscapes

</info>

</planet>

< XML Data >


Questions?

role of server in ajax korean

Documents