이 번에는 jQuery와 Ajax 통신 방식에 대해 간단하게 정리해보겠습니다. Javascript를 이용한 많은 기술 중에 이 2가지는 상호연관이 깊고 웹에서 굉장히 많이 쓰이는 것으로 공부해두는 것이 좋습니다!
jQuery는 굉장히 많은 함수 및 선택자가 있는데 관련해서 깔끔하게 정리된 정보를 제공해주는 블로그를 참고했습니다.
jQuery 문법정리 블로그
또한 jQuery와 연계하여 Ajax 방식을 다루는 것을 공부할건데 Ajax가 무엇이고 비동기방식이 무엇인지 간단하게 정리되어 참고하기 좋은 블로그도 소개하겠습니다.
Ajax란 무엇인가
jQuery
먼저 jQuery가 무엇인지를 알아야 할텐데 간단하게 말하면, 자바스크립트를 기반으로 여러가지 기능을 함수화하여 간결하고 직관적으로 스크립트 코드를 짤 수 있게 하는 것입니다.
예를 들어 버튼을 어떤 버튼을 클릭했을 때 그 항목이 사라지고 다시 나타나고 같은 기능을 jQuery문법으로 하면 hide(), show()함수로 쉽게 구현 가능합니다.
그럼 jQuery사용법에 대해서 간단한 예제를 통해 알아보겠습니다.
jQuery 사용법
보통 id 속성값을 사용하여 요소를 불러오며 방식은 $('#id값') 과 같은 방식으로 사용합니다.
(id속성만 사용해야하는 것은 아니며 class가 올수도 있고 요소가 올 수도 있습니다.)
이때 #은 id값을 사용하는 기호입니다!(class는 '.' 인 것처럼요~)
$('#id값') 뒤에 도트연산자를 통해 함수를 호출해서 사용하면 됩니다!
위에서 언급한 hide(), show()를 👉$('#id값').hide(), $('#id값').show()로 사용하면 되는 것입니다.
jQuery 예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습</title>
<!-- JQuery를 import-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q3() {
}
function q3_remove() {
}
</script>
</head>
<body>
<h1>jQuery + Javascript의 조합 연습</h1>
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
</html>현재 모습
문제
위와 코드 본문의 h태그에서 말하는 것 같이 '이름 입력'을 누르면 이름이 추가되고 '다 지우기'를 누르면 명단이 다 삭제되는 것 jQuery로 구현해보겠습니다.
(script태그만 뽑아온 것)
<script>
function q3() {
if($('#input-q3').val()==''){
alert('정보를 입력해주세요')
}else{
let name=$('#input-q3').val()
//alert(name)
let temp_html=`<li>${name}</li>`
$('#names-q3').append(temp_html)
}
}
function q3_remove() {
$('#names-q3').empty()
}
</script>사용 함수 및 로직은 정말 간단합니다.
👀👀
function q3()
✔ 입력칸을 공백으로 제출한 경우 정보를 달라는 alert창 제시
✔ 입력칸에 정보를 기입했을 경우 val()함수로 입력한 값을 가져와서 let name 변수에 담아주기
✔ html 형식의 정보를 담는 temp_html 변수 만들어주고 그 안에 html 작성
- 이때 jQuery 변수를 불러와서 사용하는데 ${name} 과 같이 변수명을 넣어주면 됩니다.
- ``(백틱 or 그레이브 특수기호) 안에 html코드를 작성하는 것이 포인트!
✔ 실제 body태그 안에서 names-q3 아이디를 갖고 있는 요소에 적용하기 위해 append()함수 이용
function q3_remove()
✔ empty()함수를 이용하여 해당 id를 갖는 요소의 'html 요소 삭제'
- 그 안에 기입한 내용만 지우는게 아니라 html자체를 지우는 것임을 인지해야합니다.
실행 결과
이렇게 간단하게 jQuery에 대해 알아보았고 이것을 Ajax와 연계하여 웹페이지 리로딩 없이 빠르고 쉽게 정보를 얻어오는 방식을 알아보겠습니다.
Ajax
👀👀
ajax
✔ Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
✔ 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
비동기 방식
✔ 웹페이지를 리로드하지 않고 데이터를 불러오는 방식
간단하게만 한 줄로 정리해본 것이고 자세한 설명은 맨 위에서 링크를 걸었던 블로그를 참조바랍니다!
Ajax와 비동기방식이란 무엇인가
✨👀👀✨
ajax 구조(기본틀)
<script>
$.ajax({
type: "GET",// GET 방식으로 요청한다.
url: "",// 데이터를 요청할 서버주소
data: {},//데이터 요청하면서 함께 줄 데이터, GET방식에선 비워두고 POST방식에서는 json형식으로 전송
success: function (response) {// 서버에서 준 결과를 response라는 변수에 담음
//코드구현부
console.log(response)
}
})
</script>
ajax 적용
아래의 사진과 같이 업데이트 버튼을 클릭 시, 서울시 따릉이 공공데이터 정보를 받아와 실시간으로 비동기적인 업데이트를 진행하는 코드를 ajax방식으로 적용시켜보겠습니다.
(현재 갯수가 5대 미만인 정거장은 빨간색 표시)
전체 코드는 밑에 따로 링크를 걸어두고 함수를 구현하는 스크립트 태그만 보겠습니다.
<style>
.below5{
color:red;
}
</style>
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let bikeList=response['getStationList']['row']
for(let i = 0; i<bikeList.length; i++){
let location=bikeList[i]['stationName']
let rackCount=bikeList[i]['rackTotCnt']
let parkCount=bikeList[i]['parkingBikeTotCnt']
let temp_html=``
if(parkCount<5){
temp_html=`<tr class="below5">
<td>${location}</td>
<td>${rackCount}</td>
<td>${parkCount}</td>
</tr>`
}else{
temp_html=`<tr>
<td>${location}</td>
<td>${rackCount}</td>
<td>${parkCount}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>코드설명
👀👀
function q1()
✔ $('#names-q1').empty() : 함수호출 시 마다 기존 정보 없애고 새 정보 받아오기 위함
✔ 정보를 요청한 서버에서 답변을 json 형식으로 전송해서 response변수에 뿌려줍니다. 그렇기에 우리가 필요한 정보가 있는 response['getStationList']['row']를 따로 키값으로 뽑아서 변수에 담습니다.
✔ 굉장히 많은 정거장과 그에 따른 정보들이 있습니다. 그럼 우리는 for 반복문을 통해 각각의 정보에 접근할 수 있습니다. 그 각각의 정보를 변수에 담아줍니다.
ex)let rackCount=bikeList[i]['rackTotCnt'], let parkCount=bikeList[i]['parkingBikeTotCnt']
✔ 현재 body태그에서 표 형식으로 정보를 클라이언트에게 주고 있습니다. 따라서 표에 append() 시킬 html변수 또한 표태그를 사용합니다. 이때 내용은 ${변수}과 같이 작성하여 위 항목에서 담은 정보들을 표현합니다.
✔ append()함수를 통해 작성한 html코드를 본문에 붙여줍니다.
이상으로 jQuery와 Ajax의 조합을 통하여 사이트를 리로딩 하지 않으면서도 빠르게 정보를 받아와서 필요한 부분만 업데이트 하는 것에 대한 정리를 마치겠습니다.
.jpg)