Ajax - 알아보기
ajax를 알아보기 전에 동기식 , 비동기식이 뭔지 알아보겠습니다
동기식 : 한 번에 한 가지씩 실행되고 다음 작업은 이전 작업이 완료된 후에 실행됩니다
비동기식 : 두 개 이상의 작업이 동시에 실행될 수 있는 것을 말합니다
여기서 ajax는 비동기식 웹 개발에 사용되는 기술입니다
(Asynchronous JavaScript and XML의 줄임말입니다)
웹 페이지를 다시 로드하지 않고도 백그라운드에서 서버와 데이터를 주고 받을 수 있습니다
- Ajax - 사용 예시
문법 - Ajax는 Jquery를 사용하는게 더 가독성이 좋기 때문에 Jquery를 사용했습니다
<head>
<title>ajax</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<button onclick="ajax01()">함수호출01</button>
</body>
<script>
전송 방식이 get인 경우
const ajax01 = () => {
$.ajax({
type:"get", // key값 (전송방식 등)
url: "/ajax01", // 주소값
success: function (res) { // 요청이 잘 처리된 경우
console.log("요청성공",res);
},
error: function (){ // 요청이 실패한 경우
console.log("요청 실패");
}
});
}
전송 방식이 post인 경우
const ajax02 = () => {
$.ajax({
type:"post", // key값 (전송방식 등)
url: "/ajax02", // 주소값
success: function (res) { // 요청이 잘 처리된 경우
console.log("요청성공",res);
},
error: function (){ // 요청이 실패한 경우
console.log("요청 실패");
}
});
}
</script>Ajax의 기본 구조입니다 전송 방식 , 주소값 , success , error 로 이루어져 있습니다
success와 error에는 각각의 함수를 사용하고 success의 함수에는 리턴값을 담아주는 매개변수가 들어갑니다
- ajax - 변수로 담은 값 Controller에 넘겨주기
const ajax03 = () => {
const var1 = "hello monday";
$.ajax({
type:"get 또는 post", // key값 (전송방식 등)
url: "/ajax03", // 주소값
data: {
param1: var1, // data 객체에 담아 넘겨줍니다
param2: "hi hi" // 변수로 담은값이 아니여도 가능합니다
// key - value 쌍의 형태를 가집니다
},
success: function (res) { // 요청이 잘 처리된 경우
console.log("요청성공",res);
},
error: function (){ // 요청이 실패한 경우
console.log("요청 실패");
}
});
}Controller에 데이터를 넘겨주는 경우 data객체에 담아 전송하게 됩니다
key - value 형태를 이루고 있고 param1 , param2 가 key값이고 var1 , " hi hi " 가 value를 뜻합니다
data객체에 담긴 값은 파라미터 형식으로 전송되지만
따로 Controller 본문에서 추가적인 응답문을 작성해주어야 합니다
Controller
@GetMapping(value = "/ajax03")
public @ResponseBody String ajax03(@RequestParam("param1") String param1,
@RequestParam("param2") String param2){
return "good";
}@ResponsBody를 사용하여 받아줍니다
@ResponsBody를 사용하지 않고 consol을 출력해보면 html의 모든 정보가
콘솔에 찍히는 것을 확인할 수 있습니다
@ResponsBody는 정말 정말 간단하게 요약하자면 뷰 페이지(jsp)를 응답하지 않고
return값을 그대로 반환하겠다는 의미입니다
- ajax - 객체 받아오기
Script
const ajax05 = () => {
const memberEmail = "aa@aa.com";
const memberPassword = "1q2q3q";
const memberName = "member1";
$.ajax({
type:"get 또는 post", // key값 (전송방식 등)
url: "/ajax05", // 주소값
data: {
"memberEmail" : memberEmail,
"memberPassword" : memberPassword,
"memberName" : memberName
},
success: function (res) { // 요청이 잘 처리된 경우
console.log("요청성공",res);
console.log(res.memberEmail);
console.log(res.memberPassword);
console.log(res.memberName);
},
error: function (){ // 요청이 실패한 경우
console.log("요청 실패");
}
});
}이번에는 여러 정보를 변수에 담아 넘겨줍니다
넘겨준 정보를 토대로 객체를 리턴받고 그 정보는 res에 담깁니다
res에 담긴 객체는 일반적으로 사용하던 방식과 마찬가지로 res.필드명으로 사용이 가능합니다
Controller
@GetMapping(value = "/ajax05")
public @ResponseBody MemberDTO ajax05(@ModelAttribute MemberDTO memberDTO){
System.out.println("memberDTO = " + memberDTO);
return memberDTO;
}ajax에서 data객체에 담겨 넘겨지는 정보는 파라미터형식으로 넘어오기 때문에
@ModelAttribute를 사용하여 바로 객체에 담을 수 있습니다
테스트 코드이기 때문에 담은 DTO객체를 바로 리턴합니다
- ajax - List 리턴받기 / for문 사용해보기
Controller
@Autowired
private MemberService memberService;
@GetMapping("/ajax06")
public @ResponseBody List<MemberDTO> ajax06(){
List<MemberDTO> memberDTOList = memberService.list();
return memberDTOList;
}만들어진 Service의 메소드를 사용하여 List 를 리턴해줍니다
@ResponsBody를 사용하였기 때문에 리턴값을 그대로 반환해줍니다
Script
const ajax06 = () => {
$.ajax({
type:"get 또는 post", // key값 (전송방식 등)
url: "/ajax06", // 주소값
success: function (res) { // 요청이 잘 처리된 경우
console.log("요청성공",res);
for (let i in res){
console.log(res[i]);
console.log(res[i].memberEmail);
}
},
error: function (){ // 요청이 실패한 경우
console.log("요청 실패");
}
});
}Controller에서 리턴받은 List는 res에 담기고
해당 문법 for ( let i in res) 로 res[ i ]로 i가 증가하며 res안의 값을 출력합니다
일반적인 java의 for문과 방식은 거의 똑같다고 볼 수 있습니다
리스트에 담긴 객체의 특정 값만 출력도 가능합니다
