Ajax 인공지능 연구실.

Presentation on theme: "Ajax 인공지능 연구실."— Presentation transcript:

1 Ajax 인공지능 연구실

2 Ajax Ajax Ajax(Asynchronous JavaScript and XML, 에이잭스)는 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간 데이터를 주고받는 기술 XML, XSLT, XMLHttpRequest Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다. 일부 데이터만 바꾸어 웹 페이지를 비동기적으로 변경하기 위한 것 모든 페이지를 다시 로드 하는 수고를 하지 않고도 페이지의 일부만을 변경할 수 있음 웹 서버와 비동기적 통신

3 Google Suggest Ajax는 Google Suggest(추천 검색어)에 의해 유명해짐(2005)
Google 검색창에 글자 입력 시, JavavScript는 서버로 text를 보내게 되고, 결과를 전달하여 출력

4 Ajax 장점 단점 페이지 이동 없이 고속으로 화면을 전환할 수 있다.
수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다. 수신하는 데이터의 양을 줄임 단점 요청을 남발하면 역으로 서버 부하가 늘 수 있음. 페이지 이동 없는 통신으로 인한 보안상의 문제 Ajax를 지원하지 않는 브라우저가 있다.

5 동기식 데이터 전송 서버로 데이터를 요청하고 응답이 오는 시간 동안 작업을 멈추고 기다린다.
예를 들어 웹에서 로그인 할 때 아이디와 패스워드를 서버로 전송하고 로그인 성공/실패 웹 페이지로 이동한다.

6 비동기식 데이터 전송 서버로 데이터를 요청하고 응답을 기다리는 동안 웹은 자신의 다른 업무를 진행하고 응답이 오면 작업 진행
사용자 입장에서는 화면 갱신도 없고, 요청-응답 사이 시간에도 다른 일을 진행 할 수 있다.

7 기존 방식 웹 브라우저가 웹 서버에 요청 전송 웹 서버는 JSP 등의 서버 어플리케이션을 사용해 사용자의 요청 처리 후 결과를 HTML로 생성해서 웹 브라우저에 전송 결과적으로 웹 브라우저가 웹 서버와 통신을 하고 요청 결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생함

8 Ajax 방식 사용자가 이벤트를 발생 -> 자바스크립트는 DOM을 사용해서 필요한 정보를 구한 뒤, XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달 웹 서버는 XMLHttpRequest로부터의 요청을 알맞게 처리 후 결과를 XML이나 단순 Text을 생성해서 XMLHttpRequest에 전송 결과적으로 사용자 입장에서는 페이지 이동이 발생되지 않고 페이지 내부 변화만 일어남

9 Ajax의 주요 구성 요소 주요 구성 요소 XMLHttpRequest : 웹 서버와 통신을 담당함. 사용자의 요청을 웹 서버에 전송 및 웹 서버로부터 받은 결과를 웹 브라우저에 전달함 DOM : 문서의 구조를 나타냄 CSS : 글자색,배경색,위치,투명도 등 UI관련 부분을 담당 Javascript : XMLHttpRequest 객체를 사용해 웹 서버에 요청을 전송함.

10 jQuery jQuery는 자바스크립트의 생산성을 향상 시켜 주는 자바스크립트 라이브러리 입니다.
jQuery UI는 jQuery기반의 GUI 라이브러리입니다. 이것을 이용해서 윈도우 애플리케이션과 같은 기능성의 UI를 만들 수 있습니다. jQuery Mobile라는 이름의 모바일 라이브러리를 출시해서 모바일용 웹에플리케이션을 만드는데도 많은 도움을 주고 있습니다.

11 jQuery 라이브러리를 추가 문서 내에 jquery 라이브러리를 정의 해줘야 한다. jQuery 라이브러리를 직접 다운로드 해서 정의 해주는 방법과, CDN 서비스를 이용해서 정의하는 방법이 있다.  최신 버전을 다운로드 받은 뒤 head 영역에서 <script> 태그로 불러 오면 된다. (당연히 다운로드 받은 파일의 위치대로 지정 해줘야 한다) CDN(content delivery network) 서비스 이용하기  CDN 서비스는 분산 처리를 통해 빠른 컨텐츠를 제공한다. 구글, 마이크로소프트 에서 CDN 서비스를 무료로 제공하고 있으므로 링크 형식으로 불러와 사용하면 된다.

12 jQuery 라이브러리를 추가 항상 최신의 jquery Library 이용하기 위한 주소

13 jQuery 기능 jQuery Dom jQuery Ajax

14 DOM이란? DOM(Document Object Model)은 노드의 트리 구조를 이용하여 웹 문서의 구조를 나타냅니다.
DOM 객체는 텍스트와 이미지, 하이퍼링크, 폼 엘리먼트 등의 각 문서 엘리먼트를 나타낸다. 자바스크립트 코드에서는 동적인 HTML을 만들어 내기 위해 DOM 객체에 접근해서 조작할 수 있다.

15 DOM과 HTML 페이지와의 관계 웹 페이지는 DOM 객체로 구성 되어 있다.

16 DOM과 HTML 페이지와의 관계

17 DOM과 XML

18 jQuery DOM <div> 태그 중에 <p> 태그를 모두 찾아 글자 색을 빨간색으로 변경하세요.
자바스크립트 방식 jQuery 방식

19 jQuery DOM jQuery에서는 위 그림의 내용처럼 jQuery DOM객체 생성 함수인 $();을 사용하여 선택자로 간단하게 DOM에 접근한다. 하지만 JavaScript에서는 브라우저의 여러 가지 내장 메소드(method)를 통해 DOM에 접근합니다.

20 JavaScript Ajax

21 Jquery Ajax

22 Jquery 옵션