AJAX第一个练习（经典源码实现异步传输）

最新推荐文章于 2022-06-21 11:06:15 发布

做一道光

最新推荐文章于 2022-06-21 11:06:15 发布

阅读量312

点赞数

分类专栏： Ajax 文章标签： javascript ajax html5

本文链接：https://blog.csdn.net/weixin_59334478/article/details/125154846

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.4 AJAX 实例

需求：计算某个用户的 BMI 。用户在 jsp 输入自己的身高，体重； servlet 中计算 BMI ，并显示 BMI 的计算结果和建议。

BMI 指数（即身体质量指数，英文为 BodyMassIndex ，简称 BMI ），是用体重公斤数除以身高米数平方得出的数字，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准

成人的 BMI 数值：

1 ）过轻：低于 18.5

2 ）正常： 18.5-23.9

3 ）过重： 24-27

4 ）肥胖： 28-32

5 ）非常肥胖 , 高于 32

开发步骤：

1.在 idea 中创建新的工程，名称：ch01-bmi-ajax

2.配置 tomcat 服务器，如果已经配置，省略此步骤。

选择 Local

配置 tomcat 服务器的位置

Module 添加 tomcat 支持

选择 2 Library

确定使用 tomcat

3.创建index. jsp，有参数 name， weight， height


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>json局部刷新</title>
  

    <script type="text/javascript" >

      function doAjax() {
        //使用内存中的异步对象来代替浏览器发起请求。异步对象是使用JS创建和管理的。

        //创建异步对象
        var xmlHttp=new XMLHttpRequest();
        //绑定事件
        xmlHttp.onreadystatechange=function (){
          //处理服务器端返回的数据，更新当前页面。
          if (xmlHttp.readyState==4 && xmlHttp.status==200){
            var data=xmlHttp.responseText;
            document.getElementById("mydata").innerText=data;
          }
        }
        var name=document.getElementById("name").value;
        var weight=document.getElementById("weight").value;
        var height=document.getElementById("height").value;
        var param="name="+name+"&weight="+weight +"&height="+height;

        //初始请求对象
        xmlHttp.open("get","BmiServlet?"+param,true);
        //发起请求
        xmlHttp.send();
      }

    </script>
  </head>
  <body>
  <p>局部刷新Ajax-计算BMI</p>
  <div>
    姓名：<input type="text" id="name"><br>
    体重(公斤)：<input id="weight" type="text"><br>
    身高（米）：<input type="text" id="height"><br>
    <input type="button" value="计算bmi" id="btn1" onclick="doAjax()" >
  </div>
  <div id="mydata">
    等待加载数据

  </div>
  </body>
</html>

4.新建 Servlet, 名称为BmiServlet


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>json局部刷新</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<%--    <script type="text/javascript">--%>
<%--$(function () {--%>
<%--  $("#btn1").click(function () {--%>
<%--    var name=$("#name").val();--%>
<%--    var height=$("#height").val();--%>
<%--    var weight=$("#weight").val();--%>
<%--    $.ajax({--%>
<%--      url:"BmiServlet",--%>
<%--      type:"get",--%>
<%--      data:{--%>
<%--        "name":name,--%>
<%--        "weight":weight,--%>
<%--        "height":height--%>
<%--      },--%>
<%--      dataType:"json",--%>
<%--      success:function (ms) {--%>
<%--        alert("请求成功")--%>
<%--      },--%>
<%--      error:function () {--%>
<%--        alert("请求失败");--%>
<%--      }--%>
<%--    })--%>
<%--  })--%>
<%--})--%>
<%--    </script>--%>

    <script type="text/javascript" >

      function doAjax() {
        //使用内存中的异步对象来代替浏览器发起请求。异步对象是使用JS创建和管理的。

        //创建异步对象
        var xmlHttp=new XMLHttpRequest();
        //绑定事件
        xmlHttp.onreadystatechange=function (){
          //处理服务器端返回的数据，更新当前页面。
          if (xmlHttp.readyState==4 && xmlHttp.status==200){
            var data=xmlHttp.responseText;
            document.getElementById("mydata").innerText=data;
          }
        }
        var name=document.getElementById("name").value;
        var weight=document.getElementById("weight").value;
        var height=document.getElementById("height").value;
        var param="name="+name+"&weight="+weight +"&height="+height;

        //初始请求对象
        xmlHttp.open("get","BmiServlet?"+param,true);
        //发起请求
        xmlHttp.send();
      }

    </script>
  </head>
  <body>
  <p>局部刷新Ajax-计算BMI</p>
  <div>
    姓名：<input type="text" id="name"><br>
    体重(公斤)：<input id="weight" type="text"><br>
    身高（米）：<input type="text" id="height"><br>
    <input type="button" value="计算bmi" id="btn1" onclick="doAjax()" >
  </div>
  <div id="mydata">
    等待加载数据

  </div>
  </body>
</html>

5.注册 Servlet ，在web.xml配置文件中

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>BmiServlet</servlet-name>
        <servlet-class>BmiServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>BmiServlet</servlet-name>
        <url-pattern>/BmiServlet</url-pattern>
    </servlet-mapping>
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

项目结构（个别类为测试类，实际代码就是上面的三个）

运行结果：

做一道光

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX第一个练习（经典源码实现异步传输）

选择 Local 配置 tomcat 服务器的位置 Module 添加 tomcat 支持选择 2 Library 确定使用 tomcat 3.创建index. jsp，有参数 name， weight， height 5.注册 Servlet ，在web.xml配置文件中运行结果：
复制链接

扫一扫