Role Of Server In Ajax Korean

962 views

Published on

Architecture of server in AJAX. (Korean version)

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
962
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Role Of Server In Ajax Korean

    1. 1. Chapter 5. role of the server Byungwook Cho K. 2006-08-01
    2. 2. Agenda <ul><li>개요 </li></ul><ul><li>서버 구성 방법 </li></ul><ul><li>서버와 클라이언트간 데이터 통신 방법 </li></ul>
    3. 3. 1. 개요 <ul><li>AJAX 클라이언트와 서버를 연계하는 방법을 알아본다 . </li></ul><ul><li>Presentation Layer 를 표현하기 위한 서버의 구현 방법 </li></ul><ul><li>서버와 클라이언트 사이에서 데이터를 통신하는 방법 </li></ul><ul><li>클라이언트에서 서버로 데이터를 전달 하는 방법 </li></ul>
    4. 4. 2. 서버 구성 방법 (Native web server coding without a framework) <ul><li>Native web server coding without a framework </li></ul><ul><ul><li>ASP,PHP,JSP 와 같은 스크립트 언어만 사용하여 수작업으로 구현 </li></ul></ul><ul><ul><li>각각 페이지를 링크로 연결 ( 변경시 링크 수정 필요 ) </li></ul></ul>
    5. 5. 2. 서버 구성 방법 (Model 2 framework) <ul><li>Model 2 framework </li></ul><ul><ul><li>출력을 담당하는 VIEW 와 , 흐름을 통제하는 Controller 로 분리 </li></ul></ul><ul><ul><li>Struts, JPF(BEA) </li></ul></ul><ul><ul><li>흐름은 중앙 집중화 자동화가 되지만 , VIEW 는 여전히 수작업에 의존 </li></ul></ul>
    6. 6. 2. 서버 구성 방법 (Component based framework) <ul><li>Component based framework </li></ul><ul><ul><li>MFC,AWT 와 같은 GUI 컴포넌트 ( 위젯 ) 를 웹서버 차원에서 지원 </li></ul></ul><ul><ul><li>Desktop 위젯 : 그래픽 API 로 구성 , 웹위젯 : Javascript,HTML </li></ul></ul><ul><ul><li>.NET 의 Windows Forms, Java 의 JSF(Java Server Faces) </li></ul></ul><ul><li>AJAX 와 연결 </li></ul><ul><ul><li>기능적으로 AJAX 와 Component based framework 은 유사함 </li></ul></ul><ul><ul><li>위젯은 서버에서 구현되기 때문에 AJAX 와 사용시 문제점이 발생할 수 있음 </li></ul></ul><ul><ul><li>두 기술의 연동은 앞으로 고려되어야 할 문제 </li></ul></ul>
    7. 7. 2. 서버 구성 방법 (SOA 적용 ) <ul><li>SOA based </li></ul><ul><ul><li>XML 기반으로 통신하기 때문에 데이터를 AJAX 에서 다루기 좋음 </li></ul></ul><ul><ul><li>서버객체를 클라이언트에서 호출하기 </li></ul></ul><ul><ul><ul><li>DWR (JAVA), SAJAX (PHP, .NET etc) </li></ul></ul></ul>< Person.java > <dwr.xml> <javascript> 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=&quot;person&quot; converter=&quot;bean&quot; match=&quot; com.manning.ajaxinaction.Person &quot;/> </init> <allow> <create creator=&quot;new&quot; javascript=&quot;person&quot;> <param name=&quot;class&quot; value=&quot;com.manning.ajaxinaction.Person&quot;> </create></allow></dwr> var name = person.getName();
    8. 8. 2. 서버 구성 방법 (SOA 적용 ) <ul><li>SOA based </li></ul><ul><ul><li>서비스 노출 정도 조절 </li></ul></ul><ul><ul><ul><li>클라이언트에서 서버 API 를 직접 호출하기 때문에 tightly coupled ( 변경시 클라이언트 변경 내용이 많아짐 ) </li></ul></ul></ul><ul><ul><ul><li>Façade 패턴으로 해결 </li></ul></ul></ul><ul><ul><ul><li>Fine grainned 된 호출 ( 작고 자주 호출되는 ) 은 서버의 부하를 증대 시킴 </li></ul></ul></ul>
    9. 9. 3. 서버와 클라이언트간 데이터 통신 방법 (Client only & Content-centric interaction) <ul><li>Client only interactions </li></ul><ul><ul><li>HTML 과 함께 다운된 Javascript 로만 클라이언트를 처리 </li></ul></ul><ul><li>Content-centric interactions </li></ul><ul><ul><li>클라이언트에서 Iframe 을 생성하고 , Iframe 을 통해서 서버의 contents 를 Loading </li></ul></ul><ul><ul><li>Loading 된 컨텐츠를 보여주는데만 집중 [* Iframe 은 각자 다른 실행 영역을 가진다 .]  Iframe 과 Frame 간 통신이 어렵다 </li></ul></ul><ul><ul><li>대안으로 Iframe 으로 받은 내용을 Frame 에 innerHTML 로 넣는 방안 </li></ul></ul>
    10. 10. 3. 서버와 클라이언트간 데이터 통신 방법 (Script-centric interactions ) <ul><li>Script-centric interactions </li></ul><ul><ul><li>Script 를 서버에서 동적으로 생성하고 Load 하여 실행 </li></ul></ul><ul><ul><li>Iframe 방식 함수 호출 </li></ul></ul>2.Iframe:Load javascript 1.Invoke 3. call function 호출시 showInfo() : 작동 안함 top.showInfo() function showInfo(){ : } call showInfo();
    11. 11. 3. 서버와 클라이언트간 데이터 통신 방법 (Script-centric interactions ) <ul><li>Script-centric interactions </li></ul><ul><ul><li>Iframe 방식 객체 생성 </li></ul></ul><script language=&quot;javascript&quot;> function MyObject(name,age){ this.name = name; this.age = age; this.sayName=function(){ alert(name); } } function createMyObject(name,age){ return new MyObject(name,age); } var po = new MyObject(&quot;PARENT&quot;,11); po.sayName(); </script> <html> <iframe id=&quot;imframe&quot; src=&quot;Child.html&quot;></iframe> </html> < Parent HTML > <Iframe> create <script language=&quot;javascript&quot;> var co = top.createMyObject (&quot;CHILD&quot;,11); co.sayName(); </script> <html> This is Child </html>
    12. 12. 3. 서버와 클라이언트간 데이터 통신 방법 (Script-centric interactions ) <ul><li>Script-centric interactions </li></ul><ul><ul><li>Eval 방식 (XMLHttpRequest 로 읽고 eval 로 실행 ) </li></ul></ul><ul><ul><ul><li>다수의 짧은 스크립트보다는 소수의 긴 스크립트 호출에 사용 ( 부하가 크다 ) </li></ul></ul></ul>function evalScript(){ var script = this.req.responseText; eval(script); }
    13. 13. 3. 서버와 클라이언트간 데이터 통신 방법 ( data-centric ) <ul><li>Data centric interaction </li></ul><ul><ul><li>서버에서 XML 형태의 데이터를 받아서 DOM 으로 Parsing 하여 사용 </li></ul></ul>function showInfo(event){ var planet=this.id; var scriptUrl=planet+&quot;.xml&quot;; new net.ContentLoader(scriptUrl,parseXML ); } function parseXML(){ var name=&quot;&quot;; var descrip=&quot;&quot;; var xmlDoc=this.req.responseXML ; var elDocRoot=xmlDoc.getElementsByTagName(&quot;planet&quot;)[0 ]; if (elDocRoot){ attrs=elDocRoot.attributes; name=attrs.getNamedItem(&quot;name&quot;).value; var ptype=attrs.getNamedItem(&quot;type&quot;).value; if (ptype){ descrip+=&quot;<h2>&quot;+ptype+&quot;</h2>&quot;; } descrip+=&quot;<ul>&quot;; for(var i=0;i<elDocRoot.childNodes.length;i++){ elChild=elDocRoot.childNodes[i]; if (elChild.nodeName==&quot;info&quot;){ descrip+=&quot;<li>&quot;+elChild.firstChild.data+&quot;</li> &quot;; } } descrip+=&quot;</ul>&quot;; }else{ alert(&quot;no document&quot;);} top.showPopup(name,descrip); }
    14. 14. 3. 서버와 클라이언트간 데이터 통신 방법 ( data-centric ) <ul><li>XSLT 를 사용하는 방법 (11 장 ) </li></ul>< XML Data > <planet name=&quot;earth&quot; type=&quot;small&quot;> <info id=&quot;a&quot; author=&quot;dave&quot; date=&quot;26/05/04&quot;> Earth is a small planet, third from the sun </info> <info id=&quot;b&quot; author=&quot;dave&quot; date=&quot;27/02/05&quot;> Surface coverage of water is roughly two-thirds </info> <info id=&quot;c&quot; author=&quot;dave&quot; date=&quot;03/05/05&quot;> Exhibits a remarkable diversity of climates and landscapes </info> </planet>
    15. 15. Questions?

    ×