비동기 방식이란

신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행하는 방식

화면 전환 없이 클라이언트와 서버 같의 XML, JSON, 텍스트, HTML 등의 정보를 교환하기 위해서 사용

대기시간 없이 다른 작업을 바로 수행할 수 있다

Ajax 관련 메서드

load()

사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용
요청한 콘텐츠를 이용해 선택한 요소의 내용을 바꿀 수 있다

URL 주소: 외부 콘텐츠를 요청할 외부 주소 입력

data: 전송할 데이터 입력

전송이 완료되면 콜백 함수에 저장된 코드가 실행된다 (생략가능)

외부파일의 일부 요소만 불러올 수도 있다.

$(요소 선택).load(url, data, 콜백함수)

// example (같은 폴더 내)
// news.html 파일 안 id 값이 news_1 인 값을 id newsWrap 으로 불러와라 
$("#newsWrap").load("news.html #news_1")

$ajax()

사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러온다다.

불러올 수 있는 외부 데이터: HTML, 텍스트, XML, JSON 등

$.ajax({
	url: "전송 페이지"(action url),
	type: "전송 방식"(get, post 방식),
	data: "전송할 데이터",
	dataType: "요청한 데이터 형식"("html", "xml", "json", "text", "jsonp"),
	success: function(result){
		전송에 성공하면 실행될 코드
	},
	error: function(){
		전송에 실패하면 실행될 코드
	}
});

바인딩

비동기 통신 기술을 이용하여 서버 데이터베이스에 데이터를 요청하고, 데이터베이스에 요청한 데이터를 받아와 html 문단 태그에 결합하는 것을 binding이라고 한다

parameter를 controller로 넘겨주기

ajax data에 자신이 넘기고 싶은 data 이름을 정해주고 그 값을 넣는다

jQuery 에서 ajax 사용시 편의상 url에 Parameter을 같이 전송하는 경우가 있는데 귀찮더라도 data를 이용하여 Parameter를 전달하도록 하는게 좋다.  

왜냐하면 Parameter에 특수문자같은 문자가 들어올 경우 문제가 발생할 수 있기으니까

값은 key-value 형태로 담겨진다

controller에서는 map 형태로 param을 받고 service를 지나 mapper로 보내준다

mapper에서는 꼭 parameterType을 정의한다

key 이름을 정확하게 입력해주어야 한다.

$.ajax({ 
	url :'Url',
    type : 'post',
    dataType : 'json', 
    data : { nickName : '닉네임', }, 
    success: function(data){ 
    	console.log("성공"); 
    } 
});

//출처: https://backstreet-programmer.tistory.com/90 [글쓰는 개발자]

2. Controller

  @PostMapping("/Url")
  public @ResponseBody void method(@RequestParam Map<String, Object> param, HttpServletRequest request, DefaultVO defaultVO) {
    service.method(param);
  }

3.Service

public void method(Map<String, Object> map);

4.Mapper

	<insert id="methodName" parameterType="java.util.Map">
		INSERT INTO TableName
		 (
		 	[닉네임],
		 ) 
		 values
		 (
		 	#{nickName},
		 );
	</insert>