IT공부블로그

AJAX document 정리 본문

웹 개발/jQuery || javascript

AJAX document 정리

메_리 2019. 3. 29. 17:18

jQuery.ajax() API

http://api.jquery.com/jquery.ajax/

 

jQuery.ajax() | jQuery API Documentation

Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available

api.jquery.com

 

● 형식

    1. $.ajax(url[, settings]);

    2. $.ajax([settings]);

 

    1에서 url은 String type이고, 이를 생략하고 2와 같이 작성한 후 url: "url"과 같이 key-value 형식으로 기입해줘도 된다.

    2는 ajax에 필요한 속성들을 key-value 형식의 Set 객체로 작성하는 방식이다.

 

● settings

    1. accepts / converters / dataType

        ▶ accepts : 요청이 끝난 후 서버에서 응답할 때 리턴되는 body의 형식을 지정하는 속성. MIME type으로 작성해줘야 한다.

accepts: {mycustom: "application/xml"},

            이렇게 작성하면 http request header의 Accept 속성에는 "application/xml, */*"라는 값을 갖게 한다.

            mycustom이라는 이름은 얼마든지 바꿀 수 있고, 속성의 값은 무조건 MIME여야한다.

 

        ▶ converters : 서버에서 보내준 데이터를 success 등의 속성에서 받기 전에 인터셉트할 수 있는 속성이다.

converters: {

    'text mycustom': function(jqXHR){

        return JSON.parse(jqXHR);

    },

    'html mycustom': function(jqXHR){

        return jqXHR;

    }

},

            위와 같이 작성하여 속성으로 사용할 수 있다.

            accepts와 converters는 세트로 같이 사용해야 한다. custom type을 지정하고나서 converters에 인터셉트 내용을 기술하지 않으면 ajax가 제대로 작동하지 않는다.

            application/xml 로 accept를 지정했는데 */*도 accept 속성에 포함되어 있다면, converters에 text, html 부분에는 모든 dataType을 대입하여 mycustom으로 변환할 수 있다.

            이때, text가 가장 우선순위가 높아 무조건 JSON.parse(data)가 리턴되게 된다.

            또 dataType을 어떤것을 넣느냐에 따라 data의 type이 바뀌는데, text 대신 json을 대입하면 function의 파라미터로 오는 data는 json 객체가 되고, 나머지 type을 대입하면 string이 된다.

 

        ▶ dataType : "mycustom" 으로 지정해줘야 한다.

            만일 accepts 속성을 따로 지정하지 않았을 경우에도, 응답데이터로 예상되는 타입을 명시해줘야 한다.

 

    2. async : {default:true}. 스크립트의 요청을 동기화 하지 않고 실행할 것인지를 지정하는 속성.

       true가 비동기 방식, false가 동기 방식이다. 속성을 지정하지 않거나 true로 지정할 경우, ajax 실행되는 시점을 제어할 수 없어서 다른 메소드에서 오류가 발생할 수 있다.

        ※ 동기화란 위 그림1 처럼 서버로 데이터를 요청하고 응답이 오는 시간동안 작업을 멈추고 기다리는 것을 뜻합니다. (http://www.nextree.co.kr/p9521/)

 

    3. beforeSend : function (jqXHR, settings){ }

       리퀘스트를 보내지 전에 실행되는 콜백 함수를 지정할 수 있다.

       이 때, function 안에서 jqXHR를 콘솔로 찍어보면 responseJSON 등 ajax가 끝나고 나서 얻을 수 있는 값들을 볼 수 있는데,

       이거는 통신이 끝나고 나서 jqXHR 객체가 갖게된 값이 함께 출력되기 때문이다.(혼동 ㄴㄴ)

       false; 또는 jqXHR.abort(); 를 리턴하면 리퀘스트가 취소된다.

 

    4. cache : true(default) / false

       캐시를 적용할 것인지 말것인지를 지정하는 속성. 

        It works by appending "_={timestamp}" to the GET parameters. => GET 방식일 때 유효하며 URL 로 파라미터를 넘길 때 &_=현재시간 도 함께 넘겨 URL을 항상 다르게 적용함으로써 캐시를 방지한다.

 

    5. complete : function (jqXHR, textStatus){ }

       success나 error 가 호출 된 이후에 호출되어 특정기능을 수행하는 콜백함수를 지정한다.

       textStatus >  "success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror"

 

    6. contentType :  application/x-www-form-urlencoded; charset=UTF-8 (default)

       default 타입이 가장 흔하게 많이 적용되는 타입이다. 또 charset=UTF-8은 W3C에서 권장하는 방식이다.

 

    7. context : Object

       ajax에서 사용하는 모든 콜백 함수가 this라는 이름으로 공통으로 사용할 수 있는 객체.

       default는 $.ajax([settings]); 의 settings 객체와 $.ajaxSettings 로 정의되어있는 모든 속성을 merge한 객체이다.

       만약에 document.body로 지정하면 <body>~</body> 를 모든 콜백 함수에서 사용할 수 있다.

 

    8. crossDomain : false(default) / true

       ※ cross domain :

          자원을 요청할 때 http://domain1/do1 , http://domain2/do3 등이 있다면 같은 domain 안에서만 리소스를 가져올 수 있도록 제한하는 정책이 W3C에 있다.(동일 근원 정책. SOP, Same Origin Policy)

          하지만 차츰 다른 도메인에서도 리소스를 가져와야 하는 상황이 발생하여 이를 허용할 수 있도록 새로운 정책을 추가하였고 이것이 cross domain이다.

          (https://adrenal.tistory.com/16 에서 자세하게 설명되어있음)

 

    9. data : Object or String or Array

       ajax url에 파라미터로 보낼 data 들이다.

       Object는 반드시 key-value set 객체여야 한다. value 부분이 array일 경우 동일한 key를 갖도록 jQuery가 serialize 해준다.

       String이 아닌 data는 String으로 변환한 뒤 url에 붙어서 실행됨.

 

    10. dataFilter : function(String data, String type){ }

        success 콜백함수가 실행되기 전에 data를 가공하기 위해서 사용하는 콜백함수를 지정한다.

        converters 속성도 ajax 통신으로 전달된 data를 가공할 수는 있지만 사용 방법과 사용 의도가 다르다.

        data 파라미터는 무조건 String으로 전달되며 콜백함수 내에서 가공을 하려고 하는 경우에는 JSON.parse를 사용하여 객체로 변환하거나 해야한다.

        리턴되는 data는 무조건 파라미터와 동일한 String type이어야한다. 

 

    11. dataType : "string"

        ajax를 통해 리턴받을 data의 타입을 작성한다. 지정하지 않는 경우 response header의 Content-type에서 추론하여 매칭한다.

        

  • "xml": XML을 리턴

  • "html": HTML 데이터가 string type으로 리턴됨. document에 바로 적용할 수 있도록 script tag도 포함되어있음.

  • "script": javascript data가 string type으로 리턴됨. cache를 피하기 위해 _= 파리미터를 포함한 경우 사용할 수 없으므로 cache 속성은 true로 설정해야 한다. 

    • Note: remote-domain 방식의 요청에서는 POST 방식이 GET 방식으로 변환된다.

  • "json": JSON DATA가 javascript 객체로 리턴됨. json이 cross-domain 방식으로 요청할 때 콜백 함수가 ?callback=? 파라미터를 포함한다면, JSONP를 이용하여 이를 수행할 것이다.(jsonp 속성이 false로 지정되어 있지 않을 경우) JSON 파싱은 매우 엄격해서 조금만 형식에 어긋나도 에러를 발생한다. jQuery 1.9에서는 빈 객체도 파싱되지 않기 때문에서 서버에서 반드시 null이나 {} 형태로 리턴해야 한다.

  • "jsonp": 이 타입을 사용하기 위해서는 url에 ?callback=? 파라미터를 추가해야 한다. cache 속성을 true로 하여 url에 _= 파라미터를 포함하지 않도록 해야 사용할 수 있다.

  • "text": A plain text string.

 

    12. error : function(jqXHR, String textStatus, String errorThrown){ }

        * textStatus > timeout, error, abort, parsererror

        request가 실패했을 때 작동하는 콜백함수를 지정. cross-domain 요청이나 cross-domain의 JSONP 요청에는 작동하지 않는다.

 

    13. global : true(default) / false

        지역함수(콜백함수) <-> 전역함수

        나중에 더 읽어보고 함 해보기.(http://www.nextree.co.kr/p10308/)

 

    14. headers : key-value 쌍을 갖는 object

        XMLHttpRequest 객체는 항상 header에 포함되지만, 여기서 그 내용을 수정할 수 있다.

        beforeSend 함수를 사용할 경우 header에 있는 내용으로 overwritten 된다.(key가 동일할 경우에만? 아니면 아예 header자체가?

 

    15. ifModified ; false(default) / true

        마지막 request로부터 reponse가 변경되었을 경우 리퀘스트를 성공시킬 수 있도록 허락한다. 마지막으로 변경한 header를 체크하는 것이며, 이것을 false로 설정하면 header를 무시한다.

 

    16. isLocal : false (default) / true

        현재 환경을 local로 인식하도록 한다.(jQuery가 이것을 default로 인식하지 않더라도). file, *-extension, widget 프로토콜은 local로 인식한다. isLocal 속성을 변경해야 하는 경우, $.ajaxSetup() 함수로 한 번만 설정하도록 권고되고 있다.

 

    17. jsonp : String or Boolean

        callback 함수를 jsonp 객체로 override 한다. 이것을 사용하려면 url에 callback=? 이라는 query String을 포함해야한다. callback 함수를 덮어 씌울 객체의 이름은 jQuery가 랜덤으로 명명한다. jsonp=false인 경우 jQuery가 ?callback 파라미터를 url에 추가하는 것 또는 =? 값을 번역하는 시도를 막는다. 이 경우 jsonpCallBack 속성을 지정해야 한다. request의 target이 되는 도메인을 신뢰할 수 없다면 jsonp 를 false로 설정하는 것을 권장한다.

 

    18. jsonpCallBack : String or Function()

        jQuery는 요청, callback과 에러를 더 쉽게 다루기 위해서 jsonp의 이름을 생성하는 것을 더 선호한다. GET request에서 더 나은 브라우저 caching을 가능하게 하기 위해서는 callback을 지정하길 원할 수 있다. jQuery 1.5 부터는 함수에 return value가 있는 경우 jsonCallBack에 함수를 사용할 수 있다.

 

    19. method : GET (default) or POST, PUT

        request에 사용하는 HTTP method.

 

    20. mimeType : String

        XHR 객체의 mimeType을 덮어씌울 타입을 지정.

 

    21. password : String

        응답의 XMLHttpRequest 객체에서 HTTP 인증에 접근하기 위한 암호. username 속성도 있음.

 

    22. processdata : true(default) / false

        request로 보낸 data를 query string으로 변환할 것인지를 지정하는 속성.

        html의 DOM document를 보내거나 non-processed data를 보내는 경우 이 속성을 false로 지정한다.

 

    23. scriptCharset : String

        script 전송이 사용될 때만 적용된다. (jsonp형태의 cross-domain 또는 dataType이 script이면서 GET 방식인 경우) 

 

    24. statusCode : {}(default) or plainObject

        response에 포함된 동일한 코드의 statusCode와 함수를 매칭하여 실행되도록 지정하는 속성.

        이 속성에 지정되지 않은 statusCode에 해당하는 함수는 실행되지 않는다.

        success와 error 속성이 각각 지정되있는 경우 실행 순서는??

 

    25. success : function(data, textStatus, jqXHR)

        ajax 통신이 성공했을 때 실행되는 callback 함수를 지정한다.

 

    26. timeout : number(milli seconds)

        0으로 지정하면 timeout이 없다는 뜻이다. $.ajaxSetup()의 global timeout에 의해 override 된다.

        $.ajax가 호출된 시점부터 시간을 잰다.

       다른 여러 요청이 진행 중이고 브라우저에서 사용할 수있는 연결이없는 경우 요청을 보내기 전에 시간 초과 될 수 있다.

 

    27. traditional : false(default) / true

        true로 설정하면 parameter를 serialize 해서 보낼 수 있다. 배열 객체를 parameter로 보내고 싶은 경우 이 속성만 변경해주면 간단한데 이걸 놓치면 삽질 많이한다고 한다.

 

    28. type : GET (default) / POST, PUT

        method의 별칭. 1.9.0 부터는 type을 사용해야한다.

 

    29. url : default = current page

        request가 전달 될 URL을 string 타입으로 지정해준다.

 

    30. username : 응답의 XMLHttpRequest 객체에서 HTTP 인증에 접근하기 위한 암호. password 속성도 있음.

 

    31. xhr : IE에서는 ActiveObject이고, 그 밖에서는 XMLHttpRequest 객체이다. function(){}

        xhr 객체르르 생성하는 콜백함수이다.

        콜백함수 내에서 progress bar 생성 등을 할 수 있다.

 

    32. xhrFields : key-value 쌍을 이루는 값들의 집합을 갖는 변수.

        어떻게 쓰는지 잘 모르겠음.

 

 

 

저작자표시 비영리
Comments