AJAX Technology for Web2.0 7/24/2019 Okkyung Choi

Copyright © 2006 All rights reserved by COK Agenda Part 5 References Part 4 Conclusion Part 3 Site Intelligent Web Services System Part 2 What is AJAX? Part 1 Background Web as Platform Copyright © 2006 All rights reserved by COK

Part 1 배경 및 관련 연구

Copyright © 2006 All rights reserved by COK Background 현재의 Web -하부 구조의 부재 -불필요한 정보 과다 검색 Semantic Web기반 ! Info Data Web Document Ontology 의미부여 추론,해석 현재의 Web Services UDDI : 구문기반 검색 방식 WSDL: 검색의 표현력 부족 웹 2.0 Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK Rich User Experience desktop application Take a look at a typical desktop application (Spreadsheet app, etc.) The program responses intuitively and quickly The program gives a user meaningful feedback's instantly Things happen naturally No need to click a button Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK Web as Platform “플랫폼으로서의 웹”의 의미 웹상의 데이터와 서비스들을 기반으로 새로운 서비스 개발 서비스 개발, 배포, 실행의 플랫폼 클라이언트 기술, 서버 기술, 컨텐츠 기술의 향상으로 가능 Characteristics of Conventional Web Applications “Click, wait, and refresh” user interaction Page refreshes from the server needed for all events, data submissions, and navigation The user has to wait for the response Synchronous “request/response” communication model These are the reasons why Rich Internet Application (RIA) technologies were born. Copyright © 2006 All rights reserved by COK

Part 2 What is and why AJAX?

Copyright © 2006 All rights reserved by COK 클라이언트 기술 웹브라우저 : 웹 플랫폼의 클라이언트 프로그램 한계: 제한된 상호운용성과 사용자 인터페이스 Desktop application vs Web application 이러한 한계를 극복하기 위한 많은 기술들 등장  RIA RIA (Rich Internet Application) 기술들 Applet Macromedia Flash Java Script DHTML AJAX Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK AJAX AJAX(Asynchronous Javascript And Xml) AJAX의 탄생 2005년 2월 28일, Adaptive Path 사의 Jesse James Garrett의 칼럼 “Ajax : A new Approach to Web Applications” Google Suggest, Google Map, Gmail (Loading not using ActiveX) 비동기 통신(Asynchronous Communication) : 연속성 설계 패러다임의 변화 기존 환경에서 여러 페이지에 걸쳤던 작업을 하나의 페이지에서 구현 가능 클라이언트 측 스크립팅을 사용하는 웹 애플리케이션 개발 방식으로서 http를 통해 xml 데이터를 웹 서버와 교환 데스크톱 애플리케이션 및 항상 업데이트 되는 웹 애플리케이션의 기능 및 상호작용 간의 차이를 줄여주는 역할 Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK AJAX Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK AJAX 장점 페이지 이동 없이 고속으로 화면을 전환 서버 처리를 기다리지 않고 비동기 요청이 가능 PHP 및 Perl 등의 서버측 처리를 각 PC에 분산 가능 수신하는 데이터의 양을 줄일 수 있음 실시간 인터렉티브 성능의 향상( ex) Google Map) 단점 보안에 대한 주의가 필요 크로스 브라우저화의 노하우가 필요 난이도의 증가. 복잡한 Javascript 코드가 필요하게 되므로, 이전보다 구현이나 디버깅에 어려움이 따름 Flash vs AJAX IE6 표준내의 Flash Player Plug-IN 이용 vs No Plug-IN 개발 소프트웨어 Macromedia Flash(유료) vs 무료 텍스트 에디터 Plug-In 기동시간 있음 vs No wait Copyright © 2006 All rights reserved by COK

활용 및 사용예 지능형 웹 서비스 통합 시스템 구현 Part 3 활용 및 사용예 지능형 웹 서비스 통합 시스템 구현

Copyright © 2006 All rights reserved by COK 사용 예 http://panic.com/goods/ http://maps.google.com/ http://office.microsoft.com/clipart/default.aspx?lc=ko-kr http://www.gmail.com http://www.cssplay.co.uk/menu/lightbox.html#Trees Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK 개발 환경 및 원리 : AJAX 개발 원리 개발 환경 - 개발언어: php, Java, Javascript, XML, html, Perl - 서버: Apache Server, MySQL Server 데이터베이스: MySQL APM(Apache+PHP+MySQL) Setup : www.apmsetup.com Copyright © 2006 All rights reserved by COK

지능형 웹 서비스 통합 시스템 시스템 개발 원리 개발 사례 : 시스템 설계 및 구현 서버 프로그램 포털 사이트(엠파스, 야후, 네이버, 다음) 서버 프로그램 Web Services Processing Engine AJAX를 이용→ 검색 엔진을 통해 페이지 정보 가져옴 분석 규칙, 추출 에이전트를 이용해 페이지에 대한 분석 순위 측정 알고리즘, 매치메이킹 알고리즘 이용한 분석 지능형 웹 서비스 통합 시스템 Copyright © 2006 All rights reserved by COK

Web Services Processing Engine 지능형 웹 서비스 통합 시스템 Web Services Processing Engine 시스템 개발 원리 일반 어플리케이션 프로그램과 같은 Event-driven 방식 4개의 주요 포탈 사이트(야후, 네이버, 엠파스, 다음)에 접속해 웹 페이지 정보를 가져온 후 페이지 분석 수행 Web Services Processing Engine 장점 개발과 유지 보수의 용이 불필요한 네트웍 트래픽 감소 UI “클라이언트 상에서 처리” => 서버 부담 감소 AJAX를 이용→ 검색 엔진을 통해 페이지 정보 가져옴 비동기, 실시간 처리(Real time Processing) 웹 서비스 실시간 모니터링(Real time Monitoring) 내부 구조상으로는 본 연구에서 제안한 알고리즘인 매치메이킹 알고리즘, 순위 측정 알고리즘과 한글 검색 엔진, 온톨로지 서버를 모두 포함하고 있다. 현재 Jess 엔진과의 연동 문제로 규칙 기반 검색 엔진을 개발 모듈에 포함시키지 않고 설계에만 그쳤는데 이는 향후 꼭 보완되어야 할 사항이다. 개발 원리는 AJAX[AJAX05]를 이용해 국내 주요 포털 사이트에서 서비스하는 실제 데이터를 가져와 지능형 웹 서비스를 위해 정보를 가공했다. 오버추어, 다음, 네이버, 야휴, 엠파스에 접속해서, 키워드 가격 정보, QoS 정보를 가져오는 '서버 프로그램'이 동작하고 있고, 이 '서버 프로그램'이 검색 엔진 프로그램과 같이 각 사이트에 접속해 웹 페이지를 가져와서 페이지에 대한 분석을 수행한 후 이를 데이터베이스에 저장시켰다. 페이지 분석시 제안한 추출 에이전트를 통해 연관성 있는 정보만 가져왔으며 정보의 정확도를 높이기 위해서 각 사이트마다의 ‘분석 규칙’을 이용하였다. 이때 사이트들이 가끔 페이지를 변경하는 현상이 있는데, 각 사이트마다 웹 페이지가 변경되면, 각 사이트 정보를 분석하는 ‘분석 규칙'도 같이 변경되도록 하였다. 마지막으로 순위 측정 알고리즘과 매치메이킹 알고리즘을 적용시켜 검색된 웹 서비스에 대한 분석을 수행 후 그 결과를 반환해 준다. AJAX의 장점을 정리하면.. . 일반 프로그램처럼 Event-Driven 방식의 프로그램을 만들수 있고,  개발과 유지 보수가 간단해진다. . 비동기, 실시간 처리를 하는 프로그램을 웹상에서 구현이 가능하니까.        예를 들어 http://work.zuguri.net/app/normal.html 같이        실시간처리가 필요한 장비에 적용할 때, 거의 실시간 모니터링이 가능하다. . 서버쪽에서도 필요한 데이터만 전송하여 불필요한 네트웍 트래픽을 줄일 수 있다. . UI와 웹의 장점이 서로 결함되어 기존 웹 환경에서의 한계를 극복할 수 있다. 쉽게 예기하면...서버쪽에서는 UI에 상관없이 XML형식으로 데이터만 보내주면 되고, UI같은 나머지 부분은 클라이언트인 웹 브라우저에서 알아서 다 처리하니까... 작업하기 현해서... Ajax Engine Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK 시스템 설계 및 구현 지능형 웹 서비스 통합 시스템 개발 원리 실질적인 웹 서비스 업체가 존재하지 않음 매치메이킹 알고리즘, 순위 측정 알고리즘, 한글 검색 엔진 온톨로지 서버를 포함 개발 환경 - 운영체제: SUN Solaris 10 - 개발언어: C, C++, perl, php, Java - 서버: Apache 2.x, Apache TOMCAT 5.x Servlet/JSP Container - 데이터베이스: PostgreSQL, Oracle 지능형 시스템 4개 포털 사이트 (엠파스,야휴,네이버,다음)에서 서비스하는 실제 데이터 가공 Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK 시스템 설계 및 구현 : ver 1.0 지능형 웹 서비스 통합 시스템 Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK 시스템 설계 및 구현 : ver 2.0 지능형 웹 서비스 통합 시스템 Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK 가격 비교 사이트 vs 지능형 웹 서비스 가격 비교 사이트 검색어(키워드), 가격(내림차순,오름차순), 인기도순에 의한 사이트 나열 QoS 측면(성능,응답시간,가용성,신뢰성,접근성)에 대한 미고려 제시된 웹 서비스 업체의 네트워크 속도나 미존재 사이트에 대한 고려가 없음 가격 비교 사이트와 웹 서비스 업체와의 상품이미지/설명/가격은 불일치 두 업체간 가격 정보 및 제품 특성의 차이가 나더라도 책임을 지지 않음 반드시 쇼핑몰에서 상품정보 및 가격에 대한 확인이 요구됨 웹 서비스 국내 4개 포털 사이트(네이버, 야휴, 다음, 엠파스)의 키워드 검색, 키워드 가격 정보와 광고주 정보를 검색해주는 시스템 검색에서 나오는 정보는 포털 사이트에서 서비스하는 실제 데이터를 가져와서 가공 업체 정보, 가격정보, QoS(네트워크 속도, 신뢰성, 가용성, 접근성)고려 내부 구조상으로는 매치메이킹 알고리즘, 순위 측정 알고리즘, 한글 검색 엔진 포함 Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK Conclusion 시맨틱웹, 웹 2.0에 대한 개인 견해 넘쳐 흐르는 물에 대한 둑의 효용성 => 댐 정보의 흐름은 막는데 있는 것이 아니라 적절하게 대처하는 것에 있다. 둑의 역할은 단순히 막는데 있지만.둑과 달리 댐은 물을 계속 흘려 보낸다. 물이 적을 때는 모아 놓아서 유용하게 쓰고, 물이 많을 때에는 무너져서 돌이킬 수 없는 재난이 날 수 있는 위험을 고려하여 많은 물을 흘려 보낸다. 정보는 물처럼 흐르며 가능한 한 넓게 퍼지고 싶어한다. 결론은 아예 물을 포기하거나, 물의 흐름에 동의하는 것, 둘 중 하나다. AJAX 기술이 나오게 된 배경도 우리가 받아들이는 정보의 편의성 때문이다. 결국 AJAX 는 이러한 웹 환경에 맞춰서 등장한 기술의 일부일 뿐이다. Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK Reference Jesse James Garrett, Ajax: A New Approach to Web Applications, http://www.adaptivepath.com/publications/essays/archives/000385.php, 2005. 2 Use Ajax with WebSphere Portal" (developerWorks, June 2006) to improve portal performance, create a cleaner portal application architecture, and -- most important -- give your users a much more responsive portal. Adaptive Path is one of the companies on the leading edge of user interface design; you can learn a ton about Ajax by perusing their pages. If you're curious about where the term Ajax came from, check out Jesse James Garrett and his excellent articles (like this one) on Ajax. You can get a head start on the next article in this series, focusing on the XMLHttpRequest object, by checking out this excellent article on the XMLHttpRequest object. If you use Internet Explorer, you can get the scoop at the Microsoft Developer Network's XML Developer Center. Ajax 입문 Asynchronous JavaScript + XML,타카하시 토시로 | 이창신 | 한빛미디어 | 2006년 01월 31일 자료 출처 : http://www.web2hub.com www.javapassion.com Copyright © 2006 All rights reserved by COK

Copyright © 2006 All rights reserved by COK Reference APM_Setup 5 for Win32 ( http://www.apmsetup.com/ ) - Apache HTTP Server Version 1.3.34 - http://httpd.apache.org - Webalizer Version 2.0.1 - http://www.webalizer.org - MySQL Version 4.0.26 - http://www.mysql.com - PHP Version 4.4.3-dev - http://kr.php.net - Zend Optimizer Version 2.6.0 - http://www.zend.com - phpMyAdmin Version 2.7.0-pl2 - http://www.phpmyadmin.net Copyright © 2006 All rights reserved by COK

감사합니다. 질의 응답