ajax-GET

来源：互联网发布：汪清县淘宝特产编辑：程序博客网时间：2024/05/17 10:55

要求：页面上文本框中输入两个数，点击按钮用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>