📝Ajax란
- 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나로 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식입니다.
- 비동기식 : 여러가지 일이 동시적으로 발생한다는 뜻, 서버와 통신하는 동안 다른 작업을 할 수 있습니다.
- Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에서만 표시 가능합니다.
📝장점
- Ajax를 사용해서 서버와 데이터를 주고 받게 되면 서버에 보낼 필요한 핵심 데이터만 전송하기 때문에 새로고침 등 화면 깜빡임이 없고, 서버에 부담이 덜해 속도문제를 해결할 수 있습니다.
📝Jquery를 이용한 Ajax
- XMLHttpRequest를 직접 사용 하기 때문에, Ajax의 기본 method를 이용해서 서버와 통신을 하면 상당히 복잡합니다.
- Jquery를 사용하면 단 몇 줄 만으로 간단하게 server와 Data를 주고받을 수 있습니다.
📝사용법
$.ajax({
url: "/cart",
data: cartForm,
type: 'POST',
success: function(result) {
alert("상품을 담았습니다.");
location.href = "/";
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
location.href="/members"
}
})
| key | 설명 |
|---|
| url | 데이터를 주고받을 url |
| data | 보내는 데이터 |
| type | 데이터 전송 타입, HTTP 요청 방식(GET, POST) |
| dataType | Http 요청 후 return 하는 데이터의 Type을 지정(xml, Json ...) |
| success | Http 요청 성공시 발생하는 이벤트 핸들러 |
| error | Http 요청 실패시 발생하는 이벤트 핸들러 |
- error키 영역에 3가지 파라미터(jqXHR, textStatus, errorThrown)을 사용가능합니다.
- textStatus의 경우 'error'가 출력되고,
errorThrown의 경우 'Not Fount' 등의 구체적인 HTTP 오류 메세지가 출력 됩니다.
jqXHR.responseText의 경우 서버측에서 보낸 메세지가 출력됩니다.
📝참고
