MVC모델에서 컨트롤러와 AJAX간 통신에 대한 질문입니다.

간단히 설명드리자면.. 버튼을 누르면 id=result인 div에 searchChatroomList.jsp를 던져주는 것을 구현하고 싶습니다.

우선 2-1처럼 load 메소드를 사용했을 땐 정상적으로 작동이 되는데, AJAX를 이용하여 어떻게 같은 효과를 낼 수 있을지 궁금합니다.

일단 2-2 코드(동작X)를 짜 봤는데 id=result div에 searchChatroomList.jsp를 던져주는 것을 어떻게 구현해야 할지 모르겠네요.

도움 부탁드리겠습니다.

1. controller 부분

	@RequestMapping(params="method=searchChatroomList")
	public String searchChatroom(@RequestParam("keyword") String keyword, Model model) throws Exception {
		ArrayList<ChatroomListVO> chatroomList = chatroomListService.searchChatroom(keyword);
		model.addAttribute("chatroomList",chatroomList);
		return "searchChatroomList";
	}

2-1. load 메소드 사용

$(document).ready(function() {
	$("#button").click(function() {
		var keyword = $('#keyword').val();
		$("#result").load("chatroomlist.do?method=searchChatroomList", 
				{keyword: keyword
			});
	});
});

2-2. AJAX 사용

$(document).ready(function() {
	$("#button").click(function() {
		var keyword = $('#keyword').val();
		
		$.ajax({
			url: 'chatroomlist.do?method=searchChatroomList',
			type: 'GET',
			data: {keyword: keyword},
			success: function() {
				
			}, 
			error: function(er) { //에러발생시 경고창 생성
				alert(er);
			}
		});
	});
});

3. HTML

<div id = "search">
	<form action = "/chatroomlist.do" method="post">
		<input type="text" placeholder="검색어 입력" id="keyword"/>
	</form>
</div>

<button type="button" id="button">search</button>

<div id="result">
first
</div>