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

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" %>

  
    
  

    
  
  
  
局部刷新Ajax-计算BMI
  

    姓名：

    体重(公斤)：

    身高（米）：

    
  
  

    等待加载数据

  
  

4.新建 Servlet, 名称为BmiServlet

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

  
    
    
<%--    --%>

    
  
  
  
局部刷新Ajax-计算BMI
  

    姓名：

    体重(公斤)：

    身高（米）：

    
  
  

    等待加载数据

  
  

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

    
        BmiServlet
        BmiServlet
    
    
        BmiServlet
        /BmiServlet
    

    index.jsp

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

运行结果：