[AJAX]Ajax - 1

1. Ajax란 무엇인가

  - Asynchronous Javascript and XML

  - 기존의 지도 정보 프로그램의 경우 사용자가 조작할 때마다 서버에 정보를 보내고 데이터를 받아

    다시 그리기 때문에 느릴 수 밖에 없다.

  - Dynamic HTML을 사용할 경우는 큰 지도를 모두 미리 다운로드해서 사용하는 반면

    Ajax는 필요한 화상만 다운받은 후 필요한 데이터를 비동기로 서버에서 얻어 온다.

2. 비동기

  - 서버 처리와 클라이언트 처리가 각각 별개로 처리된다

  - 클라이언트가 맵을 이동하거나 변경하는 작업과 서버에서 맵을 가져오는 작업이 병행처리 된다.

3. Ajax의 장단점

  - 장점

   - 페이지 이동 없이 고속으로 화면 전환

   - 서버 처리를 기다리지 않고 비동기 요청이 가능

   - 서버 측 처리를 각 PC에 분산 가능

   - 수신하는 데이터의 양을 줄임

  - 단점

   - 크로스 브라우저화의 노하우 필요

   - Ajax를 사용하지 못하는 브라우저

   - 오픈소스이므로 차별화가 어려움

   - 보안에 더욱 신경을 써야 함

4. 기존방식과 Ajax의 차이

   - 기존방식

     - 웹 브라우저가 웹 서버에 요청 전송

     - 웹 서버는 서버 어플리케이션을 사용해 사용자의 요청 처리 후 결과를 HTML로 생성해서 웹 브라우저에

       전송

     - 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그림

     - 웹 브라우저가 웹 서버와 통신을 하고 요청 결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생

    - Ajax 방식

     - 이벤트 발생 후 자바스크립트는 DOM을 사용해서 필요한 정보를 구한다.

     - XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달

     - 웹 서버는 XMLHttpRequest로 부터의 요청을 알맞게 처리한다.

     - 결과를 XML이나 단순 Text을 생성해서 XMLHttpRequest에 전송

     - 서버로부터 응답이 도착하면 XMLHttpRequest 객체는 자바스크립트에 도착 사실을 안다.

     - 자바스크립트는 응답 데이터와 DOM을 이용해 사용자 화면에 반영

     - 사용자 입장에서는 페이지 이동이 발생되지 않고 페이지 내부 변화만 일어남

5. 간단한 Ajax

  - Ajax의 동작원리

6. 한글 처리

7. 모듈 만들기

  - XMLHttpRequest 모듈 만들기

   - 반복적인 작업을 모듈로 작성한다.

8. 모듈 사용하기

9. responseText

  - 서버에서 값을 받아 출력

10. InnerHTML

   - 사용자가 이벤트를 발생시키면 웹 서버에서 데이터를 전송한다.

   - 웹 서버가 생성한 응답 결과를 바탕으로 화면을 조작한다.

   - 웹 브라우저에서 화면을 조작할 때는 보통 아래의 두 가지 방식 중 하나를 이용한다.

   - 시간출력