20 XMLHttpRequest.

Presentation on theme: "20 XMLHttpRequest."— Presentation transcript:

1 20 XMLHttpRequest

2 20.1 XMLHttpRequest 객체 XMLHttpRequest XMLHttpRequest 객체
XMLHttpRequest는 자바스크립트가 Ajax를 사용할 때 사용하는 객체 간단하게 xhr 이라고 부른다 XMLHttpRequest 객체 프로젝트의 public 폴더의 index.html 파일에 코드를 입력 XMLHttpRequest 생성자 함수로 XMLHttpRequest 객체를 만듬

3 20.1 XMLHttpRequest 객체 XMLHttpRequest 객체 XMLHttpRequest 객체는 빈 편지지와 같음
빈 편지지에는 수취인과 배송 방식, 내용물을 넣을 수 있음 XMLHttpRequest 객체의 open ( ) 메서드로 편지지의 전송 위치와 방 식을 지정 open ( ) 메서드의 형태는 다음과 같음

4 20.1 XMLHttpRequest 객체 XMLHttpRequest 객체 open ( ) 메서드를 사용한 간단한 편지지

5 20.1 XMLHttpRequest 객체 XMLHttpRequest 객체
코드 20-4는 send ( ) 메서드와 responseText 속성으로 Ajax를 수행하 고 Ajax 응답을 출력

6 20.1 XMLHttpRequest 객체 XMLHttpRequest 객체
크롬의 요소 검사로 살펴보면 이전에 살펴보았던 네이버 SE처럼 동적 인 요청과 응답을 확인할 수 있음

7 20.1 XMLHttpRequest 객체 XMLHttpRequest 객체 Ajax 요청을 활용한 동적 요소 생성

8 20.2 생성 생성 앞 절의 예제는 인터넷 익스플로러 6 이하에서 동작하지 않음 createRequest( ) 함수 생성

9 20.2 생성 생성 createRequest( ) 함수 예외 처리

10 20.2 생성 생성 createRequest( ) 함수

11 20.2 생성 생성 모든 브라우저에서 동작하는 XMLHttpRequest 객체

12 20.2 생성 생성 아주 과거의 인터넷 익스플로러까지 지원하는 createRequest( ) 함수

13 20.3 동기 방식과 비동기 방식 동기 방식과 비동기 방식 동기 방식일 때 send( ) 메서드에 소비되는 시간 측정

14 20.3 동기 방식과 비동기 방식 동기 방식과 비동기 방식 open ( ) 메서드의 세 번째 매개변수를 true로 바꾸고 실행

15 20.3 동기 방식과 비동기 방식 동기 방식과 비동기 방식
비동기 방식을 사용하면 데이터를 받는 동안에도 코드를 지속적으로 실행하므로 send ( ) 메서드에서 0밀리 초에서 1밀리 초 이상 걸리지 않음 자바스크립트는 데이터가 배달된 것을 onreadystatechange 이벤트로 알 수 있음

16 20.3 동기 방식과 비동기 방식 동기 방식과 비동기 방식 프로젝트를 실행하면 경고창에 숫자를 출력
이 숫자는 XMLHttpRequest 객체의 readyState 속성 readyState 속성은 표 20-1과 같음

17 20.3 동기 방식과 비동기 방식 동기 방식과 비동기 방식
Ajax로 모든 데이터를 전송받는 시점은 readyState 속성이 4일 때 이때 코드 20-13처럼 문서 객체와 관련된 처리

18 20.3 동기 방식과 비동기 방식 동기 방식과 비동기 방식
코드 20-14처럼 XMLHttpRequest 객체의 status 속성이 200일 때 원하 는 코드를 처리

19 20.3 동기 방식과 비동기 방식 동기 방식과 비동기 방식
status 속성과 관련된 내용은 HTTP Status Code 관련 문서를 참고

20 20.4 데이터 요청과 조작 JSON 요청과 조작 JSON 문자열을 자바스크립트 객체로 변환
JSON이 이미 자바스크립트 형태의 문자열이므로 코드 20-15처럼 eval ( ) 함수로 자바스크립트 객체로 변환할 수 있음

21 20.4 데이터 요청과 조작 JSON 요청과 조작 JSON 조작

22 20.4 데이터 요청과 조작 XML 요청과 조작 XML 응답

23 20.4 데이터 요청과 조작 XML 요청과 조작 DOM 속성 DOM 메서드

24 20.4 데이터 요청과 조작 XML 요청과 조작 getElementsByTagName( ) 메서드

25 20.4 데이터 요청과 조작 XML 요청과 조작 XML 조작

26 20.5 데이터 요청 방식 GET 요청

27 20.5 데이터 요청 방식 POST 요청

28 20.5 데이터 요청 방식 PUT 요청

29 20.5 데이터 요청 방식 DELETE 요청

30