AJAX에 대해서는 페이지를 새로 고치지 않고 페이지 일부를 변경해주는 비동기 통신을 사용한 기술이라고 알고있지만 조금더 상세히 알아보기 위해서 작성하게되었다.
AJAX의 정의
Ajax란 Asynchronous JavaScript and XML(비동기식 자바스크립트와 xml)의 약자입니다.
비동기 방식 - 웹페이지를 리로드하지 않고 데이터를 불러오는 방식
Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다.
간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다.
-> JAVA스크립트를 통해서 서버에 데이터를 요청하는 것
AJAX를 왜 사용할까
기본적으로 HTTP는 요청을 보내고 응답을 받으면 연결이 끊기는 통신이다.
따라서 화면의 내용을 변경하기위해서는 다시 요청을 하고 응답을 받으며 페이지를 갱신하게된다.
이때 자원과 시간을 낭비한다고 한다.
이때 낭비되는 자원과 시간을 절약하기위해서 전체 페이지가 아닌 일부분을 갱신할 수 있도록 XMLHttpRequest객체를 통해서 요청을 한다. 이때 JSON형태나 XML 형태로 데이터를 받아서 갱신하기때문에 자원과 시간을 아낄수 있다.
서버와 데이터를 주고받을 수 있는 형태의 종류
- JSON
- XML
- HTML
- 텍스트 파일 등
AJAX의 장단점
장점
-
웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신
-
웹 페이지가 로드된 후에 서버로 데이터 요청, 응답 가능
-
백그라운드 영역에서 서버로 데이터를 보냄
-
웹페이지의 속도향상
-
서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
-
서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어듬
-
기존 웹에서는 불가능했던 다양한 UI가 가능
단점
-
Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다
-
Ajax로는 바이너리 데이터를 보내거나 받을 수 없다
-
Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다
-
클라이언트의 PC로 Ajax 요청을 보낼 수는 없다
AJAX와 JQuery를 사용한 예제 코드
btn-save라는 id를 갖는 버튼을 클릭했을때 회원정보를 저장하는 코드
let index={
init: function(){
$("#btn-save").on("click",()=>{ //function(){} 이거 대신 ()=> this 를 바인딩하기위해서
this.save();
});
},
save:function(){
// alert('user의save함수호출됨');
let data ={
username: $("#username").val(),
password: $("#password").val(),
email: $("#email").val()
};
//console.log(data);
//ajax호출시 default가 비동기 호출
//ajax가 통신을 성공하고 json을 리턴해주면 자동으로 자바 오브젝트로 변환해준다
$.ajax({
//회원 가입 수행 요청
type:"POST",
url: "/auth/joinProc",
data: JSON.stringify(data), //http body데이터
contentType: "application/json; charset=utf-8", //body 데이터가 어떤 타입인지(MIME)
dataType: "json" //요청을 서버로해서 응답이 왔을 때 기본적으로 모든 것이 문자열 (생긴게 json 이라면) -> javscript로 변경해준다
}).done(function(resp){ //성공
alert("회원가입이 완료되었습니다.");
location.href="/";
}).fail(function(error){ //실패
alert("중복된 아이디 입니다");
location.href("/joinForm");
//alert(JSON.stringify(error));
}); //ajax 통신을 이용해서 3개의 데이터를 json으로 변경해서 insert 요청!!!
}
}
index.init();