Ajax 란?
Ajax(Asynchronous Javascript And XML)란 비동기 방식의 자바 스크립트와 XML을 의미한다.
Ajax를 이용하는 주 목적은 화면 전환 없이 클라이언트와 서버간의 정보를 교환하기 위해서이다.
Ajax는 클라이언트가 비동기 방식으로 자바스크립트를 이용해 화면 전환 없이 서버측에 자료를 요청할 때
사용한다. ajax 관련 메서드를 호출하면 서버 측에 원하는 요청을 보내 응답을 받아오는 것이 가능하다.
load()
load() 메서드는 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용한다.
요청한 콘텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있다.
$(선택요소).load(url, 요청데이터, 함수_선택사항);$.ajax()
$.ajax() 메소드는 사용자가 지정한 url 경로에 파일의 데이터를 전송하고 입력한 url 경로 파일로부터 요청한 데이터를 불러온다. 이때 불러올 수 있는 외부 데이터로는 텍스트, HTML, JSON 유형 등이 있다.
다음은 $.ajax() 메소드의 기본형이며, 강아지 사진을 요청한다. 인자로 객체가 전달된다.
$.ajax({
url:"https://dog.ceo/api/breeds/image/random",
type: "get",
data: {},
dataType: "json",
success: function(result){
console.log(result)
}
})
JSON 데이터란
JSON은 JavaScript Object Notation의 약자로 자바스크립트 객체 표기법을 말한다. JSON은 key와 value 값이 쌍으로 구성된 형태의 객체 표기법으로, 클라이언트와 서버 사이에 정보를 교환하기 위한 목적으로 사용된다. JSON의 표기법은 무척 간단하다.
const json = {key1:value1, key2: value2, key3: value3};
자바스크립트에서는 JSON 데이터 관련 처리 메소드를 제공한다.
const json = '{"key1":1, "key2": 2, "key3": 3}';
const result = JSON.parse(json);
console.log(result)
console.log(typeof result)예제 - 사원 정보 조회하기
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="./css/jQuery22.css">
</head>
<body>
<h2>데이터 가져오기</h2>
<fieldset>
<legend>사원 정보 조회</legend>
<input type="text" name="empid">
<input id="emp_search" type="button" value="조회">
</fieldset><br>
<table>
<tr>
<th>사원번호</th>
<td><input type="text" name="idx"></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="text" name="email"></td>
</tr>
<tr>
<th>내선번호</th>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<th>입사일</th>
<td><input type="text" name="hire"></td>
</tr>
</table>
<script type="text/javascript" src="./js/jQuery22.js"></script>
</body>
</html>
js
$(() => {
$('#emp_search').click(() => {
// 조회할 사원 번호를 얻어온다.
var empid = $('input[name=empid]').val();
// console.log(empid);
// 3자리 숫자만 입력받는다.
if (!isNaN(empid) && empid.length === 3) {
// ===== jQuery Ajax ===============================================================
$.ajax({
url: 'emplist.xml', // 호출할 페이지의 주소(요청) 또는 읽어올 xml 파일 이름
// cache: false, // 사용자 캐시 사용 여부
method: 'get', // 서버에 데이를 전송하는 방식
asyn: true, // 비동기 방식을 사용한다.(false는 동기 방식을 의미한다.)
dataType: 'xml', // 전송받는 데이터 타입을 적는다.(xml, json, html, script)
// data: { // method가 post일 경우 서버로 전송할 데이터
// 'key': 'value'
// },
// success는 ajax가 성공했을 때 실행할 콜백 함수로 응답받은 데이터가 함수의 인수(data)로 넘어온다.
// success: function(data) {
success: data => {
// alert('성공');
// console.log('data: ' + data);
// 입력한 사원 번호에 해당되는 모든 데이터를 출력해야 하기 때문에 검색한 사원 번호의 부모 요소를
// 선택한다.
var empInfo = $(data).find('EMPLOYEE_ID:contains(' + empid + ')').parent();
// console.log(empInfo);
// 검색된 사원 번호에 해당되는 데이터가 있으면 화면에 출력한다.
if ($(empInfo).is('ROW')) {
// table 태그의 자손 태그 input의 개수만큰 반복하겨 xml 파일에서 읽어온 데이터를 채워 넣는다.
$('table input').each(function(index) {
// console.log(index);
var search = $(empInfo).children().eq(index).text();
// console.log(search);
$('table input').eq(index).val(search);
// $(this).val(search);
$('input[name=empid]').val('');
$('input[name=empid]').focus();
});
} else {
alert(empid + '는 존재하지 않는 사원 번호 입니다.');
$('input[name=empid]').val('');
$('input[name=empid]').focus();
}
},
// error는 ajax가 실패했을 때 실행할 콜백 함수로 오류 정보가 함수의 인수(request)로 넘어온다.
// error: function(request) {
error: request => {
alert('Ajax 실패');
// status => 에러 코드, statusText => 상태 메시지
console.log(request.status + ' : ' + request.statusText);
}
});
// =================================================================================
} else {
alert('정확한 사원 번호를 입력하세요');
$('input[name=empid]').val('');
$('input[name=empid]').focus();
}
});
});
css
* {
margin: 0px;
padding: 0px;
}
body {
width: 1000px;
margin: 50px auto;
}
fieldset {
width: 250px;
height: 55px;
padding: 5px 10px;
display: flex;
}
table {
width: 400px;
border: 1px solid black;
}
td {
padding: 5px 0px;
}
input {
padding: 0px 10px;
border-radius: 5px;
height: 25px;
}
table tr:nth-child(odd) {
background: hotpink;
}
table tr:nth-child(even) {
background: skyblue;
}
xml
결과
'JavaScript' 카테고리의 다른 글
| [JavaScript] #28 - onlick / onchange/ onload / onkeypress / onkeydown 정리 (0) | 2023.03.21 |
|---|---|
| [JavaScript] #27 - Cookie (0) | 2023.02.08 |
| [JavaScript] #25 - jQuery란 (0) | 2023.02.06 |
| [JavaScript] #24 - 노드(Node) (0) | 2023.02.02 |
| [JavaScript] #23 - 문자열 함수 (0) | 2023.01.30 |