jquery는 모바일 때문에 지양하는 추세이긴 하는데 그래도 좋은 면이 많아서, 웹프론트에서 계속 쓰는데, DOM조작하고 이벤트처리, ajax지원하는 것들을 복습하니 새롭다. javascript보다 좀더 섬세한 DOM조작이 가능하고, 애니메이션효과와 ajax요청이 쉽다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest Example</title>
</head>
<body>
<button id="loadData">Load Data</button>
<div id="dataContainer"></div>
<script>
document.getElementById('loadData').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById('dataContainer').innerHTML = `
<h3>${data.title}</h3>
<p>${data.body}</p>
`;
}
};
xhr.send();
});
</script>
</body>
</html>이런식으로 하는 것을
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery AJAX</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="loadData">Load Data</button>
<div id="dataContainer"></div>
<script>
$(document).ready(function(){
$("#loadData").click(function(){
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
type: "GET",
success: function(data){
$("#dataContainer").html(`
<h3>${data.title}</h3>
<p>${data.body}</p>
`);
},
error: function(error){
console.log("Error:", error);
}
});
});
});
</script>
</body>
</html>이렇게 간단하게 요청 할 수 있다.
fetch는 promises를 사용하여 ajax 요청을 더욱 간단하고 직관적으로 처리할 수 있게 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Example</title>
</head>
<body>
<button id="loadData">Load Data</button>
<div id="dataContainer"></div>
<script>
document.getElementById('loadData').addEventListener('click', function() {
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => {
document.getElementById('dataContainer').innerHTML = `
<h3>${data.title}</h3>
<p>${data.body}</p>
`;
})
.catch(error => console.error('Error:', error));
});
</script>
</body>
</html>fetch가 코드가 간결하여 가독성이 좋고 비동기 요청을 더 쉽게 다룰수 있어 좋으나 구형브라우저에서 지원되지 않는다.
jsp는 jquery가 link 라이브러리로 무거워지는 것과 성능 때문에 지양되는 것과 다르게 코드의 가독성과 유지보수면에서 안좋아서 지양하는 추세이다.
LIST
'4차산업혁명의 일꾼 > Java&Spring웹개발과 서버 컴퓨터' 카테고리의 다른 글
| log와 junit5 ,validation 그리고 interceptor (2) | 2024.06.17 |
|---|---|
| java 파일 다운로드/ 엑셀및 pdf 그리고 소켓통신 그리고 JSON 복습 (0) | 2024.06.17 |
| 웹개발의 추억을 반추하며 스프링 MVC 기초공사 복습과 스프링 Security (0) | 2024.06.17 |
| 컴퓨터를 운영하는 시스템 소프트웨어 운영체제 (2) | 2024.06.06 |
| 컴퓨터를 보호하고 정보를 지키자~! 컴퓨터 보안~! (2) | 2024.06.01 |