[제이쿼리] jQuery 에이작스 (Ajax) 사용하기

 

제이쿼리 (jQuery) 에이작스 (Ajax) 사용하기

---

안녕하세요? 장장스입니다.

오늘은 제이쿼리의 꽃(?) 같은 Ajax 입니다.

 

 

Ajax란?

---

Ajax(Asynchronous JavaScript and XML)란 비동기 방식의 Javascript와 XML을 가리킵니다. 

 

 

동기 방식	비동기 방식
서버에 신호를 보냈을 떄 응답이 돌아와야 다음 동작을 수행한다.	서버에 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다.

 

Ajax?

Ajax를 이용하는 이유는 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버간에 XML, JSON(JavaScript Object Notation), 텍스트, HTML 등의 정보를 교하기 위해서입니다. Ajax가 등장하기 전에는 반드시 서버를 거쳐야만 자료를 요청할 수 있었습니다. 그러나 Ajax를 이용하면 사용자가 서버에 자료를 요청 시 화면의 전환 없이 요청한 자료를 전송받을 수 있습니다. 또 자료를 요청할 경우 어느 정도 시간이 소요되는 동기 방식에 반해 Ajax를 이용하면 클라이언트가 기다릴 필요 없이 다른 작업을 바로 수행할 수 있습니다.

 

Ajax 사용 후 방식

Ajax를 사용해 사용자가 서버에 자료를 요청할 경우 서버 스크립트(Server Script)페이지를 거치지 않아도 자료를 받아올 수 있습니다. 즉, 클라이언트는 서버에 자료를 요청하는 사이에도 다른 작업을 할 수 있죠. 카페나 블로그의 게시글에 댓글을 달때 페이지 전환 없이 바로 할 수 있는 것도 Ajax를 사용했기 때문입니다.

 

 

Ajax 관련 메서드의 종류

---

 

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

 

 

 

load() 메서드

---

load() 메서드는 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용합니다. 요청한 콘텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있습니다.

$(요소 선택).load(URL, data, 콜백 함수);

 

 

$.ajax() 메서드

---

$.ajax() 메서드는 사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 용청한 데이터를 불러옵니다.

 이때 불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 형식 등이 있으며, 선택한 요소에 Ajax를 이용해 요청한 외부 데이터를 불러옵니다. 옵션은 속성과 값으로 이루어지며, 중괄호{ } 내의 다양한 옵션을 입력할 수 있습니다.

 

 

다음과 같은 형태로 사용됩니다.

$.ajax({
	url: "전송 페이지"(action url),
	type: "전송 방식"(get, post),
	data: "전송할 데이터",
	dataType: "요청한 데이터 형식"("html", "xml", "json", "text", "json"),
	success: function(data){
		//전송에 성공하면 실행될 코드;
	},
	error: function(){
		//전송에 실패하면 실행될 코드;
	}
});

 

$.ajax() 메서드의 옵션 종류

종류	설명
async	통신을 동기 또는 비동기 방식으로 설정하는 옵션입니다. 기본값은 비동기 통신 방식인 true로 설정되어 있습니다. 만일 비동기 방식으로 설정되어 있다면 사용자 컴퓨터에서 서버로 데이터를 전송하고 요청하는 동안에도 다른 작업을 할 수 있습니다.
beforeSend	요청하기 전에 함수를 실행하는 이벤트 핸들러입니다.
cache	요청한 페이지를 인터넷에 캐시(저장)할지의 여부를 설합니다. 기본값은 true 입니다.
complete	Ajax가 완료되었을 때 함수를 실행하는 이벤트 핸들러입니다.
contentType	서버로 전송할 데이터의 content-type을 설정합니다. 기본값은 application/x-www-form-urlencoded 입니다.
data	서버로 전송할 데이터를 지정합니다.
dataType	서버에서 받아올 데이터의 형식을 지정합니다. 생략하면요청한 자료에 맞게 자동으로 형식이 설정됩니다.
error	통신에 문제가 발생했을 때 함수를 실행합니다.
sucess	Ajax로 통신이 정상적으로 이뤄지면 이벤트 핸들러를 실행합니다.
timeout	통신 시간을 제한합니다. 시간 단위는 밀리초입니다.
type	데이터를 전송할 방식(get/post)을 설정합니다.
url	데이터를 전송할 페이지를 설정합니다. 기본값은 현재 페이지입니다.
username	HTTP 액세스를 할 때 인증이 필요할 경우 용자 이름을 지정합니다.

 

또한 비동기 통신 방식으로 데이터를 전송하거나 요청하려면 데이터를 가공해야 합니다. 다음은 비동기 통신 방식으로 데이터를 전송하거나 요청할 때 사용하는 Ajax 전송 데이터 가공 메서드입니다.

 

$.ajax() 메서드의 옵션 종류

 

종류	사용법	설명
serialize()	$("from").serialize();	사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을 'name1=value1 & name2=value2, …; 와 같은 쿼리 스트링 형식의 데이터로 변환해 반환합니다.
serializeArray()	$("form").serializeArray();	사용자가 입력 요소에 값을 입력한 데이터의 전송 방식을[{name1: value1},{name2: value2}]와 같은 배열 객체로 변환해 반환한다.
$.param()	$.param(Object);	{name1: value1, name2: value2}와 같이 작성된 객체를 가공해 name1=value1 & name2=value2 와 같은 쿼리 스트링 형식의 데이터로 변환해 반환합니다.
JSON.parse()	JSON.parse( {"name" : "value" });	객체 형태로 작성한 문자열 데이터를 객체로 가공하여 반환합니다.
JSON.stringify()	JSON.stringify({"name1" : "value1" , "name2" : "value2" })	객체를 문자열 데이터로 가공하여 반환합니다.

 

 

 

 

 

 

 

 

References

---

• https://api.jquery.com/category/ajax/

 

 

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)