JQuery Ajax

$.ajax() 메서드 - 가장 많이 사용함

$.ajax(options) ;
$.ajax(url, options) ;

- options : 옵션 객체

$.ajax('/search.do', {
success: function (res) { }
});

- success 속성 : 이벤트
- $.ajax() 메서드는 Ajax가 성공했을 때 자동으로 success 이벤트를 실행함
- success 이벤트 리스너의 첫 번째 매개변수는 Ajax가 성공했을 때 받은 데이터
- $.ajax() 메서드는 내부에서 XMLHttpRequest 객체를 만들어 Ajax를 수행함

$.ajax({
      url: '/search.do',
      success: function (res) {
      $('#div1').append(res);
      }
});

매개변수 url은 옵션 속성으로 지정할 수도 있다

$.ajax() 메서드의 옵션

옵션 속성 이름 설명 자료형
url            요청을 보낼 서버 URL(JSP, ASP, PHP 등)
type         HTTP 메서드, 기본값은 GET, POST와 GET 중 선택
data         서버로 전송되는 데이터
dataType 응답 결과의 데이터 형식
가용한 형식 : xml, html, json, jsonp, script, text
success     응답이 성공하는 경우 호출되는 콜백함수
error      에러 발생시 실행되는 콜백함수

$.ajax({
      url: '/search.do',
      type: 'GET',
      data: {
      keyword: '김',
      id: 'abc'
      },
      success: function (res) {
      $('#div1').append(res);
      }      
});

요청 매개변수와 함께 Ajax 요청 수행

Jquery Ajax - 서버 페이지

스프링 MVC에서 결과를 JSON 포맷으로 만드는 두 가지 방법
[1] JSON 지원 뷰를 사용하는 방법
 모델에 JSON으로 변환할 오브젝트를 넣고,
MappingJacksonJsonView 뷰를 선택하면 됨

MappingJacksonJsonView 를 통한 JSON 응답 생성
 스프링 3 버전은 자바 객체를 JSON으로 변환해서 보여주는 뷰 구
현 클래스인 MappingJacksonJsonView를 제공함

<beans:bean id="jsonView"
      class="org.springframework.web.servlet.view.json.MappingJacksonJsonView" />
먼저 jsonView를 빈등록하고

<beans:bean class="org.springframework.web.servlet.view.BeanNameViewResolver">
      <beans:property name="order" value="0" />
</beans:bean>
빈을 이름으로 검색 우선을 넣어주고 우선순위(order)를 0으로 해준다

ModelAndView(String viewName, String modelName, Object modelObject)
spring - JSON 응답 생성

@RequestMapping("/ajaxTest1.do")
public ModelAndView ajaxTest1() {
logger.debug("ajax 조회");
List<MemoVO> memoList = new ArrayList<MemoVO>();
MemoVO meno1=new MemoVO("홍길동","안녕");
memoList.add(meno1);
MemoVO meno2=new MemoVO("김길동","hi");
memoList.add(meno2);
MemoVO meno3=new MemoVO("이길동","hello");
memoList.add(meno3);
return new ModelAndView("jsonView", "memoList", memoList);
}

 [2] @ResponseBody 를 이용하는 것 (주로 이용)
 콘텐트교섭을 통해 JSON 뷰를 결정할 것이 아니고, 항상 JSON으로
고정됐다면 @ResponseBody 를 이용하는 편이 훨씬 간결함

@ResponseBody 가 메서드 레벨에 부여되면 메소드가 리턴하는 오브
젝트는 뷰를 통해 결과를 만들어내는 모델로 사용되는 대신, 메시지 컨
버터를 통해 바로 HTTP 응답의 메시지 본문으로 전환됨

@RequestMapping("/test.do")
@ResponseBody
public String test(){
      String result="<html><body>Hello spring</body></html>";
      return result;
}

- @ResponseBody 가 없다면, 스트링 타입의 리턴값은 뷰 이름으로 인식될 것임
-@ResponseBody가 붙었으므로 스트링 타입을 지원하는 메시지 컨버터가 이를 변환
해서 HttpServletResponse 의 출력 스트림에 넣어 버린다
- @RequestBody, @ResponseBody는 XML 이나 JSON 과 같은 메시지 기반의 커뮤니케이션을 위해 사용됨

AJAX 요청을 보내는 방법
[1] 단순 GET방식
[2] POST방식
 1) 일반 폼을 보내는 것
 2) JSON 메시지를 보내는 것

JSON을 이용한 AJAX 컨트롤러:GET+JSON

[1]JSON 변환을 지원하는 MappingJacksonHttpMessageConverter를 AnnotationMethodHandlerAdapter 빈의 messageConverters 프로퍼티에
추가해준다

<mvc:annotation-driven>

<mvc:annotation-driven>에 의해 자동으로 등록되는 빈 정보
 (1) DefaultAnnotationHandlerMapping
 (2) AnnotationMethodHandlerAdapter
 (3) ConfigurableWebBindingInitializer
 (4) 메시지 컨버터
 AnnotationMethodHandlerAdapter 의 messageConverters 프로퍼티로 메시지 컨
버터들이 등록됨
 4 개의 디폴트 메시지 컨버터와 함께 Jaxb2RootElementHttpMessageConverter와
MappingJacksonHttpMessageConverter가 추가로 등록됨
 단, 각각 JAXB2와 Jackson 라이브러리가 클래스패스에 존재하는 경우에만 등록됨

[2]컨트롤러 메서드에 @ResponseBody 애노테이션을 붙여준다

30
@RequestMapping("/memo/ajaxDetail.do")
@ResponseBody
public MemoVO memoDetail(@RequestParam int no) {
      logger.debug("ajax 상세 조회, no={}", no);
   //db에서 no에 해당하는 정보를 조회한 결과를 리턴
   MemoVO memo=new MemoVO(no, "홍길동","안녕");
   return memo;
}

=> 이 컨트롤러가 리턴하는 MemoVO 오브젝트는 JSON 포맷의 메시지로 변환됨
=>MemoVO 오브젝트는 @ResponseBody 설정에 따라
MappingJacksonHttpMessageConverter에 넘겨지고, JSON 메시지로 만들어져
HTTP 응답 메시지 본문으로 설정되어 클라이언트로 보내짐

[3] 클라이언트에서 자바스크립트를 이용해 해당
URL(/memo/ajaxDetail.do)을 호출해주고 그 결과를 받아서 사용자에게
알려주는 코드를 작성

var data='no='+$('#no').val();
$.ajax({
   url: '<c:url value="/memo/ajaxDetail.do"/>',
   type: 'get',
   dataType: 'json',
   data:data ,
   success: function (res) {
      var output="번호 : "+ res.no+"<br>"
         +"이름 : "+res.name +"<br>"
         +"메모 : " + res.content;
   $('#result').html(output);
}});

- JSON의 장점 : 자바의 MemoVO 오브젝트의 프로퍼티에 접근하는 것과 비슷한
표기 방법을 사용할 수 있다는 점
- MemoVO 타입을 JSON으로 변환해서 받은 결과는 res.name, res.content 와 같은
식으로 사용할 수 있다

DooTheG

JQuery Ajax

$.ajax() 메서드의 옵션

Jquery Ajax - 서버 페이지

<mvc:annotation-driven>

티스토리툴바