자바스크립트를 객체지향적인 언어라고 말할 수 있는 가장 중요한 이유 중 하나는 프로토타입 상속(prototypal inheritance)이라는 확장과 재사용이 가능하기 때문이다. 프로토타입 기반 프로그래밍은 객체의 원형인 프로토타입을 이용하여 새로운 객체를 만들어내는 프로그래밍 기법이다. 이렇게 새롭게 만들어진 객체 역시 자기자신의 프로토타입을 가지고 있으며 이 새로운 객체의 원형을 이용하면 또 다른 새로운 객체를 만들어 낼 수도 있으며 이런 방식, 구조로 객체를 확장하는 방식을 프로토타입 기반의 프로그래밍 언어라고 말한다.

자바스크립트에서 사용되는 프로토타입이란 용어는 크게 두가지로 나누어지고 있기 때문에 구분하는 것이 중요하다. 프로토타입 프로퍼티(Prototype Property)가 가리키고 있는 프로토타입 객체(Prototype Object)와 자기 자신을 만들어낸 객체 원형을 의미하는 프로토타입 링크(Prototype Link)로 나뉜다.

그리고 ECMAScript에서는 이러한 프로토타입 링크를 암묵적 프로토타입 링크라고 부른다.

자바스크립트의 프로토타입

자바스크립트의 모든 객체는 자기 자신을 생성한 객체 원형에 대한 숨겨진 연결고리를 가지고 있다. 이때 자기 자신을 생성하기 위해서 사용된 객체의 원형을 프로토타입이라고 한다. 그리고 자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 하여 확장되었기 때문에 이 연결고리의 끝은 Object 객체의 프로토타입 Obejct이다.

프로토타입이란 사전적 의미가 원본, 원형으로써 프로그래밍 언어에서 프로토타입이란 의미도 크게 다르지 않다. 다시 말해, 어떤한 객체가 만들어지기 위해 그 객체의 부모가 되는 녀석을 프로토타입이라고 한다.

자바스크립트 생성자

여러 객체지향 프로그래밍 언어에서는 객체의 클래스를 정의한 다음 해당 클래스의 인스턴스에 해당하는 개별 객체를 생성하는 것이 가능하다. 자바스크립트에서는 진정한 클래스를 지원하지는 않지만 자바스크립트 객체를 생성하는 생성자 함수를 제공하고 있다.

자바스크립트 생성자는 자바스크립트 객체를 생성하는데 사용되는 함수다. 생성자는 new 연산자와 함께 사용되며 먼저 프로퍼티가 없는 새 객체를 생성한 후 생성자 함수를 호출하고 새 객체를 this 키워드의 값으로 전달하며 객체가 사용되기 전에 설정되어 있어야할 프로퍼티를 설정하는 역할을 한다.

ex)

fucntion Point(x,y)
{
	this.x = x;
	this.y = y;
	// 보통 생성자 함수는 반환값이 없다.
}

point1 = new Point(5,5);
point2 = new Point(8,8);

console.log(JSON.stringify(point1));
console.log(JSON.stringify(point2));

자바스크립트 프로토타입(prototype)

모든 자바스크립트 객체는 그것의 프로토타입 객체에 대한 내부 참조를 가지고 있으며, 프로토타입 객체로부터 프로퍼티를 상속받는다. 모든 함수는 함수가 정의되었을 때 자동으로 생성되고 초기화되는 prototype 프로퍼티를 가지고 있다. 이러한 프로토타입 객체에 추가하는 프로퍼티는 생성자로 초기화된 객체 프로퍼티로 나타나게 된다.

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

Point.prototype.add = function(){
	return this.x + this.y;
}

point1 = new Point(5,5);
point2 = new Point(8,8);

console.log(point1.add());
console.log(point2.add());

메서드와 프로퍼티는 객체가 생성된 이후에도 동적으로 프로토타입에 추가될 수 있다.

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

//객체를 먼저 생성
point1 = new Point(5,5);
point2 = new Point(8,8);

//프로토타입에 메서드를 추가
Point.prototype.add = function(){
	return this.x + this.y;
}

console.log(point1.add()); // 10
console.log(point2.add()); // 16

자바스크립트 프로토타입을 쓰는 이유

• 객체지향적이고 상속을 사용할 수 있다.
• 프로토타입 객체를 사용하면 객체가 프로토타입의 프로퍼티를 상당수 상속할 수 있어서 각 객체에 필요한 메모리의 양을 대폭 줄일 수 있다.

인스턴스 프로퍼티와 메서드

인스턴스 프로퍼티

모든 객체는 인스턴스 프로퍼티의 사본을 자체적으로 가지고 있다. 인스턴스 프로퍼티에는 개별 객체(ex point1.x)를 통해 접근할 수 있다.

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

point1 = new Point(5,5);
point2 = new Point(8,8);

console.log(point1.x); // 5
console.log(point2.y); // 8

인스턴스 메서드

인스턴스 메서드는 특정 인스턴스나 객체를 대상으로 호출된다. 인스턴스 메서드를 구현할 때는 this. 키워드를 이용해 메서드를 호출할 인스턴스나 객체를 참조할 수 있다. 인스턴스 메서드는 클래스의 모든 인스턴스가 공유한다.

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

//객체를 먼저 생성
point1 = new Point(5,5);
point2 = new Point(8,8);

//프로토타입에 메서드를 추가
Point.prototype.add = function(){
	return this.x + this.y;
}

console.log(point1.add()); // 10
console.log(point2.add()); // 16

클래스 프로퍼티와 메서드

클래스 프로퍼티

자바스크립트에서 클래스 프로퍼티는 클래스의 각 인스턴스와 연관된 것이 아닌 클래스 자체와 연관된 프로퍼티를 말한다. 클래스의 인스턴스가 얼마나 생성됐느냐와 관계없이 각 클래스 프로퍼티는 각각 하나씩만 존재한다. 자바스크립트에서 클래스 프로퍼티를 정의하려면 생성자 함수 자체의 프로퍼티로 정의하면 된다. 이는 자바스크립트 함수 역시 객체이기 때문이다.

ex)

function Circle(r)
{
	this.radius = r;
}

// 클래스 프로퍼티를 정의
Circle.PI = 3.14159265;

Circle.prototype.area = function(){
	return Circle.PI * this.radius * this.radius;
}

c1 = new Circle(10);

console.log(c1.area()); // 314.159265

클래스 메서드

클래스 메서드는 클래스의 인스턴스가 아닌 클래스와 연관된 메서드이다. 자바스크립트에서 클래스 메서드를 정의하려면 적절한 함수를 생성자의 프로퍼티로 만들면 된다. 클래스 메서드는 생성자 함수를 통해 호출되기 때문에 this 키워드는 특정 인스턴스를 참조하지 않는다. 그래서 보통 클래스 메서드에서는 this를 전혀 사용하지 않는다.

ex)

function Point(x,y)
{
	this.x = x;
	this.y = y;
}

//클래스 메서드로 정의
Point.getHigherPoint = function(a,b){
	if(a.x > b.x) return a;
	else return b;
}

point1 = new Point(5,5);
point2 = new Point(8,8);

console.log(Point.getHigherPoint(point1,point2).y); //8

비공개 멈버와 메서드

자바스크립트에서 비공개 멤버는 생성자로 만드는데, var 키워드를 이용해 정의한 변수와 생성자의 매개변수는 비공개 멤버가 된다. 비공개 멤버는 생성자 함수 밖에서 접근할 수 없으며, 오직 생성자 함수 안에서만 접근할 수 있다. 이를 데이터 캡슐화(data encapsulation)라고 한다.

ex)

function Circle(r)
{
	//비공개 프로퍼티
	var radius = r;
    
	//비공개 메서드
	var getArea = Function(){
		return Circle.PI *radius * radius;
	}

	//공개 메서드
	this.area = function(){returnr getArea();}
}

//클래스 프로퍼티를 정의
Circle.PI = 3.14159265;

c1 = new Circle(10);

console.log(c1.area()); // 314.159265

XMLHttpRequest란

XMLHttpRequest 객체는 Ajax의 핵심이며, 클라이언트와 서버 간의 통신을 담당하는 객체다. 또한 클라이언트와 서버 간에 통신할 때 가장 먼저 생생해야 하는 객체다.

XMLHttpRequest 객체 생성 코드

window.onload = function()
{
	//1. 브라우저에 따른 XMLHttpRequest 생성
	var xmlHttp = createXMLHTTPObject();
}

//1. 브라우저에 따른 XMLHttpRequest 생성
function createXMLHTTPObject()
{
	var xhr = null;
    
	if(window.XMLHttpRequest)
	{
		//IE7+, 크롬, 사파리, 파이어폭스, 오페라는 XMLHttpRequest 객체를 제공한다.
        xhr = new XMLHttpRequest();
	}
	else
	{
		//IE5,6 버전에서는 다음과 같은 방법으로 XMLHttpRequest 객체를 생성한다.
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
	}
    
	return xhr;
}

대부분의 브라우저에서 XMLHttpRequest 객체를 제공하고 있으며, IE 5,6 버전을 사용하지 않는 추세이고 해당 프로젝트에서 IE6이하는 고려하지 않는다면 위와 같은 코드로 작성하지 않아도 된다. 위의 부분은 거의 공식처럼 사용되며 jQuery Ajax 내부에도 이와 같은 방식으로 XMLHttpRequest 객체를 생성한다. jQuery Ajax에는 바로 위와 같은 작업이 모두 포장되어 있어 더 쉽게 사용이 가능하다.

주요 메서드

주요 프로퍼티

응답 이벤트 처리(요청에 대한 응답처리 이벤트 리스너 등록)

XMLHttpRequest 객체의 onreadystatechange 이벤트는 클라이언트와 서버 간의 데이터 전송 상태가 바뀔 때마다 발생하는 이벤트다. 즉, 서버가 클라이언트가 요청한 응답으로 보내는 데이터를 얻으려면 이 이벤트를 사용해야 한다. 이를 위해 먼저 실제 데이터 전송이 이루어지기 전 다음과 같은 이벤트 리스너를 등록해야 한다.

// 요청에 대한 응답 처리 이벤트 리스너 등록
xmlHttp.onreadystatechange = on_ReadyStateChange;

이후에 연결 요청 준비단계(open() 메서드)와 실제 데이터 전송(send() 메서드)이 이루어지면 앞의 코드, 이벤트 리스너로 등록한 on_ReadyStateChange() 리스너 함수가 실행되고 데이터를 주고받는 과정에서 통신이 정상적으로 이루어졌다면 언제인지 알아내면 된다.

통신 시점의 상태를 알아내는 코드

//응답처리
function on_ReadyStateChange()
{
	/*
		0 : 초기화 전
		1 : 로딩 중
		2 : 로딩 됨
		3 : 대화 상태
		4 : 데이터 전송완료
	*/

	//4 : 데이터 전송완료
	if(xmlHttp.readyState == 4)
	{
		//200은 에러 없음을 의미(404 : 페이지가 존재하지 않음)
		if(xmlHttp.status == 200)
		{
			/*
				이 영역에서 서버에 보낸 데이터를
				타입(XML, JSON, CSV)에 따라 처리
			*/
		}
		else
		{
			alert('처리 중 에러가 발생했습니다.');
		}
	}
}

정상적으로 서버와의 통신이 이루어졌다면 이때 서버에서 보내온 데이터가 담긴 responseText와 responseXML 프로퍼티를 사용하면 된다.

GET 방식, POST 방식

GET과 POST는 HTTP 메서드의 한 종류이며, HTTP 메서드는 클라이언트 데이터(매개변수)를 서버로 보내는 방식을 의미한다. HTTP 메서드로는 GET, POST 이외에 PUT, TRACE와 같은 메서드가 있으며 대표적으로 GET, POST 방식을 많이 사용한다.

GET 방식

서버로 보낼 클라이언트의 데이터를 URL에 포함시켜서 보내는 방법을 GET 방식이라고 한다.

ex) http://주소?매개변수=값&매개변수=값...

ex) http://erum.com/index.jsp?name=dream&pw=1234 

위와 같은 GET 방식으로 서버에 데이터를 보내는 경우는 주소 다음에 "?"를 넣은 후 매개변수=값을 넣어준다. 데이터가 여러 개인 경우는 구분자로 "&"를 사용한다.

GET 방식으로는 보낼 수 있는 데이터의 양이 정해져 있기 때문에 간단한 데이터를 보낼 때 주로 사용한다. 또한 URL에 데이터를 포함시켜 보내다 보니 전송하는 내용이 모두 눈에 보이기 때문에 중요한 데이터 내용이 포함된 경우는 GET 방식으로는 보내지 않는 편이 바람직하다.

적용방법 : XMLHttpRequest의 open() 메서드의 첫번째 매개변수로 "GET"을 넣어주고, 두번째 매개변수는 서버로 보낼 데이터가 있는 경우 요청 URL에 데이터를 문자열로 넣어준다.

var data = 'id=eroom&pw=1234';
xmlHttp.open('GET','index.jsp?'+data,true);

//서버로 보낼 데이터가 없는 경우 요청 URL만 작성
xmlHttp.open('GET', 'index.jsp?', true);

마지막으로 xmlHttp.send(null) 메서드를 실행하면 통신이 시작된다. 세번째 매개변수 true는 비동기를 뜻한다.

POST 방식

GET 방식과는 달리 POST 방식은 많은 양의 데이터를 한꺼번에 보낼 때 유용하다. 일반적으로 POST 방식은 폼(Form) 태그 안에 입력한 사용자 정보를 보낼 때 주로 사용한다. 만약 GET 방식으로 보낸다면 전송해야 할 내용을 모두 문자열로 만들어야 하기 때문에 번거로운 작업을 거쳐야한다. POST 방식은 폼 태그 내부에 정보를 매우 쉽게 한번에 전송할 수 있다. Ajax에서는 POST 방식으로 데이터를 보낼 때 폼 태그에 실어서 보내는 것이 아니라 약간의 작업이 필요하다.

적용방법 : XMLHttpRequest의 open() 메서드의 첫번째 매개변수로 "POST"를 넣어주고, 두번째 매개변수는 서버로 보낼 데이터를 뺀 요청할 URL만 지정한다. 그리고 세번째 매개변수는 대부분 비동기로 응답을 받기 때문에 true를 지정한다.

xmlHttp.open('POST','index.jsp',true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

그리고 POST 방식에서는 위와 같이 setRequestHeader에 콘텐츠 타입이 form-urlencode임을 지정해야 한다.

GET방 방식에서는 send() 메서드에 null을 지정했던 것과 달리 POST 방식에서는 send() 메서드의 매개변수 값으로 서버에 보낼 데이터를 넣어서 실행하면 통신이 시작된다.

xmlHttp.send('id=hj&pw=1234')

서버 응답 방식 설정 - 동기(Synchronous) 방식

window.onload = function()
{
	//1. 요청 객체 생성 : 웹 표준 지원 브라우저 일 경우
	var xmlHttp = new XMLHttpRequest();
    
	//2. 요청에 대한 응답 처리 이벤트 리스너 등록
	xmlHttp.onreadystatechange = on_ReadyStateChange;

	//3. 서버로 보낼 매개변수 생성
	var strParam = 'id=HJ&pw=1234'

	//4. 클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용)
	xmlHttp.open('GET', 'test.jsp?' + strParam, false);

	//5. 실제 데이터 전송(send() 메서드 이용)
	xmlHttp.send('id=HJ&pw=1234');
    
	//Transmit ::: 동기/비동기 실행 테스트
	alert('전송시작');
};

//6. 응답처리
function on_ReadyStateChange()
{
	/*
		0 : 초기화 전
		1 : 로딩 중
		2 : 로딩 됨
		3 : 대화 상태
		4 : 데이터 전송완료
	*/
	//4 : 데이터 전송완료
	if(xmlHttp.readyState == 4)
	{
		//200은 에러 없음(404 : 페이지가 존재하지 않음)
		if(xmlHttp.status == 200)
		{
			//7. 데이터 처리
			/*
				이 영역에서 서버에서 보낸 데이터를 타입(XML, JSON, CSV)에 따라 처리
			*/
			console.log('이 부분에서 데이터를 처리한다.');
		}
		else
		{
			console.log('처리 중 에러가 발생했습니다.');
		}
 	}
}

동기 방식에서는 send() 메서드에 의해 서버 통신이 시작되면 send() 이후의 5. 실제 데이터 전송, 6. 응답 처리, 7. CSV, XML, JSON에 따른 데이터 처리, Transmit 부분에서 5,6,7의 단계를 실행하고 클라이언트와 서버 간의 요청과 응답이 모두 끝나면 Transmit 부분의 내용이 실행된다. 다시 말해 5단계의 send() 메서드에 의해 실제 데이터 통신, 전송이 이루어지면 잠시 후에 클라이언트에 대한 요청 응답이 정상적으로 이루어진 경우 on_ReadyjStateChange() 메서드 내부의 7단계의 구문이 실행된다. 이와 관련된 모든 처리가 끝나면 비로소 Transmit 단계 부분의 구문이 실행된다.

동기 방식은 특성상 요청에 대한 응답이 언제 올지 모르기 때문에 다른 일들을 아무것도 처리하지 못한 채 기다려야한다. 따라서 특별한 경우를 제외하고 거의 사용하지 않는다.

서버 응답 방식 설정 - 비동기(Asynchronous) 방식

비동기 방식은 동기 방식의 반대로 서버 요청에 대한 응답을 무작정 기다리는 것이 아니라 응답을 보낸 후 바로 다음 작업을 진행할 수 있다. 비동기 방식에서는 open() 메서드의 세 번째 매개변수로 false 대신 true를 지정하기만 하면 비동기로 응답 받을 수 있다.

window.onload = function()
{
	//1. 요청 객체 생성 : 웹 표준 지원 브라우저 일 경우
	var xmlHttp = new XMLHttpRequest();
    
	//2. 요청에 대한 응답 처리 이벤트 리스너 등록
	xmlHttp.onreadystatechange = on_ReadyStateChange;

	//3. 서버로 보낼 매개변수 생성
	var strParam = 'id=HJ&pw=1234'

	//4. 클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용)
	xmlHttp.open('GET', 'test.jsp?' + strParam, true);

	//5. 실제 데이터 전송(send() 메서드 이용)
	xmlHttp.send('id=HJ&pw=1234');
    
	//Transmit ::: 동기/비동기 실행 테스트
	alert('전송시작');
};


//6. 응답처리
function on_ReadyStateChange()
{
	//4 : 데이터 전송완료
	if(xmlHttp.readyState == 4)
	{
		//200은 에러 없음(404는 페이지가 존재하지 않음)
		if(xmlHttp.status == 200)
		{
			//7 : 데이터 처리
			//이 영역에서 서버에서 보낸 데이터를 타입(XML, JSON, CSV)에 따라 처리
			console.log('이 부분에서 데이터를 처리합니다.');
		}
		else
		{
			console.log('처리 중 에러가 발생했습니다.');
		}
	}
}

비동기 방식에서는 5단계의 send() 메서드에 의해 데이터가 전송되면 Transmit 단계에서 해당하는 구분이 아무런 기다림 없이 바로 실행된다. 그리고 이 후 클라이언트에 대한 요청이 모두 정상적으로 이루어지면 7번에 해당하는 구문이 실행된다.

즉, 동기 방식과 비동기 방식의 가장 큰 차이점은 send() 메서드를 실행하여 클라이언트 요청을 서버로 보낸 후에 응답이 올 때까지 다음 구문인 Transmit 영역을 실행하지 않고 그자리에서 다른 일을 아무것도 하지 않은 채 기다릴지(동기), 아니면 기다리지 않고 바로 이어서 그 다음 구문을 실행할 것(비동기)인지다.

응답형식

send() 함수가 실행되면 요청이 서버로 전송되고 그 이후 서버는 요청에 대한 응답으로 데이터를 보내주는데, 이때 서버에서는 주로 CSV, XML, JSON이라는 세 가지 데이터 타입 중의 하나를 선택한 후 타입에 맞게 데이터를 가공해서 보내주게 된다. 그리고 클라이언트에서는 이렇게 받은 응답 데이터를 형식에 맞게 변환하여 사용한다.

CSV(Comma Separated Value)

CSV는 세가지 타입 중에 가장 단순하면서 평범한 텍스트 형식이다. CSV 풀네임에서도 알 수 있듯이 서버 측 응답 내용을 특정 구분자를 추가해서 하나의 문자열로 보내는 방식이다. 구분자로는 콤마(Comma) 말고도 사용자가 원하는 문자를 사용할 수 있다. 서버에서는 다음과 같이 클라이언트 요청에 대한 결과 값을 특정 구분자로 묶어 하나의 긴 문자열로 만들어 응답으로 보낸다.

/*
	사용된 구분자 = ","
	"hanjin,1234"

	사용된 구분자 = "||"
	"id=hanjin||pw=1234"

	사용된 구분자 = "&"
	"id=hanjin&pw=1234"
*/

//클라이언트는 서버에서 사용한 구분자를 토대로 결과값을 분리해서 데이터를 처리
var aryData = xmlHttp.responseText.split('||');
var objResult = {};
for(var i = 0; i < aryData.length; i++)
{
	var keyValue = aryData[i].split('=');
	objResult[keyValue[0]] = keyValue[1];
}

XML

서버에서는 다음과 같은 형태로 응답을 XML 형식으로 클라이언트에 보내준다.

header('Content-Type:text/xml; charset=utf-8');
<result>
<success>1</success>
<id>hanjin</id>
<pw>1234</pw>
</result>

그러면 클라이언트에서 다음과 같은 식으로 XML을 파싱해서 데이터를 처리한다.

var xmlHttp = new XMLHttpRequest();

//JavaScript DOM
var xmlInfo = xmlHttp.responseXML;
var id = xmlInfo.getElementsByTagName('id')[0];
var pw = xmlInfo.getElementsByTagName('pw')[0];
console.log('id=' + id.firstChild.nodeValue);
console.log('pw=' + pw.firstChild.nodeValue);

//jQuery DOM
$xmlInfo = $(xmlHttp.responseXML);
var id = $xmlInfo.find('id').text();
var pw = $xmlInfo.find('pw').text();
console.log('id='+id);
console.log('pw='+pw);

JSON(JavaScript Object Notation)

JSON도 CSV와 마찬가지로 특정 규칙에 정해진 형식으로써 자바스크립트 객체 구조를 지닌 문자열이다.

다음은 객체 리터럴 방식으로 정의한 자바스크립트의 객체다.

{
	id : 'hanjin',
	pw : '1234'
}

위의 객체를 그대로 문자열로 표현하면 다음과 같다.

var str = '{';
str += ' "id" : "hanjin",';
str += ' "pw" : "1234",';
str += '}';

바로 이런 스타일을 JSON 형식이라고 한다. 

서버에서는 아래와 같이 응답을 JSON 형식 문자열로 클라이언트에게 보낸다.

$result = '{';
$result. = ' "id" : "hanjin",';
$result. = ' "pw" : "1234",';
$result. = '}';

echo($result);

그러면 클라이언트에서는 응답받은 JSON 형식 문자열을 자바스크립트 객체로 만들어 처리한다.

var xmlHttp = new XMLHttpRequest();

var objResult = eval('(' + xmlHttp.responseText + ')');
alert('id = ' + objResult.id);
alert('pw = ' + objResult.pw);

Ajax란(Asynchrononus JavaScript and XML) 란?

• HTML, CSS, JavaScript를 활용해 동적이면서 인터랙티브한 사용자 화면 조작을 포함하면서 서버와 비동기 데이터 통신을 통해 응답성 좋은 데이터 처리를 가능하게 하는 웹 개발 기법
• 페이지를 새로고침하지 않고도 서버와 데이터를 주고 받을 수 있따는 의미

Ajax 사용이유

• 새로고침(refresh)을 통해 새로운 콘텐츠를 반영해야하는 정적인 페이지가 아니라 생동감있는 동적인 웹 페이지를 만들수 있다.
• 전체 페이지에서 실제로 변경되어야할 내용이 특정 부분에만 해당된다면 이 영역의 데이터만을 따로 서버에서 받아올 수 있으므로 경우에 따라 서버의 네트워크 부하를 최대한 줄일 수 있다.(변경되는 영역의 데이터만 받기 때문에 경우에 따라서 트래픽이 현저히 줄어든다.)
• 사용자 요청에 대한 응답성이 빨라진다.
• 데이터를 처리할 때 각종 효과를 추가해 인터랙티브한 화면을 만들 수 있다.
• 데이텉 요청이 비동기로 처리되므로 사용자는 서버에서 응답이 오기 전까지 다른 작업을 하면서 기다릴 수 있다.

알고있어야 하는 내용

• XMLHttpRequest객체 : 클라이언트와 서버 간의 데이터 요청 및 응답 처리를 담당하며, 가장 먼저 생성해야 하는 객체다. Ajax의 핵심
• GET방식, POST방식 : 서버에 보낼 데이터를 URL에 포함시켜서 보낼지(GET 방식), 아니면 요청 메시지 몸체에 담아서 보낼지(POST)
• 동기, 비동기 : 서버에 요청을 보내고 서버 측 응답이 올 때까지 다음 코드를 실행하지 않고 무작정 기다릴 것인지(동기), 아니면 다른 것을 처리하면서 서버 측 응답이 왔다는 소식을 브라우저에 의해 이벤트로 받을 것인지(비동기) 선택해야한다. Ajax의 A는 비동기를 의미한다.
• 데이터 교환 방식 : 서버에서 클라이언트 요청에 대한 응답을 보내는 방식을 정한다. 데이터를 하나로 모두 묶어서 보낼 것인지(CSV, Comma Separated Value) 아니면 널리 사용하는 XML 형식으로 보낼지 또는 리터럴(Literal) 방식의 자바스크립트 객체를 의미하는 JSON(JavaScript Obejct Notation) 방식으로 보낼지 설정한다.

Ajax를 이용한 클라이언트와 서버 간의 데이터 연동

1. XMLHttpRequest(요청)객체를 생성

XMLHttpRequest 객체가 가지고 있는 기능 : onreadystatechange 이벤트, open() 메서드, send() 메서드

Ajax 작업은 요청객체를 생성하는 것으로 시작하며, 나머지 작업에서 모두 이 객체에서 제공하는 기능을 이용한다.

2. 처리 결과를 받을 이벤트 리스너 등록

서버에서 보내는 데이터를 받기 위한 이벤트 리스너를 등록한다.

3. 서버로 보낼 데이터 생성

서버에 요청하면서 추가적으로 보내야 할 내용이 있으면 이곳에서 생성하며, 이 경우 '&'를 구분자로 "key=value&key=value"와 같은 식으로 문자열을 만든다. 만약, 서버에 보낼 데이터가 없다면 이 단계는 생략한다.

4. 클라이언트와 서버 간의 연결 요청 준비(open() 메서드 이용)

서버로 보낼 데이터 전송 방식 선택(GET, POST방식), 서버응답(동기, 비동기) 선택

5. 실제 데이터 전송

4단계까지는 일종의 준비단계이다. 준비단계가 끝나고 실제 통신을 시작하려면 XMLHttpRequest 객체에서 제공하는 send() 메서드를 호출해야 한다.

6. 응답처리

5단계에서 send()가 실해오디면서 클라이언트와 서버 사이에서 미리 약속한 방식으로 몇 번에 걸쳐 데이터를 주고 받게 된다.

7. 데이터 처리

클라이언트와 서버 간의 아무런 이상없이 정상적으로 끝났다면 이후 서버에서 받은 데이터 형식 방식에 따라 데이터를 가공해서 사용하게 된다.