0

私は AJAX を学ぼうとしていますが、今はサーブレットとコールバックについて調べています。私の本ではサーブレットやコールバックについて詳しく説明されていないように感じたので、さらに混乱するためだけに多くのオンライン リソースを調べました。実践的な例で理解できると思うので、皆さんの助けを期待しています:)大歓迎です！私がやりたいことは、数値を受け取り、それをサーブレットに非同期的に渡して 2 乗し、その結果をインデックス ページに表示するインデックス ページを作成することです。これが私がこれまでに得たものです。

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

    }
}

私を助けてくれてありがとう！

4

2 に答える 2

1

Jqueryを使用すればAjaxを操作するのは本当に簡単ですが、XMLHttpRequestオブジェクトの作成について学ぶ必要があるのは事実です。私は実用的な簡単なajaxの例を提供しています。それがお役に立てば幸いです。あなたが尋ねた質問では、あなたのサーブレットがリクエストオブジェクトから何かを読み取っていて、結果とともに応答を送り返すことができませんでした。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>

使用されたサーブレット:(サーブレットの残りの部分は完全に正常であるため、doGetメソッドのみを提供しています）

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-19T05:32:27.097 に答える
0

jQuery.ajaxオブジェクトを手動で作成する代わりに、メソッドを使用する方がはるかに簡単でエラーが発生しにくいと思いXMLHttpRequestます。http://api.jquery.com/jQuery.ajax/

ただし、XMLHttpRequest を機能させたい場合は、次の手順を実行する必要があります。

  1. 演算子を使用して新しいXMLHttpRequestオブジェクトを作成します。new
  2. openXMLHttpRequest でメソッドを呼び出します。
  3. onloadコールバックの関数を定義します。
  4. XMLHttpRequest のメソッドを呼び出しsendて、サーバーにリクエストを送信します。

コードは次のようになります。

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

'some-URL'サーバー側では、AJAX 呼び出しで使用するサーブレットを にマップする必要があります。web.xmlプロジェクトのファイルでそれを行うことができます。

于 2013-03-18T23:07:56.047 に答える