Ajax jquary방식

Ajax

Asynchronous JavaScript and XML의 약자

JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를
주고받는(통신) 방식

데이터 형식은 XML 뿐만 아닌 Text, HTML, JSON, CSV 등 다양한 형식 사용

 

동기식 데이터 통신

클라이언트가 서버로 데이터를 요청하면 응답이 올 때까지 다른 작업은 대기함

비동기식 데이터 통신

클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고
다른 작업 수행 가능, 추후 응답이 오면 응답에 관련된 작업 진행

특징

전체 페이지를 갱신하지 않고 일부분만 업데이트가 가능하며
사용자에게 즉각적인 반응과 풍부한 UI경험 제공 가능
ActiveX나 플러그인 프로그램 설치 없이 이용 가능
Javascript방식, jQuery방식으로 구현 가능

단점

Ajax는 JavaScript이므로 브라우저에 따른 크로스 브라우저 처리 필요
오픈 소스로 차별화가 어려움
연속적인 데이터 요청 시 서버 부하 증가하여 페이지가 느려짐
페이지 내 복잡도가 증가하여 에러 발생 시 디버깅이 어려움

 

jQuery방식

매개변수로 객체 전달을 한다. -> 객체에서 사용하는 key가 정해져 있음
		url : 요청할 서비스의 주소를 작성 -> string <br>
		[type : 요청방식(GET,POST,PUT,DELETE)]<br>
		[data : 서버에 보낼 데이터작성 -> object{key:value,...} ]
		[dataType : 서버에서 응답한 데이터 타입에 대한 설정 -> json, xml, text...
		자동으로 타입설정함.	]
		success : 응답성공시(status=200) 실행할 함수를 설정 -> callback함수 function(data){}
		[error : 응답실패시(status!=200) 실행할 함수를 설정 -> callback함수 function(re,e){}]
		[complete : 응답이 성공이든 실패든 무조건실행하는 함수를 설정 -> callback함수 function(){}]

*[] 표시는 필수는 아님

$("#btn").click(e=>{
			$.ajax({
				url:"<%=request.getContextPath()%>/jquery/ajax.do",
				type:"post",
				data:{name:$("input[name=data]").val(),age:30,},
				success:function(data){
					console.log(data);
					$("<h3>").text(data).css("color","lime")
					.appendTo($("#container"));
				}, 
				error:(r,e)=>{
					console.log(r);
					console.log(e);
				}
			});
		});

 

get방식

$("#getBtn").click(e=>{
			$.get("<%=request.getContextPath()%>/jquery/ajax.do?age=30&name=홍길동",
					data=>{
						console.log(data);
					});
				/* .done(data=>{
					console.log(data);
				}).fail((data)=>{
					console.log(data);
				}); */
		});

post방식

$.post("<%=request.getContextPath()%>/jquery/ajax.do",
					{name:"홍길동",age:30})
					.done(data=>{
						console.log(data);
					}).fail((r,e)=>{
						console.log(r);
						console.log(e);
					});
			}

 

요즘에는 await를 사용한 fetch함수사용 또는 jquary, axios 라이브러리를 설치해서 사용함