Ajax

  Ajax 란?

 한 화면에 모든 데이터를 다 저장하지 않는다. 한 화면이 로드되려면  시간이 걸리기도 하지만 비효율 적일 것이다. Ajax를 이용하는 이유는 화면 전환 없이 클라이언트와 서버간에 정보 교환을 하기 위해서이다.

 Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러 가지 기능을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다.

그중에서도 현재 가장 널리 사용되고 있는 Ajax 프레임워크는 바로 제이쿼리(jQuery)입니다.

 

▶ 데이터 전송방식

$.ajax() - 비동기식 Ajax를 이용하여 HTTP 요청을 전송한다.

                $.ajax(URL주소[,옵션]); 

$.get()  - 전달받은 주소로 GET 방식의 HTTP 요청을 전송한다.(주소에 데이터를 추가하여 전달하는 방식)

                $.get(URL주소[,콜백함수]); 

$.post() - 전달받은 주소로 POST 방식의 HTTP 요청을 전송한다.(데이터를 별도로 첨부하여 전달하는 방식)

                $.post(URL주소[,데이터][,콜백함수]); 

 

▶ 웹(브라우저)에서 표현 할 수 있는 콘텐츠 타입 ★

1) text/html - html을 표현하는 타입

2) text/xml - xml을 표현하는 타입 (외부 자원 관리 데이터로 저장 혹은 외부와 통신하기 위한 파일.)

3) text/plain  -텍스트를 표기하는 타입

4) application/json - json을 표현하는 타입

   포멧터 :  {"키" : "값"} 형태로 이루어진 문자열

 

 

다음 소스코드를 복사하여 붙여넣고 형식에 맞게 수정하면 사용하기 편리할 것이다.

var request = $.ajax({
	url: "script.php", 		// 통신할url
	method: "POST",			// 통신할 메서드 타입
	data: { id : '' },		//전송할 데이터
	dataType: "html"		//전송받은 데이터를 변환시킬 컨텐츠 타입
	//DATA TYPE 
	//html(text/html), json(application/json), xml(text/xml), text(text/plain)
});

//정상적으로 통신이 완료되었을 때 실행되는 메소드. 인수값인 함수를 실행시킴(콜백함수)
request.done(function( data ) {
	console.log(data);
});
//에러가 발생했을 때 실행되는 메서드
request.fail(function( jqXHR, textStatus ) {
	alert( "Request failed: " + textStatus );
});

 

▶ 사용 메소드

 

 - doneHTTP : 요청이 성공하면 요청한 데이터가 done() 메소드로 전달된다.

 - failHTTP : 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달된다.

 - alwaysHTTP : 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행된다.

 

▶ 데이터 전송 방식

위의 전송 데이터의 형태를 살펴보자. key와 value로 구성하며, value가 배열일 경우의 표기방법을 나타내 보았다.