[20180510]Spring 비동기처리

다음을 참고하고 시작하자

http://www.nextree.co.kr/p11205/

http://cafe.naver.com/bitcamp104/1471

비동기 처리를 위한 디펜던시 라이브러리는 다음과 같다 

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.7.3</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
            <version>1.9.13</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.7.3</version>
        </dependency>

---

@RequestBody로 비동기 처리하는 방식 

dispatcher-servlet설정

<beans xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation=
                  "http://www.springframework.org/schema/mvc
                   http://www.springframework.org/schema/mvc/spring-mvc.xsd">
 
<mvc:annotation-driven />
 

<mvc:annotation-driven />

이 하는 역할?? 

우리가 뿌려주는 데이터가 JSON일 경우 반드시 필요한 코드

참고 : https://blog.naver.com/skout90/220971378833

@RequestMapping(value="response2.kosta",method=RequestMethod.POST)
    public @ResponseBody Employee add(@RequestBody Employee emp) //@RequestBody넘어오는 json데이터를 객체형태로 바로 받아온다 . 
    {   System.out.println("response");
        System.out.println(emp.toString());
        
        return emp;
    }

@RequestBody는 넘어오는 json데이터를 객체형태로 바로 받아온다

@ResponseBody 를 사용할 경우 return되는 객체를 JSON형태로 변환하여 ajax의 데이터로 뿌려준다. 

 
    $(document).ready(function(){
        $('#btnCheckUid').click(function() {
            if($('#userid').val()==""){
                alert("아이디를 입력해 주세요")
            }else{
                $.ajax({
                    type : "post",
                    url  : "idcheck.htm",
                    data : {userid:$('#userid').val()},
                    contentType: "application/json; charset=utf-8",
                    success : function(data){
                        console.log(">"+data+"<");
                        if(data.trim() == "1"){
                            alert("사용 불가능한 아이디 입니다.");
                            $('#userid').val("");
                        }else{
                            alert("사용가능한 아이디입니다.");
                        }
                    } 
                });
                
            }
        });
    });
 

cf. 이 때, parameter로 받는 객체가 VO객체가 아닌 Map객체라면 Json으로 받은 객체를 자동으로 Map객체로 Mapping해 넘겨줄 수 있다. 

cf. 참고 

Model과 ModelMap의 차이는?? >> Model은 interface이며 ModelMap은 Model을 구현한 클래스이다.

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/ui/ModelMap.html

https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/ui/Model.html

jsonView로 비동기처리하는 방식  >> 권장

disptcher-servlet에 bean객체 추가 

<!-- controller에서 return된 String값과 bean객체의 이름이 같으면  -->
<bean name="jsonview" 
class="org.springframework.web.servlet.view.json.MappingJackson2JsonView" />
 

controller 설정

@RequestMapping("idckeck.htm")
    public View idcheck(String userid, ModelMap model) {
        System.out.println("들어옴");
        System.out.println("userid = " + userid);
        try {
            Member member = service.getMember(userid);
            
            if(member ==null) {
                model.addAttribute("check", "true");
            } else {
                model.addAttribute("check", "false");
            }
            
        } catch (ClassNotFoundException | SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        
        return jsonview;
    }

ajax 설정

 
    $(document).ready(function(){
        $('#btnCheckUid').click(function(){
             $.ajax(
                     {
                        type : "post",
                        url  : "<%=request.getContextPath()%>/joinus/idckeck.htm",
                        data : "userid="+$("#userid").val(),
                        success : function(data){  //서버 {"menu",list}   //data > {}
                            console.log(data.ckeck);
                            console.log(data);
                            if(data.check =="true"){
                                $('#check').text("사용가능")
                            }else{
                                $('#check').text("사용불가")
                            }
                        } 
                     } 
                   )    
        });
    })