2020. 8. 29. 16:18ㆍ카테고리 없음
Ajax (Asynchronous JavaScript and XML)
- 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식
- 최근에는 XML보다 JSON을 더 많이 사용한다.
- 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른작업을 할수있다는 의미
Ajax의 동작방식
1.요청: 브라우저는 서버에 정보를 요청한다 (브라우저는 Ajax요청을 담당하는 XMLHttpRequest 라는 객체를
구현하고 있다.)
[ 서버의 동작 : 서버는 응답으로 데이터를 전달한다. (XML, JSON) ]
2.응답: 브라우저는 콘텐츠를 처리하여 페이지에 추가한다.
jQuery를 이용한 Ajax
jQuery를 이용하여 Ajax를 사용하게 되면 많은 이점이 있습니다. 일단 Ajax의 기본 Method를 이용해서 Server와 통신을 하면 상당히 복잡합니다. 이는 XMLHttpRequest를 직접 사용하기 때문인데, jQuery를 이용하면 100줄 정도의 Source를 몇 줄 만으로 간단하게 Server와 Data를 주고 받을 수 있습니다. 또한 크로스브라우징의 문제를 jQuery가 알아서 해결해주며 여러가지 편리한 기능들을 제공하기 때문입니다.
ex)
$.ajax({
url : "url", //요청이 전송될 URL주소
type: "GET", //http 요청방식
timeout: 3000, //요청 제한 시간 안에 완료되지 않으면 요청을 취소하거나 error콜백을 호출
data : {key : value}, //요청시 포함되어질 데이터
processData: true //데이터를 컨텐트 타입게 맞게 변환 여부
contentType: "application/json", //요청 컨텐트 타입
dataType: "json", //응답 데이터 형식
beforeSend: function() {
// XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다
},
success: function(data, status, xhr) {
//정상적으로 응답 받았을 경우에는 success콜백이 호출되게 됩니다.
// 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
},
error: function(xhr, status, error){
/ 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에
// error 콜백이 호출될 수 있습니다.
// 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만,
// 서버에서는 다른 데이터형식으로 응답하면 error 콜백이 호출되게 됩니다.
},
complete : function(xhr, status){
// success와 error 콜백이 호출된 후에 반드시 호출됩니다.
// try - catch - finally의 finally 구문과 동일합니다.
}
});
GET 방식과 POST방식의 장단점 및 차이점
- Select 기능을 원한다면 GET 메서드, Update 기능을 원한다면 POST 메서드
- 검색 결과 등 고정적인 주소 및 링크 주소로 사용될 수 있다면 GET 메서드를 사용
- 정보를 담을 URL길이(최대 2048자)는 한계가 있기 때문에 이를 해결하고 싶다면 POST 메소드를 사용
- POST 메서드를 쓰면 정보를 숨길 수 있다. 하지만 SSL(Secure Sockets Layer)를 사용안하면 GET과 마찬가지
- GET은 캐시가 남아있어 전송 속도가 빠르고 POST는 캐시가 남지 않아 보안적인 면에서 유리
- GET은 브라우저 히스토리에 파라미터가 남고 POST는 저장되지 않는다.
- GET은 ASCII캐릭터만 허용하나 POST는 한계가 없다. POST는 바이너리 데이터가 허용된다. 따라서 파일 입출력을 위해 POST메소드가 이용된다.