[TIL] jQuery Ajax와 Ajax Property

예전에 Ajax에 대해서 배운 적이 있는데 Ajax 안에서 사용하는 Property에 대해서 다시 정리해보려고 한다.

 

예전에 정리한 Ajax 내용은 아래 포스팅을 참고하자

https://yelin1217.tistory.com/321

[SIST] JSP_days13_Ajax

https://yelin1217.tistory.com/322

[SIST] JSP_days14_JSON과 XML/JSON으로 ajax 처리

---

Ajax 설명

Ajax에 대해서 간단하게 다시 정리하자면

Asynchronous JavaScript and XML의 약자로 Web에서 화면을 갱신하지 않고 자바스크립트를 사용해 서버로부터 데이터를 가져오는 방법을 말한다.

 

동작원리는 브라우저에서 서버로 보낼 데이터를 Ajax Engine을 통해 서버로 전송한다. 이 때 Ajax Engine에서는 js를 통해 DOM을 사용하여 XMLHttpRequest 객체로 데이터를 전달한다.

이 XMLHttpRequest를 이용해서 서버에서 비동기 방식으로 자료를 조회해 올 수 있다.

서버에서 데이터를 전달할 때 화면 전체의 HMTL을 전달하지 않고 텍스트 또는 XML 형식으로 브라우저에 전달한다.

 

Ajax 사용방법

Ajax의 기본 Method를 이용해 서버와 통신을 하면 XMLHttpRequest를 직접 사용하기 때문에 코드가 길어진다. jQuery를 이용하면 간단하게 서버와 데이터를 주고받을 수 있다!

 

Ajax property

이제 서버와 Ajax 통신시에 필요한 대표적인 property에 대해서 알아보자

Key	설명
url	요청이 전송되는 URL이 포함된 문자열
type	Http 요청 방식(GET/POST)
timeout	Http 요청에 대한 제한 시간을 지정(단위 : ms)
success	Http 요청 성공시 이벤트 핸들러
error	Http 요청 실패시 이벤트 핸들러
complete	Http 요청 완료시 이벤트 핸들러
data	Http 요청 후 return하는 값
dataType	Http 요청 후 retuurn 하는 데이터의 Type을 지정(xml, http, script, json, jsonp, text)
async	요청시 동기 유무를 선택(True/False)
dataType	return된 데이터의 Type(xml, http, script, json, jsonp, text)
cache	브라우저에 의해 요청되는 페이지를 캐시할 수 있음(True/False)
beforeSend	Http 요청 전에 발생하는 이벤트 핸들러
global	전역함수 활성 여부를 설정(True/False)

 

사용 예)