728x90
AJAX 란?
AJAX (Asynchronous Javascript And Xml)은 비동기식 자바스크립트와 xml라는 의미로 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 브라우저가 가지고 있는 XMLHttpRequest객체를 이용하여 전체 페이지를 새로고침없이 페이지의 일부만을 위한 데이터를 로드하는 기법이다.
💡 동기 통신 vs 비동기 통신
동기 통신 : 웹 페이지를 새로고침하면서 데이터를 불러오는 방식
- 성능 저하 (사용자의 무한 대기 가능성有)
- 응답의 실체는 html 문서 👉 html 문서를 재랜더링
비동기 통신 : 웹 페이지를 새로고침 하지 않고도 데이터를 불러오는 방식
- 성능 향상
- 응답의 실체는 JSON 👉 html이 아니기 때문에 재랜더링 X
Ajax의 진행과정
user의 정보가 담긴 API에서 데이터 요청 후 table 형식으로 출력
<head>
<script>
var httpRequest = null;
function req() {
// XMLHttpRequest 객체 생성
httpRequest = new XMLHttpRequest();
// .onreadystatechange 이용하여 응답 시 처리하는 콜백함수 설정
httpRequest.onreadystatechange = responseFunc;
// 요청정보 설정
var url = "https://reqres.in/api/users/2"; // user의 정보가 담긴 API
httpRequest.open("get", url, true); // true이면 비동기처리, false이면 동기처리
// 요청하기
httpRequest.send(null); // get 방식이면 null 지정.
}
// 응답시 처리하는 함수
function responseFunc() {
// 요청이 성공인 경우에 처리 👉 readyState 값은 4, status 값은 200
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
// 서버에서 응답한 JSON 열기
var str = httpRequest.responseText;
var json = JSON.parse(str); // 텍스트형식의 JSON을 객체로 변환
var data = json.data;
var id = data.id;
var email = data.email;
var first_name = data.first_name;
var avatar = data.avatar;
var table = `
<table border=1>
<tr>
<th> 아이디 </th>
<th> 이름 </th>
<th> 이메일 </th>
</tr>
<tr>
<td> ${id} </td>
<td> ${first_name} </td>
<td> ${email} </td>
</tr>
</table>
`;
document.querySelector("#result").innerHTML = table;
}
}
</script>
</head>
<body>
<button onclick="req()">데이터 불러오기</button>
<div id="result"></div>
</body>
728x90
'Language > JavaScript' 카테고리의 다른 글
| [JavaScript] JavaScript 기본 문법 (0) | 2024.03.10 |
|---|---|
| [Javascript] AJAX를 이용한 날짜 별 흥행 영화 출력하기 (0) | 2023.07.12 |
| [Javascript] 사용자 정의 객체 JSON (0) | 2023.07.12 |
| [Javascript] 백틱(`) 과 template literal (0) | 2023.07.12 |
| [Javascript] DOM level 0 고전 이벤트 모델 & 인라인 이벤트 모델 (0) | 2023.07.12 |
