[AJAX] JQuery로 AJAX 사용하기

우선 AJAX가 뭔지 알고 가자.

 

AJAX

Asynchronous Javascript And Xml

각 앞글자를 딴 기술로 비동기 방식 웹 개발 방법이다.

 

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 주고받으며

클라이언트와 서버 간 XML 데이터를 주고받을 수 있다.

 

말이 어렵다. 단순하게 설명하자면

 

웹 페이지를 새로고침 없이 동적으로 바꿀 수 있다.

 

 

클라이언트와 서버가 직접 데이터를 주고받는게 아닌

 

ajax를 거쳐서 데이터를 주고받기 때문에 새로고침 없이 사용자는 계속해서 자연스럽게 브라우저를 사용할 수 있다.

 

---

장점

• 웹 페이지를 새로고침 없이 갱신 가능
• 기존에 불가능했던 UI 적용 가능
• 페이지 이동 없이 빠른 화면 전환 가능
• 플러그인 없이도 웹페이지 구현 가능

 

단점

• 클라이언트에서 서버로 데이터를 요청하여 받는 형식으로, 클라이언트 요청 없이 서버에서 보내는 데이터의 실시간 처리는 불가능
• 다른 도메인으로의 데이터 전송 불가
• 페이지 이동 없이 script로 이루어지기 때문에 보안 문제 발생 가능
• 연속으로 데이터 요청 시 서버 부하 증가
• ajax 호환 불가능한 브라우저가 있음
• sciprt로 작성되기에 디버깅이 힘들다.

 

AJAX 지원하는 웹 브라우저

• IE 5.0 이상, 기타 IE 기반 브라우저
• Gecko 기반 Mozilla, FireFox, Netscape 7.1 이상
• 애플 사파리 1.2 이상
• 오페라/오페라 모바일 8.0 이상
• 구글 크롬

AJAX 지원하지 않는 웹 브라우저

• 오페라 7 이하
• IE 4.0 이하
• 텍스트 기반의 브라우저
• 시각장애인을 위한 브라우저
• 1997년 이전 브라우저

---

사용법

$.ajax({
	type: "post",		//type - post, get, put 등
    url: "./get_data",	//데이터 요청할 서버 주소
    async: true,		//비동기 사용 여부, 기본 = true
    dataType: "json",	//서버에서 반환되는 데이터 방식 - text,html,xml,json 등
    contentType: "application/json", //서버에 데이터를 보낼때 content-type값
    data: {				//서버에 보낼 데이터 지정
    	UserID: userid,
        PW : pw
    },
    beforeSend: function() {	//ajax 수행하기 전
    	console.log("before send");
    },
    success: function(data) {	//통신 성공
    	console.log("success");
    },
    error: function(request, status, error) {	//서버에서 처리중 에러
    	console.log(error);
    },
    complete: function() {		//ajax수행 종료시
    	console.log("complete");
    }
});

• type: get, post, put, delete 등 http 통신의 종류를 설정
• url: 데이터를 요청할 서버 주소 지정
• async: 동기/비동시 방식 지정
• dataType: 서버에서 받을 데이터 형식 지정
  • xml: xml 문서
  • html: html을 text 데이터로 받아옴, script 포함 가능
  • script: script를 text 데이터로 받음
  • json: json 형식 데이터로 받아옴
  • text: 일반 text 형식
• contentType: 서버에 데이터를 보낼 때 content-type 헤더 값
  • application/json
  • application/x-www-form-urlencoded
• data: 전송할 값들
  • JSON.stringify(form) 형태로도 전달 가능
• beforeSend: ajax 요청 전에 실행
• success: ajax 요청 성공 후 반환되는 값들 받음
• error: dataType에 맞지 않는 값 형식이나 요청 실패 시 호출
• complete: 성공/실패 유무에 상관없이 ajax 호출 완료 시 실행