이번 피드에서는 Ajax를 사용하면서 사용하는 옵션값 2개를 정리해보겠습니다.
이번 피드를 확인하기전에 간단한 Ajax에 대한 기본적인 정리가 필요하신 분은 아래의 URL을 참고해주세요.
[Javascript/Jquery] Ajax 사용법 정리(Ajax란?, Ajax 기본 형태, Ajax Option 정리, Ajax Get, Ajax Post)
1. Ajax란? Ajax(Asynchronous Javascript and XML)는 비동기 방식으로(페이지의 전환 없이) http통신을 통해 데이터를 주고받으며, http통신을 통해 데이터를 업데이트 시켜 주며, 화면의 일부분을 최신의 데이
nobacking.tistory.com
1. Ajax 동기식 처리 옵션 - Async
Ajax는 비동기 통신을 위해 주로 사용하는데요.
이런 Ajax통신에서 동기식으로 통신해야할 경우도 있습니다.
이때 사용하는 옵션이 바로 Async입니다.
|
1
2
3
4
5
6
7
8
9
10
|
$.ajax({
type: "get", // http 타입
url: "/ajaxTest", // 호출 URL
async: false, // True(기본) : 비동기 처리, false : 동기처리
data: "", // URL호출시 보낼 파라미터 데이터
dataType: "json", // http 통신 후 응답 데이터 타입
success: function(res){ // Ajax통신 성공 후 실행 함수
console.log("success :: "+res); // 서버에서 res값을 받아서 화면에 처리할 수 있다.
}
})
|
cs |
위의 코드에서 4번Line의 코드처럼 async옵션을 추가해주면 됩니다.
async옵션의 기본값은 ture로 async옵션을 표기해주지 않으면, 비동기 통신을 하게됩니다.
동기식으로 처리를 하고 싶으실때, async옵션에 false를 주면 됩니다.
async옵션을 false를 주게되면, 동기식 처리를 하게되므로, ajax통신의 결과를 받고나서, 다음 스크립트 코드로 차례대로 실행하게됩니다.
2. Ajax통신 캐시처리 - cache
IE브라우저에서 Ajax를 사용하다보면, 데이터가 갱신이 안되고, 이전 데이터가 그대로 남아있는 경우가 있습니다.
이는 IE브라우저에서 ajax통신을 할때, 새로 url을 호출하지 않고, 가지고있는 cache값을 그대로 노출시켜주기 때문인데요.
이때는 cache옵션을 사용하여, 이런 현상을 방지할 수 있습니다.
cache옵션은 브라우져 캐쉬를 방지하는 옵션입니다.
|
1
2
3
4
5
6
7
8
9
10
|
$.ajax({
type: "get", // http 타입
url: "/ajaxTest", // 호출 URL
cache: "false". // ajax 캐시 처리
data: "", // URL호출시 보낼 파라미터 데이터
dataType: "json", // http 통신 후 응답 데이터 타입
success: function(res){ // Ajax통신 성공 후 실행 함수
console.log("success :: "+res); // 서버에서 res값을 받아서 화면에 처리할 수 있다.
}
})
|
cs |
4Line과 같이 코드를 작성해주면 됩니다. cache옵션값을 false로 주게되면, 브라우저 캐쉬를 막아서,
캐쉬된 값이 아닌 현재 값을 호출해 올 수 있습니다.
이번피드는 이쯤에서 마무리하겠습니다.