Ajax에 대해

Ajax(Asynchronous Javascript + XML)

브라우저상에서 데스크톱 애플리케이션과 같은 웹 페이지를 작성하기 위한 기술

$.ajax({  // 에이잭스 시작하기
	type: GET or POST,
    dataType: json or xml,
    url: 데이터를 전송할 url,
    data: {보낼 데이터 입력},
    async: 비동기 방식 or 동기 방식
    
    success: function (data) {
    	// 에이잭스 통신 성공 시 명령어 입력
    },
    error: function (request, status, error) {
    	// 에이잭스 통신 실패 시 명령어 입력
    }
 });

type

GET 방식은 전송할 정보를 url 뒤에 적어 전송
www.everdevel.com?id=happycat
데이터를 요청하는 용도로 사용
→ 보안 취약, 길이 제한

POST 방식에서 http 프로토콜은 header와 body로 구분되며, body에 데이터가 전송되고, 사람이 전송되는 정보를 볼 수 없다. 데이터를 입력하는 용도로 사용

dataType

에이잭스에서 사용하는 언어는 제이쿼리, 자바스크립트이며, 요청 받는 프로그래밍 언어는 PHP(서버 사이드 언어)가 된다. 제이쿼리와 PHP는 서로 다른 언어라 서로 통신할 수 있는 언어가 필요한데 이를 가능하게 하기 위해 json이나 xml을 사용한다.
json은 xml에 비해 속도가 빠르지만 전송할 데이터가 많은 경우에는 속도가 느리기 때문에 xml을 사용한다.

url

전송할 데이터를 처리할 파일을 기입한다. 예를 들어, 회원가입 시 중복 체크할 아이디를 전송하고 그 아이디를 받아 중복 체크할 파일이 idCheck.php라고 하면 url 값에 idCheck.php 파일명과 경로를 적는다.

data

해당 url에 보낼 실제 데이터를 기입한다. 고객이 입력한 ID가 everdevel이라면 everdevel이라는 값을 id라는 변수명과 함께 보낸다.

async

에이잭스는 비동기 통신 방식을 이용하므로 비동기 통신 방식이 기본값으로 지정되어 있으며, 이를 async의 값에 false를 적용함으로써 동기 방식으로 에이잭스를 사용할 수 있다.

success: function (data) {}

에이잭스 통신이 성공했을 때 실행할 명령문을 기입
예를 들어, 중복 체크할 아이디를 전송한 후 그 결과를 받았고, 이미 사용한 아이디라면 다음과 같은 방법을 사용한다.
$('#idCheckStatus').text('이 아이디를 사용할 수 없습니다.');

error: function (request, status, error) {}

프로그래머 자신이 어떠한 원인으로 실패했는지 에러 코드를 확인하여 수정하기 위해 사용한다.

출처: 웹코딩 시작하기