JavaScript/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 호출 완료 시 실행");
}

 

반응형
  1. BlogIcon 자전거사랑 2020.04.07 16:38 신고

    안녕하세요. 좋은 글 잘 읽었습니다. 혹시 글 공유해도 될까요?

  2. gf0308 2020.08.04 17:12

    좋은 정보 감사합니다
    도움이 많이 되었습니다:)

반응형

개념


Ajax(Asynchronous JavaScript and XML, 에이잭스)는 JavaScript 라이브러리 중 하나이며,

비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

 

JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술

 

출처 : 위키백과

 

저 말중에 비동기적인 웹 애플리케이션 제작 이란 말이 눈에 들어온다

웹 애플리케이션 제작은 알겠는데 비동기? 동기?

 

 

비동기와 동기의 개념과 차이점


동기(synchronous)

말 그대로 동시에 일어난다는 뜻입니다. 요청과 그 결과가 동시에 일어난다는 약속입니다.

바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다.

동기 방식

 

비동기(Asynchronous)

동시에 일어나지 않는다는 뜻입니다. 요청과 결과가 동시에 일어나지 않을 거라는 약속입니다. 

비동기 방식

 

사용 이유


페이지 새로고침 없이 데이터 전환/변경

 

 

동작 방식


1. XMLHttpRequest Object 생성

2. callback function 생성

3. Java (Server) request

4. JSP,JavaScript (Client) response 

 

 

장점


1.데이터 전환/변경이 필요한 부분만 새로고침 하여 부하를 덜어줌으로써 속도가 향상된다.

 

 

단점


1.Internet Explorer 일부 버전에선 문제가 있어 별도의 설정을 해야 한다.

2. 히스토리가 남지 않는다.

3. 비동기 방식의 무차별 요구로 인한 서버 다운

 

 

비동기적인 웹 애플리케이션 제작


동기 : Client(request) -> Server(response) 이처럼 동기 방식의 웹을  

비동기 : Client(request)  Client(request) -> Server(response) -> Client(request) -> Server(response) -> Server(response)

 

이렇게 비동기식으로 요청하는 개발 기법을 말한다.


한 줄 정리 

 

비동기 : 요청 요청 응답 요청 응답 응답

동기 : 요청 응답 요청 응답 요청 응답

 

 

문법은 다음 시간에..

 

반응형

+ Recent posts