HTML/CSS/Javascript

[Javascript/Jquery] Ajax 정리

EunaSon 2023. 10. 27. 12:26

* Ajax

비동기 자바스트립트 + XML

웹서버와 비동기로 통신해 웹 페이지를 동적으로 갱신하는 프로그래밍 기법

요즘은 XML 보다 JSON을 주로 사용함

 

페이지의 새로고침 없이 서버에 요청이 가능하므로

전체 페이지가 아닌 페이지 일부분만 업데이트할 수 있음

서버로부터 데이터를 받고 작업 수행함

 

* Ajax 옵션 정리

*** jquery 버전마다 처리방식, 지원여부 등이 다를 수 있음

 

- url

요청할 url

 

-type

GET, POST, DELETE, PUT

HTTP 통신의 종류를 설정함. 기본값은 GET.

 

- async

비동기 통신 플래그. 기본값은 true, 요청~응답까지 사용자는 비동기 처리를 계속함,

false로 설정 시(동기 통신) 응답이 있을 때 까지 사용자는 기다리게 됨

 

- data

서버로 보낼 데이터. PlainObject, String, Array 등이 가능함.

 

- dataType 

text, html, xml, json, jsonp, script가 사용가능

서버에서 반환되는 데이터 형식을 지정함. 생략 시 jQuery가 MIME 타입 등을 통해 자동으로 결정함

 

- timeout

제한시간(밀리초). 

 

- contentType

서버에 보낼 데이터의 타입

 

- complete

Ajax 통신 완료 시 호출되는 함수. success나 error가 호출된 후에 호출되는 Ajax Event

 

- beforeSend

Ajax에 의해 요청이 전송되기 전에 호출되는 Ajax Event. 반환값을 false로 설정하면 Ajax 전송을 취소할 수 있음

 

- error

통신에 실패했을 때 호출되는 Ajax Event

 

- success

Ajax 통신이 성공하면 호출되는 Ajax Event. 반환된 데이터와 dataType이 지정한 값 2개의 인수를 받음