[JavaScript] Ajax 문법

Ajax : Asynchronous JavaScript and XML

- 비동기적 자바스크립트와 XML

- 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미함

- XML과 JSON 형식을 많이 사용

 

 

< Ajax 요청을 보내는 방법 >

 

1. XMLHttpRequest 사용

2. jQuery를 이용한 Ajax 사용

 

 

 

🔽 XMLHttpRequest 사용 방법

var xhr = new XMLHttpRequest(); // 선언
xhr.onreadystatechange = function() { //요청에 대한 콜백
	if(xhr.readyState === xhr.DONE) { // 요청이 완료되면
    	if(xhr.status === 200 || xhr.status === 201) {
        	console.log(xhr.responseText);
        } else {
            console.error(xhr.responseText);
        }
    }
};
xhr.open('GET', '/ajax/ajaxController'); // 메소드와 주소 설정
xhr.send(); // 요청 전송
// xhr.abort(); // 전송된 요청 취소

- onreadystatechange : 요청에 대한 응답을 받는 이벤트 리스너

- readyState : 요청 시 xhr객체 상태별로 readyState가 변경됨

🔽 readyState 상태 순서

0(xhr.UNSENT, 보내지 않음) -> open() 메소드 실행 1(xhr.OPENED)로 변경 -> send() 메소드 실행 2(xhr.HEADERS_RECEOVED)로 변경 3(xhr.LOADING) 로딩중 4(xhr.DONE) 요청이 완료됨

 요청이 완료되면 (xhr.DONE) 무조건 HTTP 상태 코드가 생깁니다. (200 or 201)

HTTP 2xx : 요청을 성공적으로 받았으며 인식했고 수용하였다.

 

=> XMLHttpRequest 방식을 사용하게 되면 복잡하고 코드도 길어짐

 

 

🔽 jQuery를 이용한 Ajax 사용 방법

 

클라이언트 (request 요청)

function jqueryAjax(){
	$.ajax({
    	data : {보낼 데이터...
        },
        url : "/ajax/ajaxController",
        success : function(data){
        	console.log(data.length);
        }
    })
}

 

✅  jQuery 를 사용한 Ajax 문법 옵션 정리

 

- url (필수) : 서버로 보낼 URL

- data (선택) : 서버로 보낼 데이터

// 일반
data : {type1: type1,
		type2: type2}
        
// JSON으로 보내기
data : JSON.stringify({
	type1: type1,
    type2: type2})

 

- dataType (선택) : 통신의 결과로 넘어올 데이터의 종류를 지정

dataType : "json" - JSON 형식의 데이터로 배열,객체를 포함하는 문자열(권장) dataType : "text" - 일반적인 문자열 dataType : "html" - HTML을 포함한 문자열 dataType : "script" - 새로운 스크립트 dataType : "jsonp" - 다른 도메인으로 부터 전송되는 JSON 데이터 dataType : "xml" - XML 형식의 데이터 기본 값 : MIME 유형

 

- type (선택) : GET, POST, DELETE, PUT 등 통신 방식 지정. 기본값은 GET

- timeout (선택) : 요청에 대한 응답 제한 시간. 단위는 millisecond (1000 -> 1초)

- contentType (선택) : 서버에 데이터를 보낼 때 형식을 지정

     ex ) contentType : "application/json" >> 서버에 데이터를 보낼 때 JSON 형식으로 보냄

- beforeSend (선택) : HTTP 요청 전에 발생하는 이벤트 핸들러

- success (선택) : HTTP 요청 성공 시 작동하는 이벤트 핸들러

- error (선택) : HTTP 요청 실패 시 작동하는 이벤트 핸들러

- complete (선택) : HTTP 요청 완료 시 작동하는 이벤트 핸들러

 

 

정리 출처 : https://java119.tistory.com/4