[ajax] XHR,jQuery를 이용한 ajax 문법 총 정리

AJAX 요청을 보내는 방법

1.XMLHttpRequest(XHR) 사용

2.jQuery를 이용한 ajax 사용

 

1.XMLHttpRequest(XHR) 사용 방법

---

문법

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(); // 전송된 요청 취소

코드 설명

xhr.open : open(방식(GET, POST, PUT, PATCH, DELETE, HEAD), "보낼 서버 주소")이라는 메소드 실행

 

xhr.send : open이 요청을 열어줬다면 send로 요청을 전송해준다.

 

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

 

readyState : 요청 시 xhr 객체(코드의 첫 줄) 각 상태별로 readyState가 변경됨 

 

readyState 상태 순서 

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

 

if (xhr.readyState === xhr.DONE)  줄 해석

여기서 말하는 DONE이 readyState의 4번 DONE를 가리킴

 

요청이 완료되면 무~조~건 HTTP 상태 코드가 생깁니다.

 

if (xhr.status === 200 || xhr.status === 201) 줄 해석

여기서 200 || 201이란? 

HTTP 상태 코드를 말한다 

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

---

위 1번 방식을 사용하게 되면 엄청 복잡하고 코드도 길어진다.

 

내가 알던 ajax 문법과 다르다?라고 하시는 분들이 계실 겁니다.

그것은 바로 대중적으로 알려진 jQuery를 이용한 ajax입니다.

 

2.jQuery를 이용한 ajax 사용

---

문법

 

Client (request , 요청)

 <!-- 이렇게 함으로써 외부의 CDN 서버에서 가장 최신의 jQuery 배포판을 불러 올 수 있습니다. //-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    <script>
    function jqueryAJAX(){
    
    $.ajax({
   
    data : { type1 : type1, // data 옵션
    		 type2 : type2,
    },	// 끝에 컴마(,)를 주의해야됨
    url : "/ajax/ajaxController", // url 필수
    success:function(data){ // success option
    console.log(data.length);
    }
    
    })
    
    }
    
    
    </script>

Server (response , 응답 Spring MVC 프레임워크 기준)

@Controller
@RequestMapping("ajax/*")
public class JqueryController {

@RequestMapping("ajax/ajaxController")
	public @ResponseBody List<serverData> getServerData(String type1,String type2) {
		List<serverData> result = menuservice.getServerData(type1,type2);
		return result;
	}

}

Client 코드 설명

$. ajax({}) : ajax 선언

data : server로 보낼 데이터 정의

url (필수) : server로 보낼 url

success : function(data) : 요청이 성공했을 때 (HTTP (2xx)) 실행되는 메서드 (data)는 server에서 보낸 리턴 값

 

Server 코드 설명(Spring mvc에 대한 설명이며 , 다른 언어, 프레임워크는 다를 수 있습니다)

@Controller : 해당 Class를 Controller로 지정하는 어노테이션

@RequestMapping : 해당 Class의 유입 경로는 ajax로 시작하는 url만 받겠다는 어노테이션 예시처럼

                                       ajax/ajaxController로 ajax로 보냈으니 거기에 해당하는 놈이 받는다는 뜻

@RequestBody : 값이 View로 가는 게 아니라 HTTP Response Body로 직접 쓰임 ajax로 데이터 받을 땐 필수

---

jquery ajax 문법 옵션 정리

 

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

url : "/ajax/ajaxController"

 

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

//일반
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 통신 방식 지정

type : 'GET' - GET 방식으로 서버(Server)에 전송 [조회]

type : 'POST' - POST 방식으로 서버(Server)에 전송 [생성]

type : 'DELETE' - DELETE 방식으로 서버(Server)에 전송 [삭제]

type : 'PUT' - PUT 방식으로 서버(Server)에 전송 [갱신]

기본 값 : 'GET'

 

timeout (선택) : 1000 - 요청에 대한 응답 제한 시간으로 단위는 millisecond 

timeout : 1000 ( 단위 : millisecond ) 즉, 1000당 1초 

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

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

기본 값 : "application/x-www-form-urlencoded"

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

beforeSend : function() {
	alert("ajax 호출 시작 시 실행");
}

success (선택) : function(data) {}, - HTTP 요청 성공 시 이벤트 핸들러

success : function(data) {
	alert(data);
}

data : 서버에서 응답한 return 값

error (선택) : function(request, status, error) {}, - HTTP 요청 실패 시 이벤트 핸들러

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

request : 
status : HTTP 상태 코드
error : 에러 메시지

 

complete (선택) : function() {} -  HTTP 요청 완료 시 이벤트 핸들러 (success는 요청 성공 시 , complete는 요청 완료 시)

complete : function() {
	alert("ajax 호출 완료 시 실행");
}