- jQuery 내용 정리
=> selector
=> method
=> AJAX
서버가 제공하는 데이터를 받아서 그 데이터를 이용해서 화면을 제어한다.
서버로부터 데이터를 받아오는 방법 => AJAX처리.
AJAX는 JavaScript가 가지고 있는 서버와의 비동기 통신방법.
동기방식 : 순차처리방식. 프로그램적으로 처리가 쉽다. 비효율적이다.
비동기 방식 : 이벤트 처리방식. 프로그램적 처리가 어렵다. 효율적이다.
===========================================================
AJAX로 서버와 통신해서 서버가 보내준 데이터를 받아서 화면처리를 진행한다.
그러면 서버는 어떤 형식의 데이터를 보내주는가?
1. CSV (Comma Seperated Value)
예) 홍길동, 20, 서울 ,김길동, 30, 인천, 최길동, 50 ,부산....
장점 : 많은 양의 데이터를 처리하기에 적합.
부가적인 데이터가 ","만 이용하기 때문에 상대적으로 적다.
단점 : 데이터 구조를 표현하기가 쉽지 않다. 데이터가 변경이 되면
데이터를 사용하는 프로그램을 같이 변경해야해서 유지보수에 문제가 발생.
2. XML (eXtended Markup Language)
예) <name>홍길동</name><age>20</age><address>서울</address>
장점 : 데이터구조를 표현하기 좋다. > 사용하기 좋다.
단점 : 부가적인 데이터가 너무많다. 데이터가 커지면 네트워크를 이용해서
데이터를 전송하기가 힘들다.
=> 90년대 ~ 2000년대 초반에 많이 사용했었다.
3. JSON (JavaScript Object Notation)
예) { name : "홍길동", age : "20", address : "서울"}
=> JSON은 데이터를 표현하는 표현법.
문자열. (JS랑 전혀 상관이 없다.) 혼동x.
Open API호출 후 page 동적 생성실습.
1. 서버쪽 프로그램이 필요하다.
클라이언트에게 HTML, CSS, JavaScript로 되어있는 page가 전송.
- 클라이언트는 이 page에 있는 버튼을 클릭해서 특정 서버프로그램을 호출
- 특정 서버프로그램은 데이터를 JSON형식으로 클라이언트에게 전송
- 받은 JSON을 적절하게 처리해서(jQuery)화면을 구성.
- 특정 서버프로그램 : 제공된 프로그램을 이용
=> 한빛미디어에서 출간된 IT도서 데이터.
http://192.168.0.200:8080/bookSearch/search?keyword=java
(서버가 있는것이 아닌, 강사님의 컴퓨터에서 서버를 키고, 실습을 진행하였다.)
2. 제공받은 데이터를 이용해서 화면을 만들어야한다.
개발자들이 쉽게 화면 디자인을 하기 위해서 사용하는 framework => Bootstrap을 이용해서 화면을 만든다.
소스코드들.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BookSearch</title>
<!-- jQuery CDN방식 사용 -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="js/08_bookSearch.js"></script>
<!-- 우리는 Bootstrap을 다운로드 방식이 아닌 CDN방식으로 이용 -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"
onkeydown="call_ajax()">
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
도서검색 <span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">도서검색</h1>
</div>
<h2>도서 리스트</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>표지</th>
<th>제목</th>
<th>저자</th>
<th>가격</th>
<th>삭제</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</main>
</div>
</div>
</body>
</html>
JavaScript
function call_ajax() {
// 입력 텍스트 상자에서 키보드로 입력이 들어왔을 때 호출
// 모든 키에 대해서 처리하는게 아니라 enter key일 경우에만 처리
// enter의 키 값이 13
if (event.keyCode == 13) {
// 서버쪽 프로그램을 호출해서 결과를 받아온다.
// jQuery를 이용해 AJAX 처리를 해야한다.
// ajax의 인자로 javascript 객체를 넣어준다.
// javascript 객체는 => { key : value, key : value, ...}
// data : 서버 프로그램에게 넘겨줄 데이터들...
$("tbody").empty()
$.ajax({
async: true, // ajax sync를 동기 방식으로 할지, 비동기 방식으로 할지 비동기 방식의 호출은 true!
url: "http://192.168.0.200:8080/bookSearch/search",
data: {
keyword: $("input[type=text]").val()
},
type: "GET",
timeout: 3000,
dataType: "json", // 결과 JSON을 JavaScript객체로 변환
success: function (result) { // 서버가 주는 데이터 : result
// alert(result[0].title) // 제목
$.each(result, function (idx,item) { // for문과 동일한 방식이다. 각각의 result에 대해 function을 수행
var tr = $("<tr></tr>")
var imgTd = $("<td></td>")
var img = $("<img \>").attr("src", item.img) //<img src= ~~~>
imgTd.append(img)
var titleTd = $("<td></td>").text(item.title)
var authorTd = $("<td></td>").text(item.author)
var priceTd = $("<td></td>").text(item.price)
var delTd = $("<td></td>")
var delBtn = $("<input \>").attr({type :"button",value :"삭제"})
delBtn.on("click",function () {
// 현재 클릭된 버튼에 대한 책 정보를 찾아서 삭제.
// this : 현재 이벤트가 발생된 객체를 지칭.
$(this).parent().parent().remove()
}) // "(click)"할때 이벤트 처리(함수)
delTd.append(delBtn)
tr.append(imgTd)
tr.append(titleTd)
tr.append(authorTd)
tr.append(priceTd)
tr.append(delTd)
$("tbody").append(tr)
})
},
error: function (error) {
alert("서버호출 실패")
}
})
}
}
function do_delete(){
}
전체적인 흐름은 기본적인 틀만 있는 HTML에서 도서를 검색하면 검색에 해당하는 도서들이
리스트로 화면에 보여지게 된다.
onkeydown을 사용하여 버튼이 눌렸을때 call_ajax함수를 호출하게 되고, event.keycode == 13을 통해 엔터가 입력될때
함수를 실행하게 된다.
'교육 > web' 카테고리의 다른 글
| 2020.07.31 ~ 2020.08.03 Django project (0) | 2020.08.03 |
|---|---|
| 2020.07.30 Django (0) | 2020.07.30 |
| 2020.07.28~2020.07.29 Web 예제 (0) | 2020.07.28 |
| 2020.07.23 Web(HTML, CSS, jQuery) (0) | 2020.07.23 |
| 2020.07.22 Web Service (0) | 2020.07.22 |
댓글