AJAX 동기식으로 처리하기

http://kdsr2z0.github.io/ajaxasync/

Ajax는 비동기 통신이다...

동기통신을 하려면 async:false 로 적어주면 된다.

동기통신이 되면.... 순차적으로 로직이 수행된다.

$(document).ready(function(){
        $("#btn").click(function btnClickHandler(){
            $.ajax({
                url:"/test/ajaxTest",
                //async:false,
                success: function(data, dataType){
                    $("#resultLog").html($("#resultLog").html() + "
" + data + " :: ");
                }
            });
            $("#resultLog").html($("#resultLog").html() + "
" +  "after ajax call");
        });
});

Ajax의 옵션들
 
흔히 사용하지 않는 옵션들은 잘 모르기 마련이다. 하지만 알고있게 되면 언젠가는 유용하게 쓰이지 않을까 싶다.
참조로 둔 ajax api 페이지 를 보는게 더 좋을지도 모르지만, 영어로 된 페이지 이기 때문에 한글로 간단하게 정리하였다.(공부할 겸...)
* url
    * 연결하고자하는 주소를 적으면 된다. 어렴풋이 기억나서 확실하지는 않지만 파일경로를 입력해서 비동기로 파일을 읽을수도 있다.
* async
    * default:true, 동기 통신을 하고자하면 false를 주면된다.
* beforeSend
    * request 전에 호출되는 이벤트, return false를 주게되면 ajax 이벤트가 취소된다.
* cache
    * default : false 통신 결과를 cache하지 않는다.
* complete
    * success, error 가 발생한 이후 발생되는 Event
* contentType
    * 서버로 데이터를 보낼 때 사용.
* context
    * 특정 element를 context로 설정하여, callback 함수의 주체로 만들 수 있다.
* crossDomain
    * default : false, ture 로 설정하면 domain이 달라도 요청이 가능하다.
* data
    * key, value pairs를 통해 서버로 parameter를 전달할 수 있다.
* dataFilter
    * 서버로 부터 전달받은 데이터를 필터링 할 수 있다.
* dataType
    * 서버에서 반환되는 데이터의 형식을 지정한다.
    * xml, html, script, json, jsonp, text 가 있다.
* error
    * 통신 중 실패했을 경우 호출되는 Event
* global
    * global Event를 동작시킬 것인지 설정한다. default 값은 true, 설정시 등록해놓은 Ajax global event가 bind 되어 발생한다.
* headers
    * key/value pairs 를 등록하여 헤더에 값을 추가한다.
* ifModified
    * Last-Modified header의 값을 보고 변경된 경우에만 true를 반환한다.
* jsonp
    * callback 함수를 json 형태의 parameter로 전달한다. crossDomain 문제를 해결할 수 있다고 하는데.. 한번 연구해봐야할 것 같다.
* method
    * http 전송 방식을 설정한다.
* mimeType
    * mimeType 을 설정한다.
* password
    * password 가 필요한 http 통신의 비밀번호를 설정한다.
* processData
    * 서버에서 받은 데이터를 자동으로 쿼리 문자열로 변환할지 여부를 설정할 수 있다.
* scriptCharset
    * 서버와 script의 character set 이 다르다면 설정해야한다.
* success
    * 통신이 성공하면 호출되는 함수를
* statusCode
    * 특정 state Code 에서 bind 될 event를 설정한다.
* timeout
    * 제한시간을 설정한다.
* type
    * method 옵션의 또다른 이름.
* username
    * 인증이 필요한 http 통신에서 사용자를 설정한다.
* xhr
    * XMLHttpRequest 나 ActiveXObject 가 만들어질 때 실행되는 callback 함수이다.