要求:頁面上文本框中輸入兩個數,點擊按鈕用get方法,從服務器端獲得計算結果
一.創建servlet類,注意配置web.xml,實現其中的doGet方法
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
PrintWriter out = response.getWriter();
String num1 = request.getParameter("num1");
String num2 = request.getParameter("num2");
String result = String.valueOf(Integer.parseInt(num1)+Integer.parseInt(num2));
//不要緩存
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
out.println(result);
out.flush();
}
二.jsp頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajaxGET.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
window.onload = function()
{
var AjaxGETButton = document.getElementById("AjaxGETButton");
var xmlHttpRequest = null;
AjaxGETButton.onclick = function()
{
if(window.ActiveXObject)//IE
{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)//其它瀏覽器
{
xmlHttpRequest = new XMLHttpRequest();
}
if(null != XMLHttpRequest)
{
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
//建立連接
xmlHttpRequest.open("GET","AjaxGET?num1="+num1+"&num2="+num2,true);
//回調函數
xmlHttpRequest.onreadystatechange = function()
{
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)
{
document.getElementById("AjaxGETDiv").innerHTML = xmlHttpRequest.responseText;
}
}
xmlHttpRequest.send(null);
}
}
}
</script>
</head>
<body>
<form action="AjaxGET" method="get">
<input type="button" value="add" id="AjaxGETButton"><br>
<input type="text" id="num1"><br>
<input type="text" id="num2"><br>
<div id="AjaxGETDiv"></div>
</form>
</body>
</html>