Download presentation
Presentation is loading. Please wait.
1
AJAX? Cho Hyun Min
2
Contents 1. What is AJAX? 2. Practice 1-1 AJAX? 1-2 기존 기술과 차이점
1-3 장점과 단점 2. Practice 2-1 AJAX 구성요소 UML 2-2 PART1. AJAX 맛보기 2-3 PART2. AJAX ControlToolKit 설치 및 Start
3
What is AJAX? 1.1 AJAX? (Asynchronous Javascript and XML)
비동기 Javascript와 XML을 의미하며 기술 보단 개발자가 좀더 쉽게 접근 할 수 있도록 인터페이스를 만든 방법론 표현 정보를 위한 HTML (또는 XHTML)과 CSS 동적인 화면 출력 및 표시 정보와 상호작용을 위한 DOM, Javascript
4
What is AJAX? 1.1 AJAX? (Asynchronous Javascript and XML)
웹에서 ActiveX, Flash 또는 Java Applet 등에 의존했던 사용성, 접근성, 응답성의 향상 그러한 기술들을 대신해 AJAX이 가질 수 있는 경쟁력은 플러그인을 사용하지 않고 브라우저 만으로 이용 가능 새로운 것을 배우지 않고 DHTML, JavaScript, CSS등의 기존 웹 기술들을 그대로 이용
5
What is AJAX? 1.2 기존 기술과 차이점 기존 Web Application은 브라우저에서 폼을 채우고 이를 WebServer로 제출 하면 하나의 요청으로 WebServer에 전달 결과적으로 중복되는 HTML코드를 다시 한번 전송 받게 됨으로써 많은 대역폭 낭비 AJAX Application은 필요한 데이터만을 WebServer에 요청 받은 후 클라이언트 에서 데이터에 대한 처리 가능 WebServer 사이에 교환되는 데이터량과 WebServer의 데이터 처리량 감소로 인해 Application의 응답성이 향상
6
What is AJAX? 1.3 장점과 단점 페이지 이동없이 고속으로 화면 전환 가능
서버 처리를 기다리지 않고, 비동기 요청 가능 수신하는 데이터 량을 줄이고, 클라이언트에게 처리를 위임 가능 AJAX을 쓸 수 없는 브라우저에 대한 문제 Http클라이언트의 기능이 한정 페이지 이동없는 통신으로 인한 보안상의 문제 지원하는 Charset 한정 스크립트로 작성되므로 Debugging이 용이 하지 않음 요청을 남발하면 역으로 서버 부하가 늘 수 있음 장 점 단 점
7
What is AJAX? 2.1 AJAX 구성요소들 UML
기존Web은 응답이 올 때 까지 기다리지만 AJAX를 이용한 사용자는 진행 중이라는 값과 결과값을 진행 중이나 진행 후에 받게 됨 브라우저 웹 서버 AJAX엔진 (브라우저) 웹 서버 사용자 사용자 Action HTTP Request using XMLHttpRequest Action HTTP Request Action Processing Request Processing Request HTTP Response HTTP Response as HTML XML 기존 웹 애플리케이션을 이용할 경우 사용자의 액션 흐름, 서버에 요청을 보내고 새로운 페이지가 완료되기 기다림 AJAX를 이용한 경우 사용자의 액션은 비동기적으로 서버에 응답 완료되길 기다리지 않음
8
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트
9
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트
10
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트 Drag
11
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트 Drag
12
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트 Drag
13
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트 1.Drag 2.Click
14
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트 Insert
15
Script를 관리해주는 ScriptManager 필요
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트 Script를 관리해주는 ScriptManager 필요
16
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트 Drag
17
Practice 2.2 PART1. AJAX 맛보기 ASP.NET AJAX 관련 참고 사이트 Click
18
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00)
19
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Click
20
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start 압축 푼화면
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) 압축 푼화면
21
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Click
22
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start 확인
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) 확인
23
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Click
24
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Click
25
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start 복사
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) 복사
26
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Binaries 복사
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Binaries 복사
27
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00)
28
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00)
29
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00)
30
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Click
31
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Click
32
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Click
33
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Click
34
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00)
35
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start 1.Click 2.Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) 1.Click 2.Click
36
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00)
37
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start 2.Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) 2.Click
38
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Insert
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Insert
39
Practice 2.3 PART2. AJAX ControlToolKit 설치 및 Start Click
AJAX ControlToolKit Download(URL) AJAX ControlToolKit Download(504-00) Click
40
Thank you!
Similar presentations