The Debugging Chronicles : "코드의 미학"
기본 예제로 알아보는 ajax 비동기 처리 - JSON 데이터 본문
비동기 처리를 통해 JSON 데이터 로드하기
예전에는 .xml(설정파일)로 데이터를 주고 받았다.
중앙일보 기사들이 태그로 이루어져있다.
이런 기사들은 이런 곳으로 보내진다
이러한 기사들은 rss에서 xml처리된 데이터들이 오는 것이다.
이렇게 되면 데이터들을 받기 어렵다.
요즘 시스템에서는 JSON을 쓴다.
새로운 데이터 표준! JSON
예전에 데이터를 늘리려면
이렇게 했는데
이제는
가볍고 가독성이 좋은 JSON!
요즘 추세
REACT 등에서도 데이터를 주고받을때 JSON 형식을 사용한다!
[{ "key":"value"},{ "key":"value"},{},{}]....
ajax로 JSON을 받아와서 화면에 데이터들을 출력
<body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
// 문서가 준비되면 function 수행하고 싶다!
$(document).ready(function(){
// 어떤 Function, ajax function
$.ajax({
type: "GET", // 타입
url: "data.json", // 요청 url // 나 제이슨 데이터 줄래
dataType: "json", // 무엇을 서버로 부터 응답 받는지
success : functino(){ // 성공했을 때 어떤 함수를 수행할지
},error : functino(error){
// 실패했을 때는
// 왜 실패 했는지 에러 객체를 보자
console.log("요청실패 : " + error);
}
}
});
});
</script>
json 파일을 만들어 보자.
data.json
[
{"imgName":"C.jpg", "details":"1번 이미지"},
{"imgName":"JAVA.jpg", "details":"2번 이미지"},
{"imgName":"MySQL.jpg", "details":"3번 이미지"}
]
성공했을 때 함수를 실행하는데 함수의 인자는 요청 url로 부터 응답받은 데이터 이다!
<body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
// 문서가 준비되면 function 수행하고 싶다!
$(document).ready(function(){
// 어떤 Function, ajax function
$.ajax({
type: "GET", // 타입
url: "data.json", // 요청 url // 나 제이슨 데이터 줄래
dataType: "json", // 무엇을 서버로 부터 응답 받는지
success : functino(data){ // data라는 인자는 응답받은 데이터를 의미
},error : functino(error){
// 실패했을 때는
// 왜 실패 했는지 에러 객체를 보자
console.log("요청실패 : " + error);
}
}
});
});
</script>
둘은 동일한 상황이다.!
사진을 띄울 준비
무엇을 넣을것이냐
<img alt=" ~>를 띄울 예정
태그 추가
이미지 데이터를 도착한 데이터 수만큼 수행해야한다. 그래서 Eahc()메서드로 수행할 수있다.
each 메서드의 인자는 두개인데
$.each( 어떤 데이터를 , 무슨 기능 시킬 건지);
$.each(data. function(){});
이렇게 두개가 인자이다
이때 function에 현재 수행 횟수와 받은 데이터를 인자로 둘 수 있다.
$.each(data, function(index, obj){});
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비동기 처리를 통해 JSON 데이터 로드하기</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "data.json", // 데이터 자체를 요청
dataType: "json", // text 데이터를 C한테 요청했었는데,
success: function(data){ // data라는 인자는 응답받은 데이터를 의미
var elems="";
$.each(data, function(index, obj){
elems += "<img alt='"+this.details+"' src='images/"+this.imgName+"'>";
});
$("#box").append(elems);
},
error: function(error){
console.log("요청실패 : "+error);
}
});
});
</script>
<div id="box"></div>
</body>
</html>'FrontEnd' 카테고리의 다른 글
| [웹 브라우저] Network panel 파헤치기 (0) | 2025.01.03 |
|---|---|
| 개발자 도구 - Application Panel (0) | 2024.12.30 |
| 웹에 최적화된 안내창 (1) | 2024.09.04 |
| 이미지(파일) 업로드 (0) | 2024.08.27 |
| 비동기 처리 - 개념 (0) | 2024.08.24 |
'FrontEnd' Related Articles
more
