[Javascript] Ajax

Ajax(Asynchronos Javascript And XML)

- 자바스크립트를 통해서 서버에 데이터를 요청하는 것

- 새로고침을 할 필요없이 부분 부분만 로딩되므로 속도가 빠름

-비동기식

 

동기식 / 비동기식 차이

 

동기식은 대표적인 예로 우리가 웹사이트 로그인을 할 때 아이디와 패스워드를 입력하여 서버로 전송하고 서버로 부터 응답을 받은 후

로그인 성공, 실패 웹페이지로 이동하는 것, 서버로 데이터를 요청하고 응답이 오는 시간동안 작업을 멈추고 기다리는 것을 뜻함.

 

비동기식은 서버로 데이터를 요청하고 응답이 오는 시간동안 웹은 자신의 다른 업무를 진행하고 응답이 오면 그 후에 작업을 하기때문에,

사용자의 입장에서는 화면 갱신이 없어 편리하고 빠르게 작업을 처리하는 것처럼 느껴짐

 

GET / POST 차이

GET방식은 URL에 정보가 노출되므로, 데이터를 단순히 읽어 오는 경우에 쓰임

POST방식은 데이터를 생성, 수정, 삭제하는 경우 (데이터를 변경하는 경우)에 사용 

 

Ajax 기본예제

$.ajax({
	type: "GET", //요청 메소드 방식
	url:"/AjaxTest/ex01.do",
	dataType:"text", //서버가 요청 URL을 통해서 응답하는 내용의 타입
	success : function(result){
		//서버의 응답데이터가 클라이언트에게 도착하면 자동으로 실행되는함수(콜백)
		//result - 응답데이터
		//$('#result').text(result);
		alert(result);
	},
	error : function(a, b, c){
		//통신 실패시 발생하는 함수(콜백)
		alert(a + b + c);
	}
});

 

 

 

dataType 

Ajax를 통해 호출한 페이지의 Return 형식. 서버에서 전송받은 data형식

형식에 따라 xml, json, html, text 등을 사용

 

 

data

요청과 함께 서버에 보내는 data (String 또는 Map)