본문 바로가기

녕's BigData/JavaScript

[javaScript] XMLHttpRequest, Ajax

 

 

 

 

 

 

 

 

XMLHttpRequest(xhr)

 

> 자바스크립트가 Ajax를 사용할 때 사용하는 객체

 

 

 

 

XMLHttpRequest 객체

 

> XMLHttpRequest 객체는 빈 편지지와 같음

> 빈 편지지에는 수취인, 배송방식, 내용물을 넣을 수 있음

> XMLHttpRequest 생성자 함수로 XMLHttpRequest 객체를 만듬

> XMLHttpRequest 객체의 open() 메서드로 편지지의 전송 위치와 방식을 지정

 

ex)

var request = new XMLHttpRequest();

request.open(전송 방식, 경로, 비동기 사용 여부)

 

 

 

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

 

 

 

request확인

 

> XMLHttpRequest 객체 코드를 작성한 html 파일 열기

> F12 > Network

> 아직 data.html이 연결되지 않음

 

 

 

 

 

data.html

 

아파치 webapps폴더 내 폴더 생성 > txt파일 새로만들기 > data.html로 변경

> 우클릭 > 에디터프로그램(ex. Notepad++)로 열기 > 코드 작성

 

아파치 bin > startup.bat > url 창에 localhost :8081/생성한 폴더/data.html 입력

 

 

 

 

 

request 재확인

 

> webapps 내에 생성한 폴더 안에 XMLHttpRequest 객체 복붙

> F12 >Network

> data.html 연결

 

 

 

 

 

 

 

 

 

 

 

참고