처음배우는 자바스크립트,...
TRANSCRIPT
처음배우는����������� ������������������ 자바스크립트,����������� ������������������ 제이쿼리#4����������� ������������������ AJAX����������� ������������������ 를����������� ������������������ 이용한����������� ������������������ 쇼핑몰����������� ������������������ 검색
ABCD,����������� ������������������ 스노우키위����������� ������������������ 한성일
GOAL
• AJAX 설명
• AJAX 를 이용한 쇼핑몰 검색
• AJAX 를 이용한 로또 프로그램
1. 준비
REST CLIENT
• Rest Client 툴은 API 값을 전달하고 볼 때 편리하도록 되어있습니다.
REST CLIENT1
2
3 http://abcds.kr/study/daum.php?q=가방
Advanced Rest Client를 설치합니다.
앱을 설치합니다.
크롬 앱스토어를 실행합니다.
브라우져에 다음과 같이 입력합니다.
REST CLIENT4 결과를 확인합니다.
동기와 비동기
일반적으로 순차적으로 실행됩니다.앞에게 끝나면 다음것으로 다음것으로..동기(synchronous) 방식 이라고 합니다.안정성 측면에서 좋지만 로딩이 완료되면 다시 통신을 하려면 전체를 다시 로드해야하며 전체 로딩을 기다려야 하기에 실행 속도가 느려집니다.
abcd.c
모듈 1
모듈 2
모듈 3
동기와 비동기
모듈 1
비동기(asynchronous) 모듈 단위로 서버에 개별적 요청 합니다. 요청 결과를 callback 함수가 받아 처리합니다.AJAX 는 일반적으로 비동기통신을 합니다..화면전환이 없이 실행되는 경우 AJAX 일 가능성이 높습니다.개별 서버 통신이기에 작업이 끝나는 시간을 정확하게 알 수 없습니다.
모듈 2
모듈 3
…..
abcd.js
Callback 1
서버 통신
Callback 2
동기와 비동기
로드시간
2. JQUERY AJAX
$.ajax({ url: "http://www.abcds.kr/study/s3.php", type: “GET", dataType : “json”, data : { id : “사용자 아이디”, pass : “사용자 비밀번호” }, success : function(data) { var obj = $.parseJSON(data); obj.id; obj.pass; } error : function (request, status, error) { alert(request.responseText); } });
$.AJAX
jsonp 라는 형태도 있지만 여기서는 설명하지 않겠습니다.
* jQuery.ajax() 설명
파라미터 설명
url : 호출 URLdataType : json, xml, jsonptype : 서버 요청 방법 (GET, POST)success : 성공했을때
data 형태의 return 값을 받음error : 실패 핸들링
전달 데이터 {'id':'jamie', 'pass': '1234'}
2. 추첨시간
개근상 추첨시간
3. 추첨프로그램 구현
프로그램 구조
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>추첨 프로그램</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <style> … </style>
</head> <body> <form> … </form> <script> … </script>
</body>
lottery.html
CSS <STYLE> body {
text-align: center; padding-top: 50px; } .add_button { width: 130px; background-color: azure; padding: 2px; margin: 2px; } .go_button { width: 130px; background-color: azure; padding: 10px; margin: 10px; }
.name_input { width: 130px; margin: 2px; }
.message { margin: 10px; }
<head> <style> 여기에 위치 </style> </head>
FORM
<form id="lotto_form"> <h1>추첨 시간</h1> <div id="main"> <div> <div id="name_div"><!-- 이름입력 --></div> <input class="add_button" type="button" id="add" value=“추가”/> </div> <div> <input class="go_button" type="button" id="go" value="GO!" /> </div> </div> <div class="message" id="message"><!-- 결과출력 --></div> <div id="loading" style="display:none "> <img src="lotto.gif" /> </div>
<div id="fire" style="display:none "> <img src="fire.gif" /> </div> </form>
<body> 와 </body> 사이에 위치, 사용자 입력 폼
자바스크립트<script> $(document).ready(function(){ $("#add").click(function(){ $("#name_div").append("<div><input class='name_input' type='text' name=‘array[]' /></div>"); }); $("#go").click(function() { if ($('#first').val() != "") { $('#loading').show(); $('#main').hide(); } $.ajax({ url : "http://abcds.kr/study/lottery.php", type : "GET", data : $("#lotto_form").serialize(), success: function(data) { var returned_data = JSON.parse(data); // 5초후 출력 의도적인 딜레이 setTimeout(function(){complete(returned_data.message);},5000); } }); function complete(message) { $('#loading').hide(); $('#message').html(message); $('#fire').show(); } }); }); </script>
설명$(“#name_div”).append(“<div>...</div>");
data : $("#lotto_form").serialize(),
setTimeout(function(){complete(returnedData.message);},5000);
function complete(message) { $('#loading').hide(); $('#message').html(message); $('#fire').show();
}
name_div엘리먼트에는 html 을 넣습니다. 동적으로 엘리먼트를 추가할 수 있습니다.
데이터로 폼 전체를 넘깁니다. 폼값을 일일이 넘기지 않아도 되니 간편합니다.
5000 (5초) 동안 멈추고 comlete 함수를 호출합니다.이때 returned_data.message 값도 함께 넘겨줍니다.
4. 다음 API 를 이용한쇼핑 검색 프로그램 개발
DAUM API의 AJAX 사용 불가!! 자바스크립트 이용이 안되더랍니다.
!!상황은 AJAX가 콜백(callback)을 받을 수없어 사용할 수 없었습니다.
ABCD 서버에서 json을 받아서 처리하는 방법을 사용했습니다.
덕분에 삽질을 좀 했고 가뜩이나 안좋은 우리 서버가 위기에 처했습니다.
약속을 지켜야 했기에 실행은 했습니다.설마 잡혀가진 않겠죠.
DAUM 쇼핑 APIhttps://developers.daum.net/services/apis/shopping/search
쇼핑 API 구조
…..
실행 화면
이전 다음
프로그램 구조
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8"> <title>상품검색</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <style> … </style>
</head> <body> <script> … </script>
</body> </html>
shop.html
력
#progress {top: 50%; left: 50%; text-align:center; display: none} .search-bar {float:left; width:100%; margin-left:50px;} .contents {float:left; width:100%;} ul.item-list {float:left; width:100%; list-style:none;} li.item-pic {float:left; width:150px; } .page{float:left; margin-left:50px;}
<head> <style> 여기에 위치 </style> </head>
HTML<div id="progress"> <!-- 로딩 인디케이터 --> <img style="width:15px" src="loader.gif" /> 로딩 중입니다. </div> <div class="search-bar"> <input type="text" id="q"/> <!-- 검색 창 --> <select id="sort"> <option value="pop">인기도순</option> <option value="min_price">최저가순</option> <option value="max_price">최고가순</option> <option value="date">출시일</option> <option value="review">리뷰갯수순</option> </select> <input type="button" id="search" value="검색"/> </div> <div class="contents"> <!-- 리스트 --> <div id="item_list"> <!-- loop --> </div> </div> <div class="page" style="margin: 50px"> <span id="prev">이전</span> <span id="next">다음</span> </div>
<body> 와 </body> 사이에 입력
자바스크립트
$(document).ready(function(){ var pageno=1; var html_data = ""; $("#search").click(function(){ load(); }); function load(){ $('#progress').show(); $.ajax({ url : "http://abcds.kr/study/daum.php", type : "GET", data : { q : $('#q').val().replace(/\s/gi, ''), result : "10", pageno : pageno, sort : $('#sort').val() }, // 다음 페이지의 success 부분 여기 위치
}); } });
<body> <script> 여기에 위치
</script> </body>
SUCCESS 부분success: function(d) { var returnedData = JSON.parse(d); var data = returnedData.channel.item; if ( data != null ) { $("#item_list").empty();
$.each(data, function(index, item) { html_data += "<ul class=‘item-list'>"; html_data += "<li class='item-pic'>"; html_data += "<a target='_blank' href='" + item.link + "'>"; html_data += "<img src='" + item.image_url +"' />"; html_data += "</a>"; html_data += "</li>"; html_data += "<li class='item-text'>"; html_data += "<span><b>" + item.title +"</b></span> <br/>"; html_data += "<span>" + item.category_name + "</span> <br/>"; html_data += "<span>발매일 </span><span>" + item.publish_date + "</span><br/>"; html_data += "<span>가격 </span><span>" + item.price_min + "</span><br/>"; html_data += "<span>리뷰 </span><span>" + item.review_count + "</span><br/>"; html_data += "<li>"; html_data += "</ul>"; }); $("#item_list").html(html_data); html_data = ""; $('#progress').hide(); } }
설명 1
JSON.parse(d)
if ( data != null ) {
$("#item_list").html(html_data);
리턴된 데이터(d)가 비어있지 않다면 실행합니다.
리턴된 데이터(d)가 자바스크립트가 실행할 수 있도록 변형합니다.
item_list 엘리먼트에 html_data 의 값을 넣습니다.여기선 리스트 하나하나 겠죠.
$("#item_list").empty();item_list 엘리먼트의 내용을 지웁니다.
설명 2
* 공백제거
$.each(data, function(index, item) { item.image_url;
});
html_data += "<ul class='item-list'>";
$('#q').val().replace(/\s/gi, ''),
html_data = html_data + “문자열” 이라는 의미입니다.
q엘리먼트의 값의 빈공간을 제거 합니다. /\s/gi 는 정규식이라고 합니다.
replace 는 변환입니다. 안하면 에러발생..
for 와 비슷한 반복문인데 json array 를 처음 끝까지 확인할때 씁니다. $.each(data, function(index, item){
}); data = json 데이터 index = 하나씩 증가item 은 하나의 로우(row)입니다.
해봅시다.
$('#prev').click(function(){// 이전 여기를 채워 보세요
});
$(‘#next').click(function(){// 다음 여기를 채워 보세요
});
이전, 다음 기능을 만들어 봅시다.
힌트 pageno 변수를 증가시키고다시 로드 합니다.
$(document).ready(function(){ var pageno=1; var html_data = ""; $("#search").click(function(){ load(); }); function load(){ $('#progress').show(); $.ajax({ url : "http://abcds.kr/study/daum.php", type : "GET", data : { q : $('#q').val().replace(/\s/gi, ''), result : "10", pageno : pageno, sort : $('#sort').val() }, success: function(d) { var returnedData = JSON.parse(d); var data = returnedData.channel.item; if ( data != null ) { $("#item_list").empty(); $.each(data, function(index, item) { html_data += "<ul class='item-list'>"; html_data += "<li class='item-pic'>"; html_data += "<a target='_blank' href='" + item.link + "'>"; html_data += "<img src='" + item.image_url +"' />"; html_data += "</a>"; html_data += "</li>"; html_data += "<li class='item-text'>"; html_data += "<span><b>" + item.title +"</b></span> <br/>"; html_data += "<span>" + item.category_name + "</span> <br/>"; html_data += "<span>발매일 </span><span>" + item.publish_date + "</span> <br/>"; html_data += "<span>가격 </span><span>" + item.price_min + "</span> <br/>"; html_data += "<span>리뷰 </span><span>" + item.review_count + "</span> <br/>"; html_data += "<li>"; html_data += "</ul>"; }); $("#item_list").html(html_data); html_data = ""; $('#progress').hide(); } } }); }});
자바스크립트 분리
<!DOCTYPE html> <html> <head lang="ko"> <meta charset="UTF-8">
</head> <body> <script src="shop.js"></script> </body> </html>
shop.js
Q&A
정말 많이 수고하셨습니다. :)
ABCD http://abcds.krhttps://www.facebook.com/groups/562787713823026/
한성일 https://www.facebook.com/[email protected]