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 |