1. XMLHttpRequest 객체
- AJAX의 핵심은 XMLHttpRequest 객체입니다. 우선적으로 XMLHttpRequest 객체를 생성한 후 콜백 함수를 정의하고 XMLHttpRequest를 열어 서버에 요청을 보냅니다.
- 모든 최신 브라우저는 XMLHttpRequest 객체를 지원합니다. 웹서버와 데이터를 교환하는 데 사용하고, 전체 페이지를 다시 로드하지 않고, 웹페이지의 일부를 업데이트할 수 있습니다.
## XMLHttpRequest 객체 생성 구문
variable 변수명 = new XMLHttpRequest();
## 콜백함수 정의
//xhttp : 변수명
xhttp.onload = function() {
//응답이 준비되면 수행할 작업
}- 콜백함수는 다른 함수의 매개변수로 전달되는 함수입니다.
- 이 경우 콜백 함수에는 응답이 준비되었을 때 실행할 코드가 포함되어야 합니다.
## 요청 보내기
xhttp.open("REST API함수", "읽어올 파일경로",비동기여부);
xhttp.send();- 서버에 요청을 보내려면 XMLHttpReques객체의 open() 및 send() 메서드를 사용할 수 있습니다.
- 보안 상의 이유로 최신 브라우저는 도메인 간 액세스를 허용하지 않습니다.
- 즉, 로드하려는 웹페이지와 XML, JSON 등의 파일이 모두 동일한 서버에 있어야 합니다.
- open() 의 첫 매개변수는 REST API함수입니다. 보통 값을 많이 얻어오는 GET을 많이 사용합니다.
REST API 함수
| REST API함수 | 설명 | CRUD표현 | 주소입력방식 |
| POST | 데이터 등록 | Create | /test |
| GET | 데이터 조회 | Read | /test 또는 get/test/4 |
| PUT | 데이터 수정 | Update | /test/3 |
| DELETE | 데이터 제거 | Delete | /test/3 |
*** 이 외에도 [ PATCH ], [ HEAD ]와 같은 함수도 갖고 있습니다.
- 비동기 여부는 true / fasle 로 지정해 주면 됩니다.
## 예시 코드
//XMLHttpRequest 객체 생성
const xhttp = new XMLHttpRequest();
//콜백함수 정의
xhttp.onload = function() {
//여기에서 데이터 사용
}
//요청 보내기
xhttp.open("GET", "test.txt");
xhttp.send();
2. XMLHttpRequest 객체의 속성과 메서드
- XMLHttpRequest 객체도 역시 객체입니다. 모든 객체는 속성과 메서드를 갖고 있습니다.
1) 메서드
| 메서드 | 설명 |
| new XMLHttpRequest() | 새로운 XMLHttpRequest 객체를 생성 |
| abort() | 현재 요청을 취소 |
| getAllResponseHeaders() | header 정보를 반환 |
| getResponseHeader() | 특정 header 정보를 반환 |
| open(method, url, async, user, psw) | 요청을 지정 1. method : GET 혹은 POST 중 요청 타입을 지정 2. url : 파일 경로 작성 3. async : 비동기에 대한 true / false를 지정 4. user : 사용자 이름 지정(선택) 5. psw : 비밀번호 지정(선택) |
| send() | 서버에 요청을 보냄(GET 방식에서 사용됨) |
| send(string) | 서버에 요청을 보냄(POST 방식에서 사용됨) |
| setRequestHeader() | 전송할 header에 레이블/값 쌍으로 추가 |
2) 속성
| 속성 | 설명 |
| onload | 요청을 수신(load)할 때 호출할 함수를 정의 |
| onreadystatechange | readyState 속성이 변경될 때 호출할 함수를 정의 |
| readyState | XMLHttpRequest의 상태를 유지 0 : 초기화되지 않은 요청 1 : 서버 연결 설정됨 2 : 요청 접수 3 : 처리 요청 4 : 요청 완료 및 응답 준비 |
| responseText | 응답 데이터를 문자열로 반환 |
| responseXML | 응답 데이터를 XML데이터로 반환 |
| status | 요청 상태 번호를 반환 200 : OK 상태 403 : 금지 404 : 찾을 수 없음 |
| statusText | 요청 상태를 텍스트로 반환( OK 또는 Not Found 등 ) |
3) onload 속성
- 요청을 수신(load)할 때 호출할 함수를 정의합니다.
- 아래는 [ test.txt ]의 응답 데이터를 문서 객체에 반환하는 함수를 정의해 보겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX - Intro</title>
</head>
<body>
<button id="btn">텍스트변경</button>
<p id="test">텍스트가 변경됩니다!</p>
<script>
//문서객체 선택
const btn = document.getElementById('btn');
const test = document.getElementById('test');
function loadDoc(){
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
test.innerHTML = this.responseText;
}
xhttp.open("GET", "test.txt", true);
xhttp.send();
}
btn.addEventListener('click',loadDoc);
</script>
</body>
</html>
## 결과 보기
4) 다중 콜백 함수
- 웹사이트에 둘 이상의 AJAX 작업이 있는 경우 XMLHttpRequest 객체 실행을 위한 함수 하나와 각 AJAX 작업에 대한 콜백 함수를 하나씩 만들어야 합니다.
- 함수 호출에는 URL과 응답이 준비되었을 때 호출할 함수가 포함되어야 합니다.
## 코드 예시
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
//명령 작성
}
function myFunction2(xhttp) {
//명령 작성
}
5) onreadystatechange 속성
- readyState 속성은 XMLHttpRequest 의 상태를 보유합니다.
- 이 onreadystatechange 속성은 readyState 가 변경될 때 실행할 콜백 함수를 정의합니다. 변경될 때마다 호출됩니다.
- status 속성과 statusText 속성은 XMLHttpRequest 객체의 상태를 유지합니다.
- readyState 속성의 값이 4이고, status 속성의 값이 200이면 응답이 준비된 것입니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX - Intro</title>
</head>
<body>
<button id="btn">텍스트변경</button>
<p id="test">텍스트가 변경됩니다!</p>
<script>
//문서객체 선택
const btn = document.getElementById('btn');
const test = document.getElementById('test');
function loadDoc(){
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
test.innerHTML =
this.responseText;
}
};
xhttp.open("GET", "test.txt");
xhttp.send();
}
btn.addEventListener('click',loadDoc);
</script>
</body>
</html>- 이 onreadystatechange 이벤트는 readyState 가 한번 변경될 때마다 4번(1-4) 트리거 됩니다.
## 결과 보기
3. 서버 API데이터 가져와보기
- 서버에서의 데이터 통신이므로 jsonplaceholder사이트를 이용해 보겠습니다.
- jsonplaceholder사이트는 json데이터를 가져다 쓸 수 있게 해주는 무료 가짜 REST API입니다.
- 원래 타 사이트의 데이터는 크로스도메인 관련 문제 때문에 함부로 가져다 쓸 수는 없습니다.
https://jsonplaceholder.typicode.com/
JSONPlaceholder - Free Fake REST API
{JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month.
jsonplaceholder.typicode.com
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX와 XMLHttpRequest</title>
</head>
<body>
<script>
const datas = new XMLHttpRequest();
datas.open('get', 'https://jsonplaceholder.typicode.com/todos/1');
datas.setRequestHeader("content-type", "application.json");
datas.send();
datas.onload = () => {
if (datas.status === 200) {
console.log(datas.response);
} else {
console.error(datas.status, datas.statusText);
}
};
</script>
</body>
</html>
- 마찬가지로 XMLHttpRequest 객체를 호출합니다.
- 데이터를 가져오는 방식을 사용할 것이라 open() 메서드를 통해 get방식을 사용하고 주소를 연결해 줍니다.
- setRequestHeader() 메서드를 통해 json타입이라 지정을 해줍니다.
- 그리고 데이터를 보낸 후 onload 를 통해 데이터를 받아오겠습니다.
## 결과 보기
- 콘솔창을 확인해 보면 데이터가 잘 들어오는 것이 확인됩니다.
- XMLHttpRequest 는 방식이 복잡하고, 사용에 따라 데이터가 잘 안 들어오기도 합니다.
- 그래서 AJAX jquery를 사용하거나, axios라는 라이브러리를 설치해서 많이 사용했었습니다.
- 근데 Fetch API가 나오면서 XMLHttpRequest 는 잘 사용하지는 않습니다.
- 개념만 보면 좋을 듯합니다.
- 아래 주소를 들어가보면 Fetch API사용법이 나옵니다. 참고해서 공부해 두세요.
https://ossam5.tistory.com/590
[ES6강좌] 14강 Fetch API사용하기 - 오쌤의 니가스터디
- Fetch API를 사용하면 웹 브라우저가 웹 서버에 HTTP 요청을 할 수 있습니다. - 2015년~2017년 사이 모든 브라우저가 Fetch API를 지원하므로 더 이상 XMLHttpRequest가 필요하지 않습니다. 1. REST API - REST API
ossam5.tistory.com
'웹언어 > AJAX - JS버전' 카테고리의 다른 글
| [AJAX강좌] 1강 AJAX 소개 - 오쌤의 니가스터디 (0) | 2022.12.02 |
|---|
