49일차: Ajax 기초 개념과 메소드 2021.08.23

목차

1.     Ajax 기초 개념

2.     Ajax 메소드

 

 

1. Ajax 기초 개념

 

• Ajax (Asynchronous JavaScript + XML)

- JavaScript와 XML을 이용한 비동기 통신처리를 구현하는 기술

- 클라이언트와 서버 간에 XML 데이터를 주고받는 기술

- JavaScript로 웹 페이지 전체를 다시 읽어 들이지 않고 서버와 데이터를 주고받는 경우에 사용

- JavaScript를 이용해서 서버에서 데이터를 가져와 전체 페이지를 새로고침(refresh)하지 않고 특정 부분만 변경하는 것이 가능

- 비동기식으로 처리 가능하여 웹페이지 속도가 향상됨

- 주로 아이디 중복 검사와 댓글 기능에 사용됨

 

• 비동기(asynchronous) 방식

- 웹페이지를 reload하지 않고 데이터를 불러오는 방식

- JSON이나 XML 형태로 필요한 데이터만 받아 갱신

- 최근에는 XML보다 JSON을 더 많이 사용함

 

동기 방식	비동기 방식
- 서버에 신호를 보냈을 때 응답이 들어와야 다음 동작 수행 가능	- 신호를 보냈을 때 응답 상태와 상관없이 동작 수행 가능

 

[이미지 출처: https://poiemaweb.com/js-async]

 

• JSON

- JSON은 ‘JavaScript Object Notation’의 약어로 XML 데이터를 대신하기 위해서 사용

- JSON은 키와 값을 쌍으로 가지는 구조

- 배열을 사용할 때는 대괄호([ ])안에 중괄호({ })를 사용하여 조합

- jQuery에서는 JSON으로 표현한 데이터를 파일에 저장해 두었다가 필요할 때 이를 불러올 수 있는 $.getJSON()함수를 제공

 

2. Ajax 메소드

 

• jQuery Ajax 부가 메소드

$.ajax()

$.get() : get 방식으로 Ajax을 수행한다.

$.post() : post 방식으로 Ajax을 수행한다.

$.getJSON() : get 방식으로 Ajax를 수행해 JSON 데이터를 가져온다.

$.getScript() : get 방식으로 Ajax를 수행해 Script 데이터를 가져온다.

$(selector).load() : Ajax를 수행한 후에 선택한 문서 객체안에 응답받을 파일(문자열)을 불러온다.