(2023.12.15) (백오피스 프로젝트) Ajax 사용하기

UI에서 API와 연결해주기 위해서 Ajax를 사용해서 작업을 진행했습니다. 

작업을 진행 하면서 Ajax에 대해서 정리를 하고 제대로 한번 알고 가면 좋을 거 같아서 이번장에서는 Ajax에 대해서 알아보도록 하겠습니다. 

 

1. Ajax란?

ajax는 자바스크립를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능을 이야기합니다. 

 

1-1 비동기 방식은 무엇일까?

☑︎ 웹페이지를 Reload를 하지 않고, 데이터를 불러오는 방식을 이야기합니다. 

☑︎ Ajax는 XMLHttpRequest객체를 통해 서버에 request를 합니다.

 

1-2 Ajax의 장점

☑︎ 웹페이지의 속도가 향상됩니다.

☑︎ 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능합니다. 

 

1-3 Ajax의 단점

☑︎ 페이지 이동이 없는 통시이므로 보안상 문제가 발생할 수 있습니다.

☑︎ 히스토리 관리가 안됩니다.

☑︎ 연속으로 데이터 요청시 서버 부하가 증가할 수 있습니다. 

 

2. Jquery를 이용해서 Ajax 사용하기

 

2-1 Ajax 문법 알아보기

$.ajax({
	type: "post", // GET, POST, PUT
    url: "/test", // 서버 URL
    async : true, // 비동기 여부 설정
    headers : {
    	"Content-Type" : "application/json",
        "X-HTTP-Method-Override" : "POST"
    },
    dataType : "text" // 데이터 타입(html, xml, json, text)
    data : {
    test: test
    }
    success : function (response) {  //결과 성공 콜백함수
    	console.log("success");
        }
    error: function (error) {  //결과 에러 콜백함수
    	console.log(error);
        },
    });