16. 동기와 비동기
일반적으로 순차적으로 실행됩니다.
앞에게 끝나면 다음것으로 다음것으로..
동기(synchronous) 방식 이라고 합니다.
안정성 측면에서 좋지만 로딩이 완료되면
다시 통신을 하려면 전체를
다시 로드해야하며 전체 로딩을 기다려야
하기에 실행 속도가 느려집니다.
abcd.c
모듈 1
모듈 2
모듈 3
17. 동기와 비동기
모듈 1
비동기(asynchronous) 모듈 단위로 서버에 개별적
요청 합니다. 요청 결과를 callback 함수가 받아 처리합니다.
AJAX 는 일반적으로 비동기통신을 합니다..
화면전환이 없이 실행되는 경우 AJAX 일 가능성이 높습니다.
개별 서버 통신이기에 작업이 끝나는 시간을
정확하게 알 수 없습니다.
모듈 2
모듈 3
…..
abcd.js
Callback 1
서버 통신
Callback 2
24. 프로그램 구조
!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
26. 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 사이에 위치, 사용자 입력 폼
27. 자바스크립트
script
$(document).ready(function(){
$(#add).click(function(){
$(#name_div).append(divinput 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
30. DAUM API의 AJAX 사용 불가
!! 자바스크립트 이용이 안되더랍니다.
!!
상황은 AJAX가 콜백(callback)을 받을 수
없어 사용할 수 없었습니다.
ABCD 서버에서 json을 받아서 처리하는
방법을 사용했습니다.
덕분에 삽질을 좀 했고 가뜩이나 안좋은
우리 서버가 위기에 처했습니다.
약속을 지켜야 했기에 실행은 했습니다.
설마 잡혀가진 않겠죠.
34. 프로그램 구조
!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
36. 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 사이에 입력
37. 자바스크립트
$(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
39. 설명 1
JSON.parse(d)
if ( data != null ) {
$(#item_list).html(html_data);
리턴된 데이터(d)가 비어있지 않다면 실행합니다.
리턴된 데이터(d)가 자바스크립트가 실행할 수 있도록 변형합니다.
item_list 엘리먼트에 html_data 의 값을 넣습니다.
여기선 리스트 하나하나 겠죠.
$(#item_list).empty();
item_list 엘리먼트의 내용을 지웁니다.
40. 설명 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)입니다.