기억의 DataBase

Ajax 본문

JavaScript

Ajax

Zester; 2019. 3. 15. 17:34
  • Ajax

동기식(synchronous)

비동기식(Asynchronous)

비동기식(Asynchronous)으로 서버로부터 Data를 가지고 오는 기술
전체 페이지를 갱신하지 않고, 필요한 부분만 변경이 가능해짐

  • JSON 
Ajax를 위한 대표적인 Data 포맷



네트워크 상으로 객체(Object)를 주고 받을 수는 없으므로, 문자열(String)을 주고 받게 되는데
이러한 문자열을 JSON Object로 변환( JSON.parse() )하여서 사용 

  • XMLHttpRequest
Ajax 통신을 위해 사용하는 API


  1. XMLHttpRequest 객체.open("전송 방식", "URL", "True(비동기식/기본값) or False(동기식/비추천)");
  2. XMLHttpRequest 객체.send();
  3. load 이벤트 발생(전체 페이지의 resource를 다 load한 상태)
  4. 지정한 callBack 함수가 실행됨

 oReq.responseText로 응답결과(String)를 받아온 후 JSON 형태로 변환함 

  • $.ajax
제이쿼리 방식으로 XMLHttpRequest 사용을 좀 더 쓰기쉽게 추상화한 것
(실무에서는 대부분 제이쿼리로 ajax를 사용)


CDN 방식으로 제이쿼리를 추가할 때는 <head> 태그안에 <script>를 추가해줘야 함

위의 방식을 제이쿼리를 활용한 ajax로 바꾼 것
open(), send()의 과정을 좀 더 직관적으로 바꿈

response는 서버에서 비동기식으로 받아온 Data를 의미하는 것으로 
이름은 임의대로 가능(위 코드의 oReq.responseText와 같은 Data) 

참조 : http://huns.me/development/1291 
Ajax와 CORS에 대한 자세한 설명 링크(네이버 Front 개발자 김코딩님 Blog)
저작자표시

'JavaScript' 카테고리의 다른 글

Event Bubbling  (0) 2019.03.12
DomContentLoaded와 Load  (0) 2019.03.12
DOM Node 조작하기  (0) 2019.03.05
JavaScript 객체  (0) 2019.02.27
JavaScript 배열  (0) 2019.02.26
'JavaScript' Related Articles more
Comments