[ JS ] Day 13 - ② Ajax

# Semantic Web

(1) 시맨틱 웹이란?

• XML을 활용하여 컴퓨터가 정보의 뜻을 이해하고 자동화된 처리를 할 수 있는 인공지능형 웹
• 웹 2.0 서비스로 주목 받는 많은 웹 서비스가 XML을 사용한 정보 교환에 기반
• 하이퍼 링크로 연결된 단순한 거미줄 -> 의미로 연결된 아주 촘촘한 그물망

 

(2) 시맨틱 웹을 위한 기본

1. 정보를 활용하기 위해서는 모양과 내용이 분리되어야 한다. 바이너리 형태의 정보는 HTML, XML 형태로 바꾸어야한다.
2. URI는 변하지 않아야한다.
   • URI(Uniform Resource Identifier)
   • URL(Uniform Resource Locator)
3. 웹 페이지의 주소는 변하지 않고 항상 동일하게 유지되어 두려움 없이 연결

 

# Ajax

(1) Ajax란?

• AJAX : Asysnchronous JavaScript + XML
  • JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술

 

• AJAX 장점
  • 페이지 이동 없이 고속으로 화면 전환
  • 서버 처리를 기다리지 않고 비동기 요청이 가능
  • 서버 측 처리를 각 PC에 분산 가능
  • 수신하는 데이터의 양을 줄임

 

• AJAX 단점
  • 크로스 브라우저화의 노하우 필요
  • AJAX를 사용하지 못하는 브라우저
  • 오픈소스이므로 차별화가 어려움
  • 보안에 더욱 신경써야함

 

• 기존 방식과 AJAX의 차이
  • 기존 방식 : 웹 브라우저가 웹서버에 요청하면 웹서버는 JSP 등의 서버 애플리케이션을 사용해 사용자의 요청을 처리 후 결과를 HTML로 생성해 웹 브라우저에 전송하고, 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그린다.
    • 결과적으로 HTML이 생성되고 사용자 입장에서는 페이지 이동이 발생한다.
  • AJAX : 페이지의 일부분에만 새로운 콘텐츠를 로드하는 기능을 갖는다.
    • 페이지의 일부만 수정하므로 사용자가 전체 페이지가 로드될 때까지 기다릴 필요가 없다.

 

(2) AJAX 동작원리

AJAX 방식

 

(3) AJAX 활용

• 기존의 웹사이트에서 AJAX를 활용하면 효과가 있는 경우
  • 웹 페이지를 바꾸지 않고 현재의 웹 페이지에서 어떤 동작을 하고 싶을 때
  • 불필요한 팝업을 사용하여 처리하는 작업들

 

• AJAX 애플리케이션으로 개발할 필요가 있는 경우
  • 여러 번 불필요하게 화면을 다시 출력할 때
  • 특정한 데이터를 반복해서 사용하면서 다양한 작업을 할 때

 

(4) AJAX의 주요 구성 요소

1. XMLHttpRequest : 웹서버와 통신을 담당함. 사용자의 요청을 웹 서버에 전송 및 웹서버로부터 받은 결과를 웹브라우저에 전달
2. DOM : 문서의 구조를 나타냄, 폼 등의 정보나 화면 구성을 담당
3. CSS : 화면의 UI관련 부분을 담당
4. JavaScript : 사용자가 마우스를 드래그하거나 버튼을 클릭하면 XMLHttpRequest 객체를 사용해 웹서버에 요청을 전송함. XMLHttpRequest 객체로 부터 응답이 오면 DOM, CSS 등을 사용하여 화면을 조작한다.

 

# Ajax 객체, XMLHttpRequest(XHR)

• 속성

속성	설명	읽기/쓰기
readyState	AJAX 개체의 상태를 나타내는 숫자. 처음 AJAX 개체를 생성하면 0이다. get()메소드로 요청할 페이지 정보를 설정하면 1이 되고, send() 메소드로 요청을 보내면 2가 되고, 서버에서 응답이오기 시작하면 3이되고, 서버 응답이 완료되면 4가 된다.	읽기 전용
status	서버로 부터 받은 응답의 상태를 나타내는 숫자.  정상적으로 응답을 받은 경우 200이고, 페이지를 찾지 못한 경우 404	읽기 전용
statusText	서버로 부터 받은 응답의 상태를 나타내는 문자열 정상적으로 응답을 받으면 'OK'가 되고 파일을 찾지 못하면 'Not Found'	읽기 전용
responseText	서버 응답 내용을 나타내는 문자열	읽기 전용
responseXML	서버 응답 내용을 나타내는 XML 개체	읽기 전용
onreadystatechange	readyState 속성이 바뀌었을 때 실행할 이벤트 핸들러를 지정한다.	읽기 / 쓰기

 

• 메소드

메소드	설명
open()	open(method, url, [,async]); AJAX 요청을 초기화하면서 요청 방식, 주소, 동기화 여부를 지정 method인자는 http 요청 방식을 나타내며, get 또는 post 방식 사용. url 인자는 요청할 페이지의 주소 지정 async인자는 비동기 통신 여부를 나타내며, true 또는 false 로 지정
send()	send(body); AJAX 요청을 보낸다. Body 인자에는 요청과 함께 서버로 보낼 내용을 지정한다.
abort()	abort(); send() 메소드로 보낸 요청을 취소한다.
getAllResponseHeaders()	getAllResponseHeaders() 응답을 받은 경우 응답의 모든 헤더 정보를 문자열로 돌려줌
getResponseHeader()	getResponseHeader(header) 응답을 받은 경우 header 인자로 지정한 이름의 헤더 정보 값을 문자열로 돌려줌
setRequestHeader()	setResponseHeader(header,value) 요청을 보내기 전에 header 헤더 정보의 값을 설정함.

 

# XMLHttpRequest 객체를 사용한 데이터 송수신

1. Ajax의 가장 큰 장점은 웹 서버와 데이터를 주고 받아 사용자가 웹 페이지 이동 없이 즉각적으로 원하는 기능을 수행할 수 있도록 하는 것
2. XMLHttpRequest 프로그래밍 순서
   1. XMLHttpRequest 객체 구하기
   2. 웹 서버에 요청 전송하기
   3. 웹 서버에서 응답이 도착하면 화면에 반응하기

 

• XMLHttpRequest 객체 구하기

function getXMLHttpRequest(){
	if(window.ActiveXOjbect){
		return new ActiveXOject("Msxml2.XMLHTTP");
	} else if(window.XMLHttpRequest){
		return new XMLHttpRequest();
		// IE이외의 브라우저에서 XmlHttpRequest
	} else return null;
}

 

• 웹 서버에 요청 전송하기

1. open() 함수 : 요청의 초기화, GET/POST 선택, 접속할 URL 입력
   • httpRequest.open("GET","/test.jsp?id=mad?pw=1234",true); httpRequest.send(null);
   • httpRequest.open("GET","/test.jsp",true); httpRequest.send("id=mad?pw=1234");
2.  send() 함수 : 홈 서버에 요청 전송

 

httpRequest = getXMLHttpRequest();
httpRequest.open(httpmMehod,httpUrl, true);
httpRequest.send(null);

• 응답 데이터 이용

function callbackFunction() { 
	if ( httpRequest.readyState == 4) { 
		if ( httpRequest.status == 200 { 
			// 정상적으로 수행
			var txt = httpRequest.responseText; // txt를 사용해서 알맞은 작업 수행
		}
	}
}

 

# JSON

JSON(JavaScript Object Notation) 표기법이란?

1. 데이터를 교환하기 위한 표기법
   • 이름/값 쌍(자바의 Map이나 Hashtable과 같은 방식)
     • {이름1:값1, 이름2:값2, 이름3:값3}
     • var countries = {ko:’대한민국’, fr:’프랑스’, uk:’영국’}  
     • var koName = countries.ko;  
     • var frName = countries[‘fr’];
2. 배열을 표시할 때
   • ‘객체[인덱스]’ 형식으로 접근
     • [값0, 값1, 값2, 값3]
     • var countryCodes = [‘ko’, ‘fr’, ‘uk’, ‘us’]  
     • var idx0 = countryCodes[0]; // ‘ko’
     • var idx2 = countryCodes[2]; // ‘uk’; 
       
3.  JSON 표기법을 사용한 클래스 정의; 
   • % http://www.json.org/ 사이트에서 참조
   • JSON표기법의 이름/값 부분에서 함수 이름이 ‘이름’에 들어가도 함수의 정의가 ‘값’ 들어감  
     

 

[References]

1. 강태광 강사님의 Ajax PPT