[AJAX] Asynchronous Javascript and XML 기초 - 1

👉 AJAX란?

     비동기 방식의 자바 스크립트, xml를 의미한다.

 

👉 비동기란?

     회원 가입을 한다고 가졍했을 때, 회원 가입 버튼을 누르면 약간의 시간이 흐르고 회원 가입 완료 페이지가 나온다.

     즉, 응답 페이지가 나온다.

     네이버가 가지고 있는 서버가 존재한다.

     아이디 중복 체크가 없는 폼인 경우, 서버에 동일한 아이디는 존재할 수 없다.

     그 경우, 응답 페이지가 다르게 될 수 있다.

     결과적으로, 사용자의 입력에 따라 응답 페이지의 화면이 달라져야 한다.

     html이 reloading될 때, html 정보를 뿌리는 것이 될 수 있다.

 

👉 ajax와 일반 요청의 차이

일반 요청	ajax 요청
data를 입력 후 이벤트 발생	data를 입력 후 이벤트 발생
서버에서 데이터를 이용하여 로직처리	서버에서 요청을 처리한 후, text, XML, JSON으로 응답
logic 처리 결과에 따라 응답 페이지를 생성, client에 전송	화면 전환 없이 응답 페이지를 구성

 

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

     모바일로 들어갔을 때의 문제점

     많은 것을 로딩하게 되면 그만큼 더 많은 데이터 요금이 빠져나간다.

     

👉 Javascript AJAX

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

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

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

 

👉 GET, POST, PUT, DELETE

전달 방식	CRUD
POST	C
GET	R
PUT	U
DELETE	D

 

👉 AJAX 함수

옵션 속성 이름	설명	자료형
async	동기, 비동기를 지정	Boolean
url	대상 url을 지정	String
data	요청 매개 변수를 지정	Object. String
type	GET 또는 POST 등을 지정	String
success(data, status, xhr)	Ajax 성공 이벤트 리스너를 지정	Function, Array

 

👉 $.get(), $.post()

     type: GET 이렇게 지정하는 것이 아니라, $.get() 이렇게 지정해주고,

     url을 $.get(url, function(response){}); 이런식으로 진행하면 된다.

GET 방식의 특징	POST 방식의 특징
url에 데이터를 포함시킨다.	url에 변수를 노출하지 않고 요청한다.
url에 데이터가 노출되어, 보안에 취약하다.	url에 데이터가 노출되지 않아서 보안이 되어있다.
전송하는 길이에 제한이 있다.	전송하는 길이에 제한이 없다.
캐싱할 수 있다.	캐싱할 수 없다.
데이터를 헤더에 포함하여 전송한다.	데이터를 바디에 포함하여 전송한다.

 

👉 Node와 Ajax와의 차이점(정확하지 않음)

Node: 필요한 내용을 html에 그대로 적는다.
Ajax ; 실제 실행에 필요한 페이지를 만들어낸다.

 

👉 데이터 전송 형식 : CSV

• Comma Seperated Values
• 각 항목을 쉼표로 구분해 데이터를 표현하는 방법
• 다른 두 형식에 비해 굉장히 짧다.
• 많은 양의 데이터 전송 시에 유리
• 단, 각 데이터가 어떤 내용인지 파악하기 어렵고, 완벽한 데이터 구조를 공유할 경우 가능하다.
• 누락된 데이터가 있는 경우 망가지기 쉬운 형태

👉 데이터 전송 형식 : XML

• eXtensible Markup Lanaguage
• xml은 tag로 data를 표현함
• tag를 보면 각 data가 무엇을 의미하는지 파악 가능
• tag에 사용자 정의 속성을 넣을 수 있으므로 복잡한 data 전달 가능
• 서버와 클라이언트가 주고 받을 데이터의 형식을 일치시켜야 한다.
• 실제 데이터보다 표현하기 위한 데이터가 더 많아질 수 있는 문제가 있다.

👉 데이터 전송 형식 : JSON

• xml에 많은 데이터가 전달되어야 한다는 단점을 극복한 방식
• CSV와 XML의 단점을 극복한 형식
• JavaScript에서 사용하는 객체의 형식으로 데이터 표현
• string형태로 data를 표현함.