XHR/Ajax

1. Ajax 통신을 배워보자!
NHN NEXT
ELLEN SEON (선승현)
*본 슬라이드는 NHNNEXT의 윤지수 교수님의 슬라이드를 기본으로 만들었습니다.*

2. 이 탭을 눌렀어요!

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

4. 바뀌어야 할 정보만
받아오니
효율이 좋군!

5. 어떻게 이렇게 하지?

6. XHR을 이용해요!

7. XHR
XMLHTTPRequest
: HTTP 요청을 할 수 있는 객체

8. 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)
//결과를
파싱한다.

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

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

11. false = 동기적 | 집착
: 왜 답장(응답)이 안오지? 불안해서 아무것도 못하겠어! :(
true = 비동기적 | 쿨함
: 답장(응답) 안오면 다른거 하면서 기다리지 뭐 :)

12. false = 동기적 | 집착
: 왜 답장(응답)이 안오지? 불안해서 아무것도 못하겠어! :(
true = 비동기적 | 쿨함
: 답장(응답) 안오면 다른거 하면서 기다리지 뭐 :)
; AJAX 통신Asynchronous Javascript And XML

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

14. 에러남ㅠㅠㅠㅠㅠ

15. 쿨녀: 다른거 하면서 기다리다가
스마트폰이 ‘카톡’ 소리내면 확인하자
Ajax: 다른거 하면서 기다리다가
콜백함수가 ‘응답왔음’ 하면 처리하자

16. 아,
비동기 콜백함수가 없었구나!

17. 비동기 콜백함수 어떻게 쓰지?
(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)
//
응답데이터를
파싱한다.
}
})();

18. http://codepen.io/nigayo/pen/pwfzl?editors=001
#Console을 확인하고,
수정해서 정상적으로 동작하게 해보세요 :)
정상이면 아래처럼 나와요!
*본 실습은 NHNNEXT의 윤지수 교수님의 실습을 이용하였습니다.*