Spring RESTful 웹서비스 어플리케이션 작성(2)

Ajax 개요

Ajax 란?

• 웹 사용자들에게 좀 더 수준 높은 인터페이스를 제공할 수 있도록 도움을 주는 기술의 묶음
• 그 자체가 특정한 기술이 아니라 html, css, jsp, xml, XMLHttpRequest 객체를 비롯한 기존 여러 기술들을 조합해서 사용하는 웹의 새로운 접근법
• 비동기적이라는 의미는 서버로부터 데이터가 로드되는 동안에도 계속해서 페이지를 사용할 수 있다는 의미로, 서버가 데이터를 전달해주면 Ajax 이벤트가 발생하여 서버로부터 받은 데이터를 읽어 페이지의 일부를 수정

---

Ajax 활용 예시

1. 라이브 검색

• 자동완성이라고 불리는 기능은 주로 Ajax에 이용, 검색 사이트의 대부분의 사용하는 기술이고, 검색어를 입력하는 동시에 검색 결과가 나타나도록 한다.

2. 사용자 정보 표시

• 회원가입 시 중복 아이디일 경우, 이미 사용 중인 아이디입니다. 를 아이디 입력과 동시에 중복 메시지를 표시해주는 기능에서도 활용
• 온라인 쇼핑몰에서 장바구니에 원하는 물품을 추가했을 때 페이지 이동이나 전체 페이지의 새로고침 없이도 물품 정보만 추가되는 기능을 구현하고자 할 때도 사용

---

XMLHttpRequest(XHR) 객체 사용법

• XMLHttpRequest 객체 생성 : request를 보낼 준비 / 브라우저 버전별로 다름

var xhr = new XMLHttpRequest();

• Callback 함수 생성 : 서버에서 response가 왔을 때 실행되는 함수

xhr.onreadystatechange = function() {
	if(xhr.readyState==4) {
    	var myDiv = document.getElementByID('myDiv');
        myDiv.innerHTML=xhr.responseText;
    }
}

• Request를 오픈한다 : HTTP Method와 호출할 서버의 URL 정보 전달

xhr.open("GET","user.do");

• Request를 Send 한다.

xhr.send();

---

jQuery를 이용하여 Ajax 통신을 하는 경우

• 일반 자바스크립트로 Ajax 코드를 작성하게 되면 코딩량도 많아지고, 브라우저 별로 구현을 다르게 해야 하는 담점이 있다.
• jQuery를 이용하면 더 적은 코딩양과 동일한 코드로 대부분의 브라우저에서 같은 동작을 할 수 있도록 해준다. 즉 크로스 브라우징이 쉬워진다.
• jQuery를 이용하면 100줄 정도의 소스코드를 단 몇 줄만으로 간단하게 서버와 데이터를 주고받을 수 있다.

---

jQuery 개요

jQuery 란?

• 자바스크립트를 좀 더 쉽게 사용하도록 만들어진 자바스크립트 라이브러리로써, jQuery는 가볍고 빠르며 코드의 간결함을 제공하는 오픈소스
• 가벼움
• 크로스 브라우저 지원
• 강력한 CSS 실렉터
• 메서드 체이닝
• Ajax 지원
• 풍부한 플러그인 지원

---

jQuery  라이브러리 준비

1. CDN(Content Delivery Network) 호스트를 사용하는 방법

• https://code.jquery.com/jquery-1.12.4.js

2. http://www.jquery.com 에서 직접 다운로드하여 로컬에 저장 후 사용하는 방법

---

jQuery를 사용하여 코드의 단순화

---

jQuery가 제공하는 기능

1. HTML 엘리먼트 선택 (Selector)
2. HTML 엘리먼트 어트리뷰트 값 읽기 / 쓰기
3. HTML 엘리먼트 동적으로 조작 (Manipulation)
4. Loop 기능
5. CSS 조작
6. Event 처리
7. Ajax 처리

---

jQuery 시작하기

• jQuery를 사용하는 모든 웹페이지는 $(document). ready()로 시작해야 한다.

---

jQuery가 제공하는 기능

Selector

// 태그명 직접입력 선택
$("div");
// 클래스명으로 선택
$(".class");
// id 명으로 선택
$("#id");
// 모든 Element 선택하여 CSS 적용
$("*").css("border","1px");
// 다중 셀렉터 기준으로 해당 엘리먼트들 모두 선택
$("div,span,p.myClass");
// div요소 중 3번째 이후부터 ((index) 보다 큰(이후) 요소)
$("div:gt(2)");
// <input type="checkbox">
$(":checkbox");

---

Attribute 값 읽기와 쓰기

• jQuery를 attr(attrName), attr(attrName, value), attr(object) 함수
• 선택된 element의 속성(attribute) 값을 리턴, 설정한다.

---

Manipulation (동적 조작)

append() 함수

• 선택된 element의 contentn 맨 끝에 인자로 넘어온 내용은 추가한다.

appendTo() 함수

• 선택된 element를 target에 해당하는 Element의 content의 끝에 추가한다.

$(".inner").append("<p>Test</p>");
$("<p>Test</P>").appentTo(".inner");

html(), html(htmlString) 함수

• 선택된 Element의 html을 리턴, 설정한다.

$("div.demo-container").html();
$("div").html("<h1>제목</h1>");

---

Loop 기능

.each(function(index, element)) 함수

• jQuery 객체들을 위해 반복 로직을 처리하는 함수

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

$('li').each(function(index,element) {
	alert(index+': '+$(element).text());
});

---

CSS 조작

css(propertyName), css(propertyName, value), css(object) 함수

• 선택된 element의 propertyName에 해당되는 CSS정보를 리턴, 설정한다.

$("span").css("width","100px");

addClass(className) 함수

• 선택된 element에 해당되는 클래스 추가

$("p").addClass("myClass");

---

Event 처리

on() 함수

• 선택된 element에 이벤트 핸들러를 묶어준다.

$("p").on("click", function() {
                     alert($(this).text());
                   });
                   
$("div.test").on({
	mouseenter:function(){
    $(this).addClass("inside");
    },
    mouseleave:function(){
    $(this).removeClass("inside");
    }
});

---

Ajax

$.ajax() 함수

$("#btnSelect").on('click',function(){
	$.ajax({
    	url:'users',
        type:'GET',
        contentType:'application/json;charset=utf-8',
        dataType:'json',
        error:function(xhr,status,msg){
        	alert("상태값 :"+status+"에러 메세지 :"+msg);
        },
        success:userSelectResult
    });