簡單的AJAX Servlet與回調

我想學習AJAX，現在我正在讀取servlet和回調。我覺得我的書沒有詳細介紹servlet或回調，所以我只查看了一些在線資源，以便更加困惑。我覺得我會用一個例子來理解它，所以我指望你們幫助我:)這將不勝感激！我想要做的是創建一個索引頁面，該頁面接受一個數字，將其傳遞給一個servlet異步平方，並在索引頁面上顯示結果。這是我到目前爲止。簡單的AJAX Servlet與回調

的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(); 

    } 
}

感謝您抽出時間來幫我了！

來源

2013-03-18 Mark Beleski

我認爲這是更容易和更少的錯誤傾向於使用jQuery.ajax方法而不是手動創建XMLHttpRequest對象。 http://api.jquery.com/jQuery.ajax/

但是，如果你想使你的XMLHttpRequest的工作，你應該做到以下步驟：

通過new運營商創建新XMLHttpRequest對象;
在您的XMLHttpRequest上調用方法open;
定義onload回調函數;
調用XMLHttpRequest的方法send向服務器發送請求。

的代碼應該如下：

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

在服務器端，你應該你的servlet映射到'some-URL'，你會在你的AJAX調用中使用。您可以在項目的web.xml文件中執行此操作。

來源

2013-03-18 23:07:56

我就同意你的看法jQuery部分，但我看過的大多數書籍/參考指南建議學習如何在學習jQuery之前先創建XMLHttpRequest對象。不過謝謝你的推薦。我會最終學會它。 – 2013-03-18 23:19:50

如果我們使用Jquery，它真的很容易與Ajax協同工作，但我們應該學習如何創建一個XMLHttpRequest對象。我提供了一個簡單的Ajax示例，我希望它有幫助。在你問的問題中，我找不到你的servlet正在從請求對象中讀取任何東西，併發送任何迴應結果。的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>

使用該servlet：（我提供doGet方法僅作爲servlet的其餘部分是完美的罰款）

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); 
}

來源

2013-03-19 05:32:27

簡單的AJAX Servlet與回調

回答

相關問題