AJAX (jQuery 방식으로 통신 구현)

✅ jquery가 제공하는 함수 이용

$.ajax 메소드 : 요청에 대한 상세설정을 할 때, header,요청내용 설정
$.get 메소드 : 기본 get방식요청 처리할 때 사용 - 간편함수
$.post 메소드 : 기본 post방식요청 처리할 때 사용
-> $.get 과 $.post 는 데이만 보낼때 사용

• jsp 파일

<p>
매개변수로 요청에 대한 설정을 한 객체를 전달한다.<br>
매개변수 객체의 key값은 $.ajax()함수에서 정해놓음<br>
		
밑에 속성중에 앞 뒤에 []친 것은 선택이고, [] 없는것을 필수적으로 필요한 것들이다
url : 요청주소를 설정 -> string<br>
[type : 요청방식(get,post) -> string  * default : get방식임      ]<br> 
[data : 서버에 요청할때 전송할 데이터 -> Object({key:value,...})     ]<br>
[dataType : 응답데이터 타입에 대한 설정 -> string(json,html,text...)    ]<br>
success : 응답이 완료되고 실행되는 callback함수  * status가 200일때(성공) 실행하는 함수 -> (data)=>{}<br>
[error : 응답이 완료되고 실행되는 callback함수 * status가 200이 아닐때 실행하는 함수 -> (r,m,e)=>{}  ]<br>
[complete : 응답이 성공, 실패되도 무조건 실행되는 함수 -> ()=>{}  ]<br>
</p>


	<button id="btn">기본 $.ajax 이용하기</button>
	<button id="btnGet">기본 $.get이용하기</button>
	<button id="btnPost">기본 $.post이용하기</button>

	<div id="container"></div>
	<script>
	
		// $.get 메소드를 이용한 방법
		$("#btnGet").click(e=>{
			$.get("<%=request.getContextPath()%>/jquery/ajax.do?name=최주영&age=27"
					,data=>{
						console.log(data);
						$("<h4>").text(data).css("color","lime").appendTo($("#container"));
					});
		}) 
		
		// $.post 메소드를 이용한 방법
		$("#btnPost").click(e=>{
			$.post("<%=request.getContextPath()%>/jquery/ajax.do",
					{name:"김재훈",age:29},
					
					data=>{
					$("<h1>").text(data).css("color","cornflowerblue").appendTo($("#container"));
			});
		})
		
		
		// $.ajax 메소드를 이용한 방법
		$("#btn").click(e=>{
			$.ajax({
				 url:"<%=request.getContextPath()%>/jquery/ajax.do",
				 type:"get",
				 data:{name:"유병승",age:19},  // get방식일때 알아서 키값들을 잘라서 해석해줌
				 success:(data)=>{ // responseText 속성에 저장된 값을 data에 저장함
					/* console.log(data); */
					$("<h3>").text(data).css("color","magenta").appendTo($("#container"));
					// 응답 성공시 데이터를 갖고와서 프런트에서 태그 만들어줌 (CSR)	
				 },error:(r,m)=>{ // 첫번재 매개변수 : 속성들,  두번째매개변수 : success or error  세번째매개변수:암것도없음
					 if(r.status==404)alert("요청한 페이지가 없습니다.");
				 },
				 complete:()=>{
					 alert("서버와 통신끝!");
				 }
				 
			});
		});
	</script>

• 서블릿 파일

package com.ajax.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/jquery/ajax.do")
public class JqueryBasicServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

    public JqueryBasicServlet() {
        super();
        // TODO Auto-generated constructor stub
    }


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("name");
		int age=Integer.parseInt(request.getParameter("age"));
		System.out.println(name+age);
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();  
		out.print(name); // responseText에 저장함
		out.print(age); // responseText에 저장함
		out.print(" 사용자가 보낸 데이터"); // responseText에 저장함
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
//		doGet(request, response);
		request.setCharacterEncoding("utf-8");
		String name=request.getParameter("name");
		int age=Integer.parseInt(request.getParameter("age"));
		System.out.println("post방식으로 요청");
		System.out.println(name+age);
		
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();  
		out.print(name); // responseText에 저장함
		out.print(age); // responseText에 저장함
		out.print(" 사용자가 post방식으로 보낸 데이터"); // responseText에 저장함
	}

}