[Ajax] 개요

설명

Ajax :  Js의 라이브러리 중 하나

- Asynchronous Javascript And Xml : 비동기식(*웹피이지를 리로드하지 않고 데이터를 불러오는 방식, 새로고침을 하지 않고 불러올 수 있는 방법) 자바스크리트와 xml의 약자

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

 

-한마디로 정의 : Javascript를 사용한 비동기 통신이자 클라이이언트와 서버간에 XML 데이터를 주고받는 기술.

 

기존의 HTTP프로토콜과 비교하기

- HTTP((HyperText Transfer Protocol)(https://ko.wikipedia.org/wiki/HTTP)

www(월드와이드웹) 인터넷에서 서버와 클라이언트가 데이터를 주고받을때 사용하는 약속(프로토콜)

- HTTP Protocol : (Client) (서버에) Request 요청하고 <- 페이지 리로딩-> (클라이언트의) Response 응답받는 (Server) 구조, 페이지 전체를 갱신하는 방식(connectionless)

장점 : 리소스 낭비를 줄인다. (* 자원, 용량 // 데이터, 메모리 등이 리소스, 부족하면 멀티태스킹이 어렵고 다운상태가 자주 일어나는데 보통 몇 %가 활용가능한지 를 따진다. )

단점 : 동일한 요청에 중복된 헤더파일을 보낸다, 실시간 상호작용성이 떨어진다.

 

- Ajax : 일부분만 갱신하는 XMlHttpRequest객체 이용 데이터를 받는 형태가 JSON, XML

필요한 데이터만 부분적으로 받아서 갱신하므로 자원과 시간을 아낄 수 있고 웹에서 중요한 속도가 빠르다.

 

 

장단점

 

장점 :

① 속도 향상

② 서버처리 즉각

③ 다양한 UI 가능 (Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정가능)

 

단점 : 

① 히스토리 관리 X

② 보안상의 문제 *( 해결법 : 중요 데이터들은 unset시켜주시면 됩니다. 또는 DB단에서 입력값 필터링 검증 등 ) 

③ 연속적으로 데이터를 요청하면 서버의 부하가 증가된다

④ XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다.

(ex. 요청완료 전 사용자가 페이지를 떠나는 경우 오작동)

⑤ AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.

⑥ Http 클라이언트의 기능이 한정되어 있다.

⑦ 지원하는 Charset이 한정적

⑧ Script로 작성되므로 디버깅 용이하지 않다.

⑨ 동일-출저 정책(CORS)으로 인해 다른 도메인과 통신 불가능* Cross-Domain 문제

(same-origin policy, 웹의 중요 보안모델 / 주로 스크립트로부터의 데이터 접근에 적용된다. 즉, 일치하는 HTML 태그를 경유하는 이미지, CSS, 스크립트 등 출처를 경유하여 리소스를 임베드하는 것은 제한되지 않는다. 호스트, 프로토콜, 포트에 대한 일치)

 

AJAX를 사용가능하게 만드는 것들은

HTML, DOM, JavaScript, XMLHttpRequest 등

 

(a)사용자가 이벤트 발생시 (b) javascript는 DOM을 사용해 필요한 정보를 구한뒤

(c) XMLHttpRequest객체를 통해 웹서버 요청 전달

(d) 웹서버는 XMLHttpReqeust로부터 요청을 처리한 후 결과를 XML이나 plain-text로 생성해

(e) XMLHttpRequest에 전송한다.

(f) 서버로 응답이 도착하면 XMLRequest객체는 Js에 도착사실을 알리고

(h) Js는 응답데이터와 DOM을 이용해 사용자 화면에 반영

 

진행과정

1. XMLHttpRequest Object를 만든다.

- request 를 보낼 준비를 브라우저에게 시키는 과정

- 이것을 위해 필요한 method를 갖춘 object가 필요

 

2. callback 함수를 만든다

- 서버에서 response가 왔을때 실행시키는 함수

- HTML 페이지를 업데이트 한다.

 

3. Open a request

- 서버에서 response가 왔을때 실행시키는 함수

- HTML 페이지를 업데이트한다.

 

4. send the request

 

 

**URL이 변경되지 않는 ajax, XMLHttpRequest가 요청을 보내는 것, 웹프로그래밍 기법 중 하나

 

개인적으로 재밌게 읽은 Ajax 보안사연

https://jungjoongi.com/2018/10/09/The-importance-of-web-security/

 

참고

내가 본건 pdf인데 원글 발견

https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80