jQuery $.ajax() 옵션 정리 (동기식 처리:async 캐시 처리 : cache)

Ajax는 비동기 방식으로 http통신을 통해 데이터를 주고받으며 화면 일부분을 페이지의 전환 없이 최신의 데이터로 업데이트 시켜줄 수 있는 개발방식입니다.

 

기본 속성

data: 서버에 전송할 데이터 key/value형식의 객체
dataType: 서버가 리턴하는 데이터 타입(xml, json, script, html)
type: 서버로 전송하는 데이터의 타입(POST, GET)
url: 데이터를 전송할 URL
success: ajax통신이 성공했을 때 처리할 내용
error: ajax통신 에러 발생 시 처리할 내용

$.ajax({
  data:{'data':$('#inputText').val()}, // URL 호출시 보낼 파라미터 데이터
  dataType:'json', // http 통신 후 응답 데이터 타입
  type:'POST', // 전송 데이터 방식
  url:'전송할 URL', // 전송할 URL 
  success:function(response, status, request){
    // 성공시 처리내용  
  },
  error:function(request, status, error){ 
    // 실패시 처리내용
  }
});

동기식 처리 옵션 - async

Ajax는 비동기 통신을 위해 사용합니다. 이런 Ajax 통신에서 동기식으로 통신해야 할 경우도 있습니다. 이때 사용하는 옵션이 바로 Async입니다.

$.ajax({
  async: false // true(기본): 비동기 처리, false: 동기처리
})

async옵션의 기본값은 ture로 async옵션을 표기해주지 않으면, 비동기 통신을 하게 됩니다.
동기식으로 처리를 하고 싶으실 때, async옵션에 false를 주면 됩니다.
async옵션을 false를 주게 되면, 동기식 처리를 하게 되므로, ajax통신의 결과를 받고 나서, 다음 스크립트 코드로 차례대로 실행하게 됩니다.

 

캐시 처리 옵션 - cache

IE 브라우저에서 Ajax를 사용하다 보면, 데이터가 갱신이 안되고, 이전 데이터가 그대로 남아있는 경우가 있습니다.
이는 IE 브라우저에서 ajax통신을 할 때, 새로 url을 호출하지 않고, 가지고 있는 cache값을 그대로 노출시켜주기 때문인데요. 이때는 cache옵션을 사용하여, 이런 현상을 방지할 수 있습니다. 

 $.ajax({
   cache: false // ajax 캐시 처리
 })

cache옵션은 브라우저 캐시를 방지하는 옵션입니다.
cache옵션 값을 false로 주게 되면, 브라우저 캐시를 막아서, 캐시 된 값이 아닌 현재 값을 호출해 올 수 있습니다.