Ajax 통신을 배워보자!

NHN NEXT ELLEN SEON (선승현)

*본 슬라이드는 NHNNEXT의 윤지수 교수님의 슬라이드를 기본으로 만들었습니다.*

이 탭을 눌렀어요!

새로고침 안했는데, 엄청 빠르게 이 부분만 바뀌었어요!

바뀌어야 할 정보만 받아오니

효율이 좋군!

어떻게 이렇게 하지?

XHR을 이용해요!

XHRXMLHTTPRequest

: HTTP 요청을 할 수 있는 객체

XHR 어떻게 쓰지?

1.  var  request  =  new  XMLHttpRequest();  //요청을  위한  객체를  만들고 2.  request.open(“GET”  ,  “../response.txt”  ,  false);  //  요청  형태와  데이터를  지정하고 3.  request.send(null);  //요청을  보낸다.4.  result  =  request.responseText;  //결과를  받는다.5.  result  =  JSON.parse(result)  //결과를  파싱한다.

2.  request.open(“GET”  ,  “../response.txt”  ,  false);  //  요청  형태와  데이터를  지정하고

2.  request.open(“GET”  ,  “../response.txt”  ,  false);  //  요청  형태와  데이터를  지정하고

                      이게 뭘까?

false = 동기적 | 집착 : 왜 답장(응답)이 안오지? 불안해서 아무것도 못하겠어! :(

true = 비동기적 | 쿨함 : 답장(응답) 안오면 다른거 하면서 기다리지 뭐 :)

false = 동기적 | 집착 : 왜 답장(응답)이 안오지? 불안해서 아무것도 못하겠어! :(

true = 비동기적 | 쿨함 : 답장(응답) 안오면 다른거 하면서 기다리지 뭐 :)

; AJAX 통신Asynchronous Javascript And XML

2.  request.open(“GET”  ,  “../response.txt”  ,  true);  //  요청  형태와  데이터를  지정하고

                      이렇게 하면 될까?

에러남ㅠㅠㅠㅠㅠ

쿨녀: 다른거 하면서 기다리다가 스마트폰이 ‘카톡’ 소리내면 확인하자

Ajax: 다른거 하면서 기다리다가 콜백함수가 ‘응답왔음’ 하면 처리하자

아,

비동기 콜백함수가 없었구나!

비동기 콜백함수 어떻게 쓰지?

(function()  {  

1.  var  request  =  new  XMLHttpRequest();  //요청을  위한  객체를  만들고2.  request.open(“GET”  ,  “../response.txt”  ,  true);  //  요청  형태와  데이터를  지정하고 3.  request.send(null);  //요청을  보낸다.  

After  3.  request.onreadystatechange  =  function()  {  //readyState값이  변경  될  때마다  콜백함수가  불린다.      if(request.readyState  ===  4  &&  request.status  ===  200)  {}  //  응답이  정상이면            4.  result  =  request.responseText;            5.  result  =  JSON.parse(result)  //  응답데이터를  파싱한다.      }})();

http://codepen.io/nigayo/pen/pwfzl?editors=001

#Console을 확인하고, 수정해서 정상적으로 동작하게 해보세요 :)

정상이면 아래처럼 나와요!

*본 실습은 NHNNEXT의 윤지수 교수님의 실습을 이용하였습니다.*