[Javascript/Jquery] Ajax옵션 정리(Ajax 동기식 처리 : async, 캐시 처리 : cache)

 

이번 피드에서는 Ajax를 사용하면서 사용하는 옵션값 2개를 정리해보겠습니다.

 

이번 피드를 확인하기전에 간단한 Ajax에 대한 기본적인 정리가 필요하신 분은 아래의 URL을 참고해주세요.

 

2020/10/11 - [노빠꾸 개발일지/JQUERY & JAVASCRIPT] - [Javascript/Jquery] Ajax 사용법 정리(Ajax란?, Ajax 기본 형태, Ajax Option 정리, Ajax Get, Ajax Post)

[Javascript/Jquery] Ajax 사용법 정리(Ajax란?, Ajax 기본 형태, Ajax Option 정리, Ajax Get, Ajax Post)

 

1. Ajax 동기식 처리 옵션 - Async

 

Ajax는 비동기 통신을 위해 주로 사용하는데요.

 

이런 Ajax통신에서 동기식으로 통신해야할 경우도 있습니다.

 

이때 사용하는 옵션이 바로 Async입니다. 

    $.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값을 받아서 화면에 처리할 수 있다.
        }
    })

위의 코드에서 4번Line의 코드처럼 async옵션을 추가해주면 됩니다.

 

async옵션의 기본값은 ture로 async옵션을 표기해주지 않으면, 비동기 통신을 하게됩니다.

 

동기식으로 처리를 하고 싶으실때, async옵션에 false를 주면 됩니다.

 

async옵션을 false를 주게되면, 동기식 처리를 하게되므로, ajax통신의 결과를 받고나서, 다음 스크립트 코드로 차례대로 실행하게됩니다.

 

 

2. Ajax통신 캐시처리 - cache

IE브라우저에서 Ajax를 사용하다보면, 데이터가 갱신이 안되고, 이전 데이터가 그대로 남아있는 경우가 있습니다.

 

이는 IE브라우저에서 ajax통신을 할때, 새로 url을 호출하지 않고, 가지고있는 cache값을 그대로 노출시켜주기 때문인데요.

 

이때는 cache옵션을 사용하여, 이런 현상을 방지할 수 있습니다.

 

cache옵션은 브라우져 캐쉬를 방지하는 옵션입니다.

    $.ajax({
        type: "get",             // http 타입
        url: "/ajaxTest",         // 호출 URL
        cache: "false". // ajax 캐시 처리
        data: "",                 // URL호출시 보낼 파라미터 데이터
        dataType: "json",         // http 통신 후 응답 데이터 타입
        success: function(res){    // Ajax통신 성공 후 실행 함수
            console.log("success :: "+res);    // 서버에서 res값을 받아서 화면에 처리할 수 있다.
        }
    })

4Line과 같이 코드를 작성해주면 됩니다. cache옵션값을 false로 주게되면, 브라우저 캐쉬를 막아서, 

 

캐쉬된 값이 아닌 현재 값을 호출해 올 수 있습니다.

 

---

이번피드는 이쯤에서 마무리하겠습니다.