2013-11-21 2 views
0

서블릿 및 Ajax로 프로그래밍하는 것이 처음입니다. 이미지 위에 마우스 동작을 추적하는 데 사용하는 클라이언트 측 코드가 있습니다. 처리하는 동안 서블릿으로 드래그하는 동안 좌표를 보내야합니다. 나는 이것을 위해 아약스를 사용한다. 코드가 작동하지만 서블릿에서 요청을 처리하는 데 지연이있는 것 같습니다. 특히 끌기와.서블릿에 대한 신속한 Ajax 요청으로 인해 성능 문제가 발생했습니다.

클라이언트 측 코드 : 서블릿에서

$(document).ready(function(){ 


    // detect mousedown 
    $("#imgslot").mousedown(function(event){ 

     var leftClick = false;  // if user clicked the left mouse button              
     var rightClick = false;  // if user clicked the right mouse button 
     var interaction={type:"",action:"",lClick:"",rClick:"",x:"null",y:""}; 

     //if the client left clicks 
     if(event.which===1){ 

      leftClick=true; 
     } 

       //if the client left clicks 
     if(event.which===3){ 

      rightClick=true; 
     } 

     interaction={type:"interaction",action:"mousedown",lClick:leftClick,rClick:rightClick,x:event.clientX,y:event.clientY}; 
     sendAjax(interaction); 

     // detect dragging 
     $(this).on('mousemove',function(event){ 

       interaction={type:"interaction",action:"drag",lClick:leftClick,rClick:rightClick,x:event.clientX,y:event.clientY}; 
       sendAjax(interaction); 

     // detect mouseup 
     }).mouseup(function(event){ 

      interaction={type:"interaction",action:"mouseup",lClick:leftClick,rclick:rightClick,x:event.clientX,y:event.clientY}; 
      sendAjax(interaction); 

      rightClick = false; 
      leftClick = false; 

      $(this).off('mousemove'); 
      $(this).off('mouseup'); 

      });  

     }); 
}); 

function sendAjax(message) 
{ 
      $.ajax({ 
      url: "myServlet", 
      type: "POST", 
      data: message, 

      success: function (data) { 

      } 
      }); 
} 

가 : 단순히 성능을

if (request.getParameter("type") != null) { 
    System.out.println(request.getParameter("action")); 
     if (request.getParameter("type").equals("interaction")) { 
      sendMouseActions(request.getParameter("action"), request.getParameter("lClick"), request.getParameter("rClick"), request.getParameter("x"), request.getParameter("y")); 
     } 
} 

나의 가장 큰 문제를 테스트하기 위해 요청을 인쇄는 I가 가지고 드래그에 있기 때문이다 각 좌표를 보내면 내 출력을 볼 때 드래그 작업을 중지 한 후에도 계속 드래그됩니다. 이 지연은 언젠가 계속됩니다. 어떤 충고?

답변

1

물론 성능이 좋지 않습니다. 클라이언트 측에서 자바 스크립트로 마우스 움직임을 처리해야합니다. 드래그 앤 드롭 보내기 서블릿은 시작과 끝 위치 만 시작합니다. Ajax 요청은 비동기식이기 때문에 onmousemove가 해고 될 때마다 요청을 보내면 좌표가 정렬되지 않게됩니다. 그 이유는 아마 당신이 멈추어도 여전히 끌리고 있다고 말하는 이유 일 것입니다. 요청이 부적절 해지고 있습니다.

+0

답변 해 주셔서 감사합니다. 요구 사항에 따라 클라이언트 측 스크립팅을 사용하여 mousemovement를 추적 한 다음 모든 것을 서블릿에 보내야합니다. 예를 들어 드래그의 시작 좌표와 끝 좌표를 보낼 수 없습니다. 그 사이에 모든 것을 보내야합니다. 어쩌면 아약스가 내가보아야 할 해결책이 아닐까? – user3018497

+0

배열의 모든 점을 javascript에 저장하고 끝에 보낼 수 있습니다. 그리기 앱을 만들고 있습니까? 그렇지 않은 경우에도 마지막에 서버에 이미지를 보내는 HTML5 드로잉 앱을 보면 도움이 될 것입니다. – developerwjk

관련 문제