2013-03-18 2 views
0

저는 AJAX를 배우려고하고 있습니다. 이제는 서블릿과 콜백에 대해 읽고 있습니다. 내 서적에서 서블릿이나 콜백을 자세히 다루지 않은 것 같아서 혼란 스러울 정도로 많은 온라인 리소스를 살펴 보았습니다. 내가 예를 들어 손으로 이해할 수있을 것 같은 기분이 들지. 너희들이 나를 도울 것을 믿는다. :) 크게 감사하겠습니다! 내가하고 싶은 일은 숫자를 받아들이는 인덱스 페이지를 생성하고 비동기 적으로 서블릿에 전달하여 제곱 한 다음 그 결과를 인덱스 페이지에 표시하는 것입니다. 여기 내가 지금까지 얻은 것이 있습니다.콜백을 포함한 간단한 AJAX 서블릿

index.html을

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script> 
      function setup() { 
       if (window.XMLHttpRequest) { 
        r = new XMLHttpRequest(); 
       } else { 
        r = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       r.open("get","convert",true); 
       r.onreadystatechange=??????????? 
       r.send(null); 
      } 
     </script> 
    </head> 
<body onload="setup()"> 
    <h3>Enter a number to be squared <input type="text" name="number" size="2" 
     maxlength="4"/></h3> 
    <p id="result"></p> 
</body> 

Convert.java

package squared; 

import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import java.sql.*; 

public class convert extends HttpServlet 
{ 
    @Override 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException 
    { 
     response.setContentType("text/xml"); 
     response.setHeader("Cache-Control", "no-cache"); 
     PrintWriter out=response.getWriter(); 

    } 
} 

나를 도와 시간을내어 주셔서 감사합니다!

답변

0

XMLHttpRequest 개체를 수동으로 생성하는 대신 jQuery.ajax 메서드를 사용하는 것이 훨씬 쉽고 오류가 적습니다. http://api.jquery.com/jQuery.ajax/

그러나 당신이 당신의 XMLHttpRequest를 작동하게하려면, 다음 단계를 수행해야합니다

  1. new 연산자를 통해 새로운 XMLHttpRequest 객체를 생성;
  2. XMLHttpRequest의 open 메서드를 호출하십시오.
  3. 콜백에 대해 onload 함수를 정의하십시오.
  4. XMLHttpRequest의 methid send을 호출하여 서버에 요청을 보냅니다.

코드는 다음되어야한다 : 서버 측에

var XHR = new XMLHttpRequest(); 
XHR.open('GET', 'some-url', true); 
XHR.onload = function() { 
    // here is function body 
}; 
XHR.send(); 

, 당신은 당신이 당신의 AJAX 호출에 사용하는거야, 'some-URL'에 서블릿을 매핑해야합니다. 프로젝트의 web.xml 파일에서 수행 할 수 있습니다.

+0

(I가의 doGet의 서블릿의 나머지 부분이 완벽하게 괜찮 전용으로 방법을 제공하고있다) jQuery를 배우기 전에 먼저 XMLHttpRequest 객체를 만드는 방법을 배우는 것이 좋습니다. 그래도 고마워. 나는 결국 그것을 배울 것입니다. 롤. –

1

실제로 Javery를 사용하면 Ajax로 작업하기가 쉽지만 사실은 XMLHttpRequest 객체를 만드는 방법을 배워야한다는 것입니다. 작동 간단한 아약스 예제를 제공하고, 그것이 도움이되기를 바랍니다. 당신이 물어 본 질문에서, 나는 당신의 서블릿이 요청 객체로부터 무엇이든 읽는 것을 발견 할 수 없었고 그 결과로 응답을 되돌려 보낼 수 없었다. HTML 파일 (index.html을)

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Servlet Test</title> 
</head> 
<body> 
<h3>Please enter a number to Square : </h3> 
<input type="text" id="numberToSquare"> 
<input type="button" onclick="callServlet();" value="Click To Square"> 
<div id="result"></div> 
</body> 
<script> 
function callServlet() 
{ 
    var xmlhttp; 
    var input = document.getElementById('numberToSquare').value; 
    if (window.XMLHttpRequest) 
    { 
    // This part is mainly for the latest browsers which have XMLHttpRequest object 
     // like Chrome,Firefox,Safari and IE7+ 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    { 
    // This should take care of the older browsers 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
{ 
/* 
readyState has four different states : 
    0: request not initialized 
    1: server connection established 
    2: request received 
    3: processing request 
    4: request finished and response is ready 
status is ranging between 200 - Ok and 404 - Page Not Found  
*/ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
    document.getElementById("result").innerHTML=xmlhttp.responseText; 
} 
} 
xmlhttp.open("GET","ServletTest?val="+input,true); 
xmlhttp.send(); 
} 
</script> 
</html> 

서블릿을 사용 : I가 당신과 동의

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
    // TODO Auto-generated method stub 
    String val = request.getParameter("val"); 
    int valFromString = Integer.parseInt(val); 
    Double d = Math.pow(valFromString, 2); 
    PrintWriter writer = response.getWriter(); 
    writer.println(d); 
    System.out.println(d); 
} 
관련 문제