[JQeury] Ajax

Ajax

 

  - 비동기 자바스크립트와 XML의 약자

  - 자바스크립트를 이용해 서버와 비동기 방식의 통신을 해서 웹 페이지를 갱신하지 않은 채로

    여러 가지 작업을 수행하는 프로그래밍모델

 

동기적 - 하나의 작업이 완료된 후에만 다음 작업을 진행할 수 있는 구조 (응답이 올때까지 기다려야 함)

               전통적인 경우 - 하나의 완전한 HTML 을 반환하는 형태

비동기적 - 사용자는 요청에 대한 응답이 돌아오지 않은 상태이더라도, 기다림 없이 다른 작업을 진행할 수가 있음

                   하나의 작업이 완료되지 않은 상태에서도 다른 작업을 얼마든지 시작할 수 있는 구조

 

XMLHTTPRequest 가 중간에서 통신을 담당한다.

  - 기존에는 웹브라우저가 웹서버와 통신 => XMLHttp 객체가 웹서버와 통신

클라이언트 => 서버 => 웹서버

  - 웹 서버는 XMLHttp로부터의 요청을 알맞게 처리한 뒤,

     그 결과를 XML이나 단순 텍스트, JSON으로 생성해서 XMLHttp에 전송함

  - 결과는 HTML이 아닌 xml ,json, CSV로 응답된다

 

 

 

 

 [1] Comma Separated Values 

  - 각 항목을 쉼표로 구분해 데이터를 표현하는 방법

 

 [2] xml 형식

  - XML은 HTML 처럼 태그로 데이터를 표현함

  - XML 은 원래 데이터 전송수단이다. TEXT 만있으니까 메모장같은걸로 바로 볼 수 있다

  - 통신에서 데이터 전달 방식으로 자주 사용됨

  - 양이 좀 많다는 단점이 있음

 

 [3] JSON ( Javascript Object Notation )

  - 자바스크립트 객체 형태로 데이터를 표현하는 방법

  - 중괄호 한개가 한개의 객체이다. 

  - 대괄호 = 객체의 배열  => [{객체},{객체},{객체}...]

  - 제약사항 : JSON 에는 객체, 배열, 문자열, 숫자, boolean, null 만 들어갈 수 있다

                                                                ㄴ 문자열은 무조건 큰 따옴표를 사용해야 함

[{
"name" : "홍길동",
"userid": "hong",
"age" : "20"
},{
"name" : "김길동",
"userid": "kim",
"age" : "25"
},{
"name" : "이길동",
"userid": "lee",
"age" : "29"
}]

 

 

 

 

 

JQuery Ajax

  - jQuery 에서 제공하는 Ajax 관련된 메서드

 

 

▶ $.ajax()

    - 가장 많이 사용하는 기본적인 jQuery의 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',
    type: 'GET',
    data: {
        keyword: '김',
        id: 'abc'
    },
    success: function (res) {
 	   $('#div1').append(res);
    }
});

 

 

 

 

▷ $.ajax() 메서드의 옵션

url : 요청을 보낼 서버 URL(JSP, ASP, PHP 등)

type : HTTP 메서드, 기본값은 GET, POST와 GET 중 선택

data : 서버로 전송되는 데이터

dataType : 응답 결과의 데이터 형식 ( xml, html, json, jsonp, script, text ) 

success : 응답이 성공하는 경우 호출되는 콜백함수
error : 에러 발생시 실행되는 콜백함수

contentType : 서버 전송시의 content-type, application/x-wwwformurlencoded 기본

 

 

 

 

 

▷ 서버 페이지

 

@ResponseBody

      - 서버단에서의 핵심

      - @ResponseBody 가 메서드 레벨에 부여되면 메소드가 리턴하는 오브젝트는 뷰를 통해

          결과를 만들어내는 모델로 사용되는 대신,

           메시지 컨버터를 통해 바로 HTTP 응답의 메시지 본문으로 전환됨 (텍스트형식)

 - @ResponseBody 가 없다면, 스트링 타입의 리턴값은 뷰 이름으로 인식될 것임

 - @ResponseBody가 붙었으므로 스트링 타입을 지원하는 메시지 컨버터가 이를 변환해서 HttpServletResponse 의 출력 스트림에 넣어 버린다

 -기존에 modelAttribute 했던걸 @ResponseBody 로 할 수 있다

 - 메시지 컨버터는 파라미터의 @RequestBody와 메서드에 부여한 @ResponseBody를 이용해서 쓸 수 있다

Spring 에서는 기존에 java 객체를 응답받았었다. (vo 아니면 list를 model 에 담아서 보냄)

vo 나 list 를 json 형식으로 바꿔서 응답으로 내려보내야 햄 => 이걸 mapping jackson httpmessageconverter 가 해줌. java 를 json 문서로 자동변환해줌 => 이걸 responsebody 를 사용하면 자동으로 되는 것

JSON 기반의 AJAX를 지원하려면 컨트롤러는 결과를 JSON 포맷으 로 만들어서 돌려줘야 함

 

 

 

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

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

@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);
}});

{"no":"1", "name" : "홍길동", "content" : "hong입니다“} 

=> vo 는 이런방식으로 내려감. (res.no) 이렇게 사용하면됨

 

 

 

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

@RequestBody = vo를 왕창 받아오는 것,

기존의 modelAttribute 로 받아도 됨 : responsebody 가 알아서 json 으로 변경해서 처리해줌

@RequestMapping("/memo/ajaxWrite.do")
@ResponseBody
public ResultVO memoWrite(@RequestBody MemoVO memo) {
logger.debug("ajax 등록, memo={} db에 insert함", memo);
//db에 등록 후, 등록한 정보를 다시 리턴
….
return result;
}

 

 

 

 

 

 

 

 

list 가 응답인경우

 

 

 

 

 

▶ vo 가 응답인경우

 

  ▷ view (ajaxTest2.jsp)

$(function(){
		$('#bt1').click(function(){
			var num =5;
			$.ajax({
				url:"<c:url value='/ajaxTest/detail'/>",
				data:'no='+num,
				type:'GET',
				dataType:'json',
				success:function(res){
					//alert(res);
					var into = "번호:"+res.no +"<br>"
					+ "이름:"+res.name +"<br>"
					+ "내용:"+res.content +"<br>";
					
					$('#div1').append(info);
					
				},
				error:function(xhr,status,error){
					alert('error:'+error);
				}
			});
		});
	});

 

 

 

  ▷ controller

	@RequestMapping("/ajaxTest2")
	public void test2() {
		logger.info("ajaxTest2 화면");
		
	}
	
	@ResponseBody 
	@RequestMapping("/detail")
	public MemoVO detail(@RequestParam (defaultValue = "0") int no) {
		logger.info("ajax-detail, 파라미터 no ={}",no);
		
		MemoVO vo = new MemoVO();
		vo.setNo(5);
		vo.setContent("안녕");
		vo.setName("홍길동");
		
		return vo;

	}

 

 

  ▷http://localhost:9091/herb/ajaxTest/detail?no=5