😀

04. Ajax

태그

AJAX(Asynchronous Javascript and XML)

Ajax 개요

•

비동기적인 방식으로 Javascript를 이용해서 XML을 왔다갔다 하도록 함

•

Ajax는 언어나 프레임워크가 아닌 구현하는 방식을 의미

•

Ajax는 웹(Web)에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법을 의미

•

JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회

•

화면 갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡함

일반 요청에 대한 응답

•

data를 입력 후 event 발생 

•

Ajax를 적용하지 않은 요청은 서버에서 data를 이용하여 logic 처리

•

logic 처리에 대한  결과에 따라 응답 page를 생성하고, client에 전송(화면 전환이 일어남)

Ajax 요청에 대한 응답

•

data를 입력 후 event 발생

•

Ajax를 적용하면 event 발생시 서버에서 요청을 처리한 후 Text, XML 또는 JSON으로 응답

•

client(Browser)에서는 이 응답 data를 이용하여 화면 전환없이 현재 페이지에서 
동적으로 화면을 재구성

서버와 클라이언트의 상호작용

•

웹 화면을 구성하는 방식은 서버 중심의 상호작용 방식과 클라이언트 중심의 상호작용 방식으로 구분

Javascript Ajax

•

XMLHttpRequest는 자바스크립트가 Ajax 방식으로 통신할 때 사용하는 객체

•

XMLHttpRequest 객체는 Ajax 통신 시 전송방식, 경로, 서버로 전송할 data 등 전송정보를
담는 역할

•

실제 서버와의 통신은 브라우저의 Ajax 엔진에서 수행

•

직접 자바스크립트로 Ajax를 프로그래밍할 경우 브라우저별로 통신 방식이 달라 코드가 복잡

JQuery Ajax

•

$.ajax() 함수는 jQuery에서 Ajax 기능을 제공하는 가장 기본적인 함수

•

다른 함수들에 비하여 옵션을 다양하게 지정할 수 있으며 실무에서 가장 많이 사용

•

함수의 옵션은 다양하지만 대부분 자동으로 지정하므로 생략 가능

JQuery Ajax - $.get(), $.post()

•

$.get(), $.post() 함수는 $.ajax()의 옵션 중 type 옵션이 미리 지정된 함수.

•

지정된 HTTP Method로 Ajax 통신을 하며 get()은 GET 방식을, post()는 POST 방식을 사용

jQuery Ajax - $(selector).load()

•

$.load() 함수는 서버로부터 내용을 조회하여, 선택자를 통해 DOM 객체에 동적으로 삽입

•

일반적으로는 잘 활용하지 않음

* 참고 : GET 방식과 POST 방식

GET 방식의 특징

•

URL에 변수(데이터)를 포함시켜 요청한다.

•

데이터를 Header(헤더)에 포함하여 전송한다.

•

URL에 데이터가 노출되어 보안에 취약하다.

•

전송하는 길이에 제한이 있다.

•

캐싱 할 수 있다. (캐싱 - 한번 접근 후, 또 요청할 시 빠르게 접근하기 위해 레지스터에 데이터를 저장시켜 놓는 것)

POST 방식의 특징

•

URL에 변수(데이터)를 노출하지 않고 요청한다.

•

데이터를 Body(바디)에 포함시킨다.

•

URL에 데이터가 노출되지 않아서 기본 보안은 되어있다.

•

전송하는 길이에 제한이 없다

•

캐싱 할 수 없다.

데이터 전송 형식

•

Server와 Client는 주고 받을 data의 형식을 맞춰야 함

•

대표적인 data의 형식은 CSV, XML, JSON 등이 있음

CSV (Comman Separated Values)

•

각 항목을 쉼표( , )로 구분해 데이터를 표현하는 방법

•

다른 두 형시겡 비해 굉장히 짧다. 많은 양의 데이터 전송 시 유리

•

단, 각각의 데이터가 어떤 내용인지 파악하기 어렵다. (서버와 클라이언트가 데이터 구조를 완벽히 공유할때 가능)

XML(eXtensible Markup Language)

•

xml은 tag로 data를 표현함

•

tag를 보면 각 data가 무엇을 의미하는지 파악 가능

•

tag에 사용자 정의 속성을 넣을 수 있으므로 복잡한 data 전달 가능

JSON(JavaScript Object Notation)

•

CSV와 XML의 단점을 극복한 형식

•

JavaScript에서 사용하는 객체의 형식으로 data를 표현

•

Ajax 사용시 거의 표준으로 사용되는 data 표현 방식