使用 ajax 和 servlet 单击按钮后,根据第一个文本框值填充第二个文本框值

Populate second text box value based on first textbox value after a click of a button using ajax and servlets

我的代码仅在 Internet Explorer 中有效,对于其他浏览器,第二个文本框的值设置为未定义


AjaxDemo.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=ISO-8859-1">
<title>Supreeth Vijay </title>
</head>
<body>
enter name :<input type="text" id="inputdisplay" size="26"/>
<button type="button" onclick="sendMessageToServer()">SEND TO SERVER </button><br/>
Reply Received :<input type="text" id="textdisplay" size="40"/>
<script type="text/javascript">
var request;
if(window.XMLHttpRequest){  
    request=new XMLHttpRequest();  
    }  
    else if(window.ActiveXObject){  
    request=new ActiveXObject("Microsoft.XMLHTTP");  
    }  



function sendMessageToServer()

{

    request.onreadystatechange = receiveMessageFromServer;

    request.open("POST","AjaxDemo?name="+document.getElementById('inputdisplay').value,true);



    request.send();

    document.getElementById('inputdisplay').value="";


}

function receiveMessageFromServer()
{

    if(request.readyState == 4 && request.status == 200)

        {
        document.getElementById('textdisplay').value = request.responseXML.getElementsByTagName("responseFromServer")[0].text;
        }


}
</script>


</body>
</html>

AjaxDemo.java(小服务程序)

  package com.ServletAjax;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxDemo
 */
@WebServlet("/AjaxDemo")
public class AjaxDemo extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxDemo() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub
        System.out.println("server received the following message from client"+request.getParameter("name"));
        response.setContentType("text/xml");
        response.getWriter().println("<responseFromServer>hi"+request.getParameter("name")+"</responseFromServer>");
        System.out.println("server replied with follwoing message"+request.getParameter("name"));

    }

}

代码是使用 Ajax 和 Servlets

实现的
  1. 目前该程序在 Internet Explorer 中运行良好

  2. 点击按钮后的第二个文本框在其他浏览器中设置为未定义

  3. 要求的输出是在其他浏览器(如 mozillafirefox,chrome,opera,netscape navigator
  4. 中单击按钮后,用第一个文本框中输入的值填充第二个文本框

使用下面的行。
document.getElementById('textdisplay').value = request.responseXML.getElementsByTagName("responseFromServer")[0].firstChild.nodeValue;