개발자 성장일지
제 10장 jQuery AJAX 통신 본문
1. AJAX 통신
- AJAX(Asynchronous Javascript And XML)는 비동기식으로 JSON 또는 XML 데이터를 교환하기 위한 통신 기술
- 동기(Synchronous)는 순서대로 처리하는 방식, 비동기(Asynchronous)는 순서 없이 동시에 처리하는 방식
- AJAX 통신은 클라이언트에게 처리를 전가해 웹 페이지 속도가 향상되고 서버의 부담을 줄여 줌
2. jQuery Ajax 함수
- 일반적으로 AJAX 통신은 제이쿼리 ajax 함수를 이용
- $.ajax({옵션})
3. jQuery Ajax 관련 함수
- jQuery 다양하게 AJAX 관련 함수를 제공
코드
더보기
Ajax 데이터 요청
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_Ajax 데이터 요청</title>
<!--
날짜 : 2022/10/19
이름 : 황원진
내용 : Ajax 데이터 요청 실습하기
AJAX(Asynchronous Javascript And XML)
- JSON 또는 XML 형태의 데이터를 비동기적으로 전송하기 위한 통신기술
- 서버로부터 데이터를 요청하고 클라이언트에서 화면처리를 수행
- 서버로부터 데이터를 요청하는 것을 API라고 한다.
-->
<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>
Ajax 데이터 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_Ajax 데이터 처리</title>
<!--
날짜 : 2022/10/19
이름 : 황원진
내용 : Ajax 데이터 처리 실습하기
-->
<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/users.json',
type:'get',
dataType:'json',
success:function(data){
console.log(data);
// 데이터 출력
for(let user of data.users){
let tags = `<tr>
<td>${user.uid}</td>
<td>${user.name}</td>
<td>${user.hp}</td>
<td>${user.age}</td>
</tr>`;
$('table').append(tags);
}
}
});
});
})
</script>
</head>
<body>
<h3>Ajax 데이터 처리</h3>
<button>데이터 요청</button>
<table border="1">
<tr>
<td>아이디</td>
<td>이름</td>
<td>휴대폰</td>
<td>나이</td>
</tr>
</table>
</body>
</html>
Ajax 데이터 전송
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_Ajax 데이터 전송</title>
<!--
날짜 : 2022/10/19
이름 : 황원진
내용 : Ajax 데이터 전송 실습하기
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(function(){
$('input[type=submit]').click(function(e){
e.preventDefault();
// 입력한 데이터 가져오기
let uid = $('input[name=uid]').val();
let name = $('input[name=name]').val();
let hp = $('input[name=hp]').val();
let age = $('input[name=age]').val();
// 전송 데이터 생성(JSON)
let jsonData = {
"uid":uid,
"name":name,
"hp":hp,
"age":age,
};
// 데이터 전송(AJAX)
$.ajax({
url:'https://www.naver.com',
type:'get',
data: jsonData,
dataType:'json',
success: function(data){
console.log(data);
}
});
});
});
</script>
</head>
<body>
<h3>Ajax 데이터 전송</h3>
<form action="#">
<input type="text" name="uid" placeholder="아이디 입력"><br/>
<input type="text" name="name" placeholder="이름 입력"><br/>
<input type="text" name="hp" placeholder="휴대폰 입력"><br/>
<input type="text" name="age" placeholder="나이 입력"><br/>
<input type="submit" value="전송하기"><br/>
</form>
</body>
</html>
XML 데이터 요청
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4_XML 데이터 요청</title>
<!--
날짜 : 2022/10/19
이름 : 황원진
내용 : XML 데이터 요청 실습하기
-->
<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.xml',
type:'get',
dataType:'xml',
success: function(data){
console.log(data);
let xml = $(data);
// XML 파싱
$('p > span:eq(0)').text(xml.find('uid').text());
$('p > span:eq(1)').text(xml.find('name').text());
$('p > span:eq(2)').text(xml.find('hp').text());
$('p > span:eq(3)').text(xml.find('age').text());
},
error: function(){
console.log('error!');
}
});
});
});
</script>
</head>
<body>
<h3>XML 데이터 요청</h3>
<button>데이터 요청</button>
<p>
아이디 : <span></span><br>
이름 : <span></span><br>
휴대폰 : <span></span><br>
나이 : <span></span><br>
</p>
</body>
</html>
XML 데이터 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_Ajax 데이터 처리</title>
<!--
날짜 : 2022/10/19
이름 : 황원진
내용 : XML 데이터 처리 실습하기
-->
<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/users.xml',
type:'get',
dataType:'xml',
success:function(data){
console.log(data);
// 데이터 출력
let users = $(data).find('user');
users.each(function(){
let tags = `<tr>
<td>${$(this).find('uid').text()}</td>
<td>${$(this).find('name').text()}</td>
<td>${$(this).find('hp').text()}</td>
<td>${$(this).find('age').text()}</td>
</tr>`;
$('table').append(tags);
});
}
});
});
})
</script>
</head>
<body>
<h3>XML 데이터 처리</h3>
<button>데이터 요청</button>
<table border="1">
<tr>
<td>아이디</td>
<td>이름</td>
<td>휴대폰</td>
<td>나이</td>
</tr>
</table>
</body>
</html>
※개발시 크롬에서 유용하게 쓰이는 플러그인
'JavaScript' 카테고리의 다른 글
| 제 9장 jQuery 애니메이션 (0) | 2023.12.12 |
|---|---|
| 제 8장 jQuery 이벤트 (0) | 2023.12.12 |
| 제 7장 jQuery 함수 (0) | 2023.12.12 |
| 제 6장 jQuery 개요 및 선택자 (0) | 2023.12.12 |
| 제 5장 객체 (1) | 2023.12.12 |
'JavaScript' Related Articles
more
