06.오토셋 설치 + 비동기 방식 연동 + Ajax 관련 메서드

비동기 방식을 연동하기 위해서는 우선

웹 서버를 설치해야 한다.

Autoset을 다운로드 한 후 설치한다.

오토셋을 실행시켜

웹서버 시작 버튼을 눌러준 뒤,

브라우저 창을 켜

127.0.0.1 또는 localhost를 주소창에 입력한다.

오토셋 사이트가 열리면 정상적으로 설치된 것이다.

 

메모장이나 비주얼 스튜디오창에

다음과 같은 소스 코드를 작성한 뒤

C:\AutoSet10\public_html(기본 경로로 오토셋을 저장한 경우)

경로로 해당 파일을 옮겨준다.

 

그 뒤, 다시 127.0.0.1 또는 localhost를 주소창에 입력한다.

화면에 해당 내용이 출력된다면 무사히 설치된 것이다.

 

 

1. Ajax로 JSON 데이터 바인딩하기

바인딩이란 말 그대로 묶다는 의미로

비동기 통신 기술을 이용하여

서버 DB에 데이터를 요청하고,

DB에 요청한 데이터를 받아와 

HTML문단 태그에 결합하는 것을 말한다.

 

1) 가상 회원 데이터베이스 생성하기

https://www.mockaroo.com/ 를 이용하면

데이터베이스에 데이터를 요청하여 받은것처럼

회원 정보 데이터 파일을 생성할 수 있다.

아래쪽의 Format에서 데이터 저장 형식을 json으로 지정한 뒤

다운로드를 눌러 데이터를 내려받으면 된다.

 

2) HTML에 가상 회원 데이터(JSON)를 불러와 바인딩하기

다운받은 MCOK_DATA.json파일을 C:\AutoSet10\public_html로 복사해준다.

그 뒤 아래의 내용을 가진 ajax.js 파일을 생성해준다

그 뒤, 

다음과 같은 코드를 가진 index(0311).html파일을 만들어 주었다.

 

index(0311).html파일을 실행시켜보면

다음과 같이 id값과 first_name, last_name을 가져와

웹페이지에 출력시켜주는 모습을 확인할 수 있다.

 

2. Ajax로 XML 데이터 바인딩하기

이번에는 $.ajax( ) 메서드를 사용하여

비동기 통신 방식으로 요청한 XML 데이터를 바인딩해보겠다.

 

1)  가상 회원 데이터베이스 생성하기

다시 https://www.mockaroo.com/ 사이트로 가

아래쪽의 Format을 XML로 바꾼뒤 

dataset.xml파일을 다운받아준다.

 

위와 똑같이 다운받은 파일을 

C:\AutoSet10\public_html로 복사해준다.

 

2) HTML에 가상 회원 데이터(XML)를 불러와 바인딩하기

다음과 같은 코드를 가진

xmlBind.js파일을 생성해준다.

 

그 뒤,

다음과 같은 코드를 가지고 있는

index(0311).html파일을 만들어준다.

(위의 파일을 재탕하였다....)

 

실행시켜보면

다음과 같이

id값과  email값, 성별값을 가져와

출력되는 모습을 확인할 수 있다.

 

+++++

Ajax 관련 메서드들

load( )	외부 컨텐츠를 가져올 때 사용
$.ajax( )	데이터를 서버에 HTTP POST, GET방식으로 전송할 수 있음 HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드 $.post( ), $.get( ), $.getJSON( )메서드의 기능을 하나로 합쳐 놓은것
$.post( )	데이터를 서버에 HTTP POST방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.get( )	데이터를 서버에 HTTP GET방식으로 전송한 후 서버 측의 응답을 받을 때 사용
$.getJSON( )	데이터를 서버에 HTTP GET 방식으로 전송한 후 서버 측의 응답을 JSON형식으로 받을 때 사용
$.getScript( )	Ajax를 이용하여 외부 자바스크립트를 불러옴
.ajaxStop(function( ){...})	비동기 방식으로 서버에 응답 요청이 완료되었을 때 함수 실행
.ajaxSuccess(function( ){...})	Ajax요청이 성공적으로 완료되면 함수가 실행됨
.ajaxComplete(function( ){...})	Ajax 통신이 완료되면 함수가 실행됨

*이 외에 $.ajax( ) 메서드의 옵션 종류, Ajax 전송 데이터 가공 메서드의 종류는 

Do it! 자바스크립트 + 제이쿼리 입문 p. 320 ~ p.321참조