서블릿 및 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가 가지고 드래그에 있기 때문이다 각 좌표를 보내면 내 출력을 볼 때 드래그 작업을 중지 한 후에도 계속 드래그됩니다. 이 지연은 언젠가 계속됩니다. 어떤 충고?
답변 해 주셔서 감사합니다. 요구 사항에 따라 클라이언트 측 스크립팅을 사용하여 mousemovement를 추적 한 다음 모든 것을 서블릿에 보내야합니다. 예를 들어 드래그의 시작 좌표와 끝 좌표를 보낼 수 없습니다. 그 사이에 모든 것을 보내야합니다. 어쩌면 아약스가 내가보아야 할 해결책이 아닐까? – user3018497
배열의 모든 점을 javascript에 저장하고 끝에 보낼 수 있습니다. 그리기 앱을 만들고 있습니까? 그렇지 않은 경우에도 마지막에 서버에 이미지를 보내는 HTML5 드로잉 앱을 보면 도움이 될 것입니다. – developerwjk