ajax-GET

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


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值