1. Ajax
Ajax : Asynchronous Javascript and XML
Ajax란 비동기 방식의 JavaScript와 XML을 가리킨다.
(1) 동기방식과 비동기 방식의 차이
동기 방식은 서버에 신호를 보냈을 때 응답이 돌아와야 다음동작을 실행할 수 있지만, 비동기 방식은 서버에 신호를 보냈을때 응답과는 상관없이 다음 동작을 수행할 수 있다.
(2) Ajax를 사용하는 이유
클라이언트와 서버간에 xml, json, html, 텍스트 같은 정보를 화면전환 없이 교환하기 위해서
클라이언트가 서버에 요청한 정보를 화면 전환 없이 받을 수 있다는 뜻이다.
비동기 방식이므로 요청한 자료를 기다리지 않고 다른 작업을 할 수 있어서
(3) 서버 측 스크립트 언어
Ajax를 이용해서 사용자가 폼에 작성한 요소를 데이터로 전송하고 응답을 요청하는 과정을 보이려면 웹 서버도 필요하지만, 데이터를 전송함으로써 요청한 응답을 전송해줄 액션 페이지도 필요하다. 액션 페이지는 일반적으로 서버 측 스크립트 페이지인 php, asp, jsp를 이용한다. 서버 측 스크립트 페이지는 서버 컴퓨터에 저장되어 있어야 한다.
프로그래밍 언어는 크게 서버 측 언어와 클라이언트 측 언어로 나뉜다. 클라이언트 측 언어로 자바스크립트 같은게 있고, 서버 측 언어로 위에서 언급했던 php같은게 있다. 클라이언트 측 언어는 사용자 컴퓨터에서 프로그래밍 되지만, 서버 측 언어는 서버 컴퓨터에서 프로그래밍 된다. 따라서, 동적인 사용자 환경 개발은 클라이언트 측 언어를 사용하고, 데이터 베이스와 관련된 일은 서버 측 언어를 사용한다.
예시)
사이트 방문자가 로그인을 하는 과정을 예로 들면, 입력한 아이디나 비밀번호가 올바른 형식인지 검사하는 것은 클라이언트 측 언어인 자바스크립트나 제이쿼리를 이용한다. 올바른 형식의 아이디와 비밀번호라면, 액션 페이지인 서버 측 스크립트 페이지에 해당 아이디와 비밀번호를 전송하여 데이터베이스에 존재하는지 확인한다.
(4) 웹 서버와 웹 호스팅의 차이
웹 서버와 웹 호스팅은 클라이언트에게 웹 서비스를 제공한다. 하지만 웹 서버는 사용자가 직접 컴퓨터에 서버를 구축해야 하는 반면, 웹 호스팅은 이미 서버가 구축된 외부 컴퓨터의 소량의 저장 공간을 임대하여 사용하는 것이다.
2. Ajax로 JSON 데이터 바인딩 하기
(1) 바인딩이란?
비동기 통신 기술을 이용해서 DB에 데이터를 요청하고, 요청한 데이터를 받아와서 html 문단 태그에 결합하는 것을 의미한다.
(2) JSON이란?
JSON : JavaScript Object Notation
예시 ) {"속성1":값1, "속성2":값2, "속성3":값3 ~}
자바스크립트의 객체 표기법이다. 데이터를 전달할 때 사용하는 표준형식으로, 속성(key)과 값(value)이 하나의 쌍을 이룬다.
(3) 바인딩 방법
1. 데이터 베이스 생성하기
: 데이터베이스에 데이터를 요청하여 데이터를 JSON형식으로 생성한다.
2. HTML에 데이터 불러와서 바인딩하기
: html에서 $.ajax() 메소드 이용해서 외부데이터인 JSON형식의 데이터 불러오고, 예를 들어 표로 가공하여 원하는 태그에 결합한다.
$.ajax()메소드 기본형
$.ajax({
// 위에서 만든 json형식의 데이터 파일의 경로
url :"전송 페이지"(action url),
type :"전송 방식"(get, post 방식),
data :"전송할 데이터",
dataType :"요청한 데이터 형식"("html", "xml", "json", "text", "jsonp"),
//여기서 매개변수 data는 요청한 데이터
success : function(data){
//전송에 성공하면 실행될 코드;
},
error : function{
//전송에 실패하면 실행될 코드;
}
});3. Ajax로 XML 데이터 바인딩 하기
(1) XML이란?
XML : eXtensible Markup Language
확장성 마크업 언어라는 뜻이다. 확장 가능한 언어 이므로 사용자가 임의로 태그명을 작성할 수 있다. 따라서 서버의 데이터를 XML 데이터로 가공하는것은 어렵지 않다. 이런 이유로, XML은 주로 데이터를 배포할 목적으로 사용된다.
xml기본형
<?xml version ="1.0" encoding = "UTF-8"?\>
//사용자가 정의한 태그
<tag1>
<tag2>내용</tag2>
</tag1>(2) 바인딩 방법
1. 데이터 베이스 생성하기
: 데이터베이스에 데이터를 요청하여 데이터를 XML형식으로 생성한다.
2. HTML에 데이터 불러와서 바인딩하기
: html에서 $.ajax() 메소드 이용해서 외부데이터인 XML형식의 데이터 불러오고, 예를 들어 표로 가공하여 원하는 태그에 결합한다.
4. 자바스크립트의 보안정책과 외부 데이터 바인딩
(1) 동일 출처 원칙
ajax() 메소드로 서로 다른 도메인의 데이터를 전송할 수 없고, 교차 도메인도 허용하지 않는다는 원칙이다.
그래서 만약 서로 다른 사이트에서 데이터를 주고 받으려면 서버 언어를 사용해서 데이터를 가져오거나(DB), JSONP를 이용하는 방법이 있다.
서버 언어를 사용한다면, 서로 다른 사이트에서 데이터를 요청하고 이를 ajax로 가공하면 된다. 이방법은 보통 관리자가 외부 서버에 접근 할 수 없을때 사용한다.
👀예시) 특정 신문자의 기사 내용을 가져와 이용하고 싶을때
JSONP를 사용한다면, 동일 출처 보안 정책을 피해야 하고 관리자가 외부 서버 접근이 가능해야 한다는 조건 하에서 사용할 수 있다.
👀예시) 본인이 관리하는 사이트가 2개일 때, 두 사이트 간의 데이터를 서로 주고 받을 때
JSONP??
클라이언트가 아닌 각기 다른 도메인에 상주하는 서버로부터 데이터를 요청할때 사용한다!
5. RSS
책에서 RSS를 사용한 예제가 있는데, 모르는 개념이라 정리해보자 한다.
RSS : Really Simple Syndication
초간편 배포라는 뜻이다. 자주 업데이트 되는 사이트에서 주로 사용하는 xml기반 콘텐츠 배급 포멧이다. 사이트에 RSS를 연동하면 자신이 운영하는 사이트 내용이 풍부해진다.
