각진 세상에 둥근 춤을 추자
[JS] Ajax 데이터 요청 본문
아래의 링크는 JSON객체로 생성된 서버이다.
http://chhak.or.kr/data/user.json
Ajax를 통해 위 JSON 데이터를 요청해 본다.
Ajax는 비동기 방식 통신 기술이다.
즉, 클라이언트가 화면을 구현하고 서버는 해당 화면에 알맞는 데이터만 전송한다.
(1) 화면 구현하기
다음과 같은 폼을 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_Ajax 데이터 요청</title>
</head>
<body>
<h3>Ajax 데이터 요청</h3>
<button>데이터 요청</button>
<p>
아이디 : <span></span><br/>
이름 : <span></span><br/>
휴대폰 : <span></span><br/>
나이 : <span></span><br/>
</p>
</body>
</html>
(2) 기능 구현하기
데이터를 요청하는 코드를 작성하기 전 제이쿼리를 적용하는 라이브러리를 구글에서 가져온다.
https://developers.google.com/speed/libraries
호스팅된 라이브러리 | Hosted Libraries | Google Developers
가장 많이 사용되는 오픈소스 자바스크립트 라이브러리를 위한 안정적이고, 안정적이며, 속도가 빠른, 전 세계적으로 제공되는 콘텐츠 배포 네트워크입니다.
developers.google.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<button>데이터 요청</button> 이라는 '데이터 요청' 버튼을 생성했다.
'데이터 요청' 버튼을 클릭하면 JSON 데이터를 요청하여 불러오는 코드를 작성해 본다.
<script>
$(function(){
// 버튼을 클릭하면
$('button').click(function(){
// 클라이언트가 서버에 데이터 요청
$.ajax({
url: 'http://chhak.or.kr/data/user.json',
type: 'get',
dataType: 'json',
success: function(data){
console.log(data);
// 데이터 출력
$('p>span:eq(0)').text(data.uid);
$('p>span:eq(1)').text(data.name);
$('p>span:eq(2)').text(data.hp);
$('p>span:eq(3)').text(data.age);
}
error: function(){
console.log('errer!');
}
});
});
});
</script>
(3) 전체 코드
화면 구현과 기능 구현을 합친 전체 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_Ajax 데이터 요청</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// 데이터 요청
$.ajax({
url:'http://chhak.or.kr/data/user.json',
type:'get',
dataType:'json',
success: function(data){
console.log(data);
// 데이터 출력
$('p > span:eq(0)').text(data.uid);
$('p > span:eq(1)').text(data.name);
$('p > span:eq(2)').text(data.hp);
$('p > span:eq(3)').text(data.age);
},
error: function(){
console.log('error!');
}
});
});
});
</script>
</head>
<body>
<h3>Ajax 데이터 요청</h3>
<button>데이터 요청</button>
<p>
아이디 : <span></span><br/>
이름 : <span></span><br/>
휴대폰 : <span></span><br/>
나이 : <span></span><br/>
</p>
</body>
</html>
버튼을 눌러도 데이터가 출력되지 않는다면?
CORS(Cross Origin Resource Sharing)은 '브라우저' 정책으로 클라이언트가 <script>를 이용해 요청한 데이터를 서버가 응답을 하더라도, 안전한 요청이 아니라고 판단이 되면 해당 브라우저는 응답을 버린다.
크롬 웹 스토어에서 Allow CORS: Access-Control-Allow-Origin을 다운받는다.
Allow CORS: Access-Control-Allow-Origin
Easily add (Access-Control-Allow-Origin: *) rule to the response header.
chrome.google.com
아이콘을 클릭하여 켜고 끌 수 있다.
'JavaScript' 카테고리의 다른 글
| [JS] Ajax 데이터 전송 (0) | 2022.10.21 |
|---|---|
| [JS] Ajax 데이터 처리 (0) | 2022.10.21 |
| [JS] Ajax란? (0) | 2022.10.20 |
| [JS] jQuery 조작 함수 (0) | 2022.10.19 |
| [JS] jQuery 탐색 함수 (0) | 2022.10.19 |
