AJAX.

starlikedh
|2021. 9. 4. 19:11

Ajax란 Asynchronous JavaScript and XML의 약자.
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나.
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음.

Ajax의 장점으로는,
웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있고,
웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음.

주로 사용했던 건 jquery ajax인데 대략적인 기본 형태는 아래와 같이 쓸 수 있다.
url에다가는 연결해 줄 경로를 적어주고 타입에다가는 get방식인지 post 방식인지 적어주면 된다.

dataType은 서버 측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인지인데,
xml, jsom, script, html방식이 가능하다고 한다.

success 부분은 ajax 통신 성공 시 서버의 응답 데이터가 클라이언트에게 도착하면 자동을 실행되는 콜백 함수,
error 부분은 통신 실패 시 실행되는 콜백 함수라 생각하면 된다. 그럼 Ajax에 대한 설명은 여기서 끄읕.
* 아래 console.log에 찍히는 순서는 각자 잘 생각해보기!ㅎㅎㅎㅎ

function getDetail() {
        var deferred = $.Deferred();

        $.ajax(
            {
                url: "~~~~~",
                type: "get", // or post
                dataType: "json",
                data: "",
                success: function (data) {
                    deferred.resolve(data)
                },
                error: function (request, status, error) {

                }
            }
        );

        return deferred;
    }


    function aaa() {
        console.log(111);

        getDetail().then(function (data) {

            console.log(222);
        });

        console.log(333);
    }

    aaa();

 

'Frontend' 카테고리의 다른 글

JS Null Check.  (0) 2021.11.27
Lodash란?  (0) 2021.10.31
jQuery Event.  (0) 2021.10.02
CSS Display vs Visibility  (0) 2021.09.22
jQuery attr(), prop(), val(), text()  (0) 2021.09.18