使用 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
实现的
目前该程序在 Internet Explorer 中运行良好
点击按钮后的第二个文本框在其他浏览器中设置为未定义
- 要求的输出是在其他浏览器(如 mozillafirefox,chrome,opera,netscape navigator
中单击按钮后,用第一个文本框中输入的值填充第二个文本框
使用下面的行。
document.getElementById('textdisplay').value = request.responseXML.getElementsByTagName("responseFromServer")[0].firstChild.nodeValue;
我的代码仅在 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
实现的目前该程序在 Internet Explorer 中运行良好
点击按钮后的第二个文本框在其他浏览器中设置为未定义
- 要求的输出是在其他浏览器(如 mozillafirefox,chrome,opera,netscape navigator 中单击按钮后,用第一个文本框中输入的值填充第二个文本框
使用下面的行。
document.getElementById('textdisplay').value = request.responseXML.getElementsByTagName("responseFromServer")[0].firstChild.nodeValue;