1. XHR

3.
Ajax

4. 통신

6. 목표
AJAX라는

7. 걸

8. 이용해서

9. 좀더

10. 동적인

11. 웹화면을

12. 만드는

13. 방법을

14. 안다.

15. 새로고침

16. 없이

18.
화면

19. 갱신하기

20. 사용자

21. 관점에서의

22. 웹의

23. 동작
웹은,

24. 사용자가

25. 필요로

26. 하는

27. 정보를

28. 제공할

29. 수

30. 있어야

31. 한다.
c를

32. 클릭해요! c

33. 페이지를

34. 보여줘요
a.html
b.html
c.html
c.html

35. 페이지를

36. 다시

37. 불러와야

38. 한다
Browser에서

39. 필요한

40. 파일을

41. 요청하게

42. 되면

43. 서버는

44. 그

45. 파일

46. 또는

47. 데이터를

48. 제공.

49.
이

50. 과정에서

51. 항상

52. 새로고침이

53. 일어남
browser Server
main.html
c.html

54. c.html

55. 주세요
/main
a.html
b.html
c.html

56. c.html

57. 보내주기
‘새로고침’

59. 발생

60. 부분적인

61. 데이터만

62. 변경이

63. 일어나는

64. 경우를

65. 생
각해보자.
회원가입을

66. 할

67. 때,

68.
구글에서

69. 검색을

70. 하려고

71. 할

72. 때,

73.
네이버

74. 메인화면에서

75. 로그인을

76. 하려고

77. 할

78. 때,

80.
영화

81. 예매를

82. 하려고

83. 할

84. 때,

85.
Tab

86. UI를

87. 눌러서

88. 새로운

89. 내용을

90. 보려고

91. 할

92. 때..

93.
....
모두

94. 서버에

95. 요청을

96. 하고

97. 응답받아야

98. 한다.

99. 문제는,

100.
화면의

101. 변화가

102. 필요하다면

103. 새로고침이

104. 필요로

105. 하다는

106. 점..

107.
!
‘좀더

108. 효과적인

109. 화면

110. 갱신

111. 방법은..?’

112. 그래서

113. 브라우저

114. 제조사들은,

115.
화면의

116. ‘새로고침’없이

117. 응답

118. 받을

119. 수

120. 있는

121.
새로운

122. 요청방식을

123. 만들었다.

124.
!
XHR

126. browser Server
main.html
main.html
새로운

127. 글

128. 입력
새로운 글을 DB에보관하고,!
!
사용자화면에도 보여주자
새로운

129. 글을

130. 화면에

131. 보여주기

132. XHR ( XMLHTTPRequest )
XMLHTTPRequest

133. 라는

134. 객체(object)는

135. 자바스크립트

136. 프로그래밍으로

138.
HTTP요청을

139. 할

140. 수

141. 있다.
var request = new XMLHttpRequest();

142. XMLHTTPRequest
XMLHTTPRequest

143. 객체는

144. open,

145. send와

146. 같은

147. 요청

148. 메서드를

149. 지원하며,

151.
responseText

152. 속성을

153. 이용해서

154. 응답

155. 값을

156. 확인할

157. 수

158. 있다
var request = new XMLHttpRequest();
request.open(GET , ../response.txt , false);
request.send(null);
console.log(request.responseText)
요청을

159. 위한

160. 객체를

161. 만들고,

163.
요청

164. 형태와

165. 요청

166. 데이터를

167. 지정한

168. 후,

170.
요청을

171. 보낸다.

172.
결과를

173. 받는다.

175.
response.txt 내용
jisu,22
ronaldo,29
next,1

176. http://codepen.io/nigayo/pen/EjbcK.js

178. 를

179. 아래처럼

180. 생성.

181.
{

183. title

184. :

185. new

186. stand,

188. newsCount

190. :

191. 10,

193. newsTtitle

194. :

195. [choson,

196. munhwa,

197. edaily]

198.
}

199.
!
!
XHR코드

200.
var

201. url

202. =

203. http://codepen.io/nigayo/pen/EjbcK.js;

204.
var

205. request

206. =

207. new

208. XMLHttpRequest();

209.
request.open(GET

210. ,

211. url

212. ,

213. false);

214.
request.send(null);

215.
result

216. =

217. request.responseText;

218.
alert(result);

219.
//이하

220. 제목영역의

221. 타이틀을

222. 바꾸는

223. 코드

224. 추가.

225. !
var

226. url

227. =

228. http://codepen.io/nigayo/pen/EjbcK.js;

229.
var

230. request

231. =

232. new

233. XMLHttpRequest();

234.
request.open(GET

235. ,

236. url

237. ,

238. false);

239.
request.send(null);

240.
result

241. =

242. request.responseText;

243.
sNewTitle

244. =

245. result.title;

248. //오류..

249.
alert(typeof

250. result)

252.
!
result는 어떤 타입인가?

253. var

254. url

255. =

256. http://codepen.io/nigayo/pen/EjbcK.js;

257.
var

258. request

259. =

260. new

261. XMLHttpRequest();

262.
request.open(GET

263. ,

264. url

265. ,

266. false);

267.
request.send(null);

268.
result

269. =

270. request.responseText;

271.
result

272. =

273. JSON.parse(result);

274.
sNewTitle

275. =

276. result.title;

279.
alert(typeof

280. result)

281.
result는 어떤 타입인가?
string - Object 객체

282. 함수로 담고,
!
(function()

283. {

287. var

288. url

289. =

290. http://codepen.io/nigayo/pen/EjbcK.js;

293. var

294. request

295. =

296. new

297. XMLHttpRequest();

300. request.open(GET

301. ,

302. url

303. ,

304. false);

307. request.send(null);

310. result

311. =

312. request.responseText;

315. result

316. =

317. JSON.parse(result);

320. console.log(“new

321. title

322. is

323. “

324. ,

325. result.title);

328. //

329. do

330. Something…⋯.

331.
})();

332. 추가 코드를 작성
!
(function()

333. {

337. var

338. url

339. =

340. http://codepen.io/nigayo/pen/EjbcK.js;

343. var

344. request

345. =

346. new

347. XMLHttpRequest();

350. request.open(GET

351. ,

352. url

353. ,

354. false);

357. request.send(null);

360. result

361. =

362. request.responseText;

365. result

366. =

367. JSON.parse(result);

370. console.log(“new

371. title

372. is

373. “

374. ,

375. result.title);

378. //

379. do

380. Something…⋯.

381.
})();

382. 이

383. 부분이

384. 오래

385. 걸린다면?
!
(function()

386. {

390. var

391. url

392. =

393. http://codepen.io/nigayo/pen/EjbcK.js;

396. var

397. request

398. =

399. new

400. XMLHttpRequest();

403. request.open(GET

404. ,

405. url

406. ,

407. false);

410. request.send(null);

413. result

414. =

415. request.responseText;

418. result

419. =

420. JSON.parse(result);

423. console.log(“new

424. title

425. is

426. “

427. ,

428. result.title);

431. //

432. do

433. Something…⋯.

434.
})();

435. 동기적(synchronous)

436. 비동기적(Asynchronous)
데이터를

437. 요청한다.
응답이

438. 올

439. 때

440. 까지

441. 기다린다.
아직도…⋯
응답

442. 도착!
응답과

443. 관련없는

445.
다음

446. 일을

447. 한다.
데이터를

448. 요청한다.
응답과

449. 관련없는

451.
다음

452. 일을

453. 한다.
응답과

454. 관련

455. 있는

456. 다음

457. 액션을

458. 한다.
(응답이…⋯아직도

459. 안왔다)
응답과

460. 관련

461. 있는

462. 다음

463. 액션을

464. 한다.
응답

465. 도착!

466. 비동기

467. 통신

468. =

470. Ajax

471. 통신
Asynchronous

472. Javascript

473. And

474. XML

475. 비동기로

476. 데이터를

477. 보내고

478. 받는

479. 방법은?

480.
var request = new XMLHttpRequest();
request.open(GET , ../response.txt , true);
request.send(null);
console.log(request.responseText)

481. 뭔가

482. 오류가

483. 난다…⋯

484. 뭔가

485. 오류가

486. 난다…⋯
비동기

487. 상황에서는

488.
callback함수가

489. 대기하다가,응답이

490. 제대로

491. 오는

492. 순간(이벤트)에

493. 처리해야

494. 함.

496. 뭔가

497. 오류가

498. 난다…⋯
비동기

499. 상황에서는

500.
callback함수가

501. 대기하다가,응답이

502. 오는

503. 순간을

504. 캐치해서

505. 처리해야

506. 함.

507.
이런

508. 거랑

509. 비슷하게.

510.
addEventListener(‘click’,function(){..},false);

513. //클릭이

514. 되면

515. 실행되는

516. 함수

517.
setInterval(function(){…⋯}

518. ,

519. 1000);

543. //1초가

544. 지날때마다

545. 실행되는

546. 함수

547. XHR통신에서

548. 사용되는

550.
XMLHttpRequest

551. 객체에서

552. 제공하는

553. 적절한

554. 이벤트를

555. 찾아서

556. 적용
해보자.

558. 비동기

559. 콜백함수

560. 정의
(function() {
var url = http://codepen.io/nigayo/pen/EjbcK.js;
var request = new XMLHttpRequest();
request.open(GET , url , true);
request.send(null);
// readyState 값이 변경될 때마다 이 콜백함수가 불린다.
request.onreadystatechange = function() {
}
})();
}
자세한

561. 상태

562. 값

564. :

565. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

566. 콜백함수에서의

567. 정상상황

568. 체크
(function() {
var url = http://codepen.io/nigayo/pen/EjbcK.js;
var request = new XMLHttpRequest();
request.open(GET , url , true);
request.send(null);
request.onreadystatechange = function() {
// 응답이 도착했고, 정상적인 응답이라면, 응답데이터를 파싱하기 시작한다.
if(request.readyState === 4 request.status === 200) {
result = request.responseText;
result = JSON.parse(result);
console.log(new title is , result.title);
}
}
})();
}
자세한

569. 상태

570. 값

572. :

573. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

574. 숙제1.

576.
아래코드는

577. 오류가

578. 발생합니다.(console탭에서

579. 확인)

580.
왜

581. 오류가

582. 나는지

583. 자세히

584. 서술하고,

585. 정상적으로

586. 동작가능하게

587. 코드를

588. 수정하세요.

589.
!
정상적으로

590. 수정이

591. 되면

592. console창에

593. 아래와

594. 같이

595. 출력되야

596. 합니다.

597.
!
new

598. title

599. is

601. new

602. stand

603.
XHR

604. 통신종료[RESULT]

607. Object

608. {title:

609. new

610. stand,

611. newsCount:

612. 10,

613. newsTtitle:

614. Array[3]}

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

616. End
;-D