ajax-210810-04—练习&局部刷新计算bmi
ajax局部刷新步骤
1. 新建jsp,使用XMLHttpRequest异步对象
1) 创建
2) 绑定事件
3) 初始请求
4) 发送请求
2. 创建服务器的servlet,接收并处理数据,把数据输出给异步对象。
演示(局部刷新—ajax)
index.jsp(局部刷新—ajax)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>局部刷新---ajax</title>
<script type="text/javascript">
// 使用内存中的异步对象,代替浏览器发起请求,异步对象使用js创建和管理。
function doAjax(){
// 1. 创建异步对象
var xmlHttp = new XMLHttpRequest();
// 2. 绑定事件
xmlHttp.onreadystatechange = function (){
// 处理器服务器返回的数据,更新当前页面
// alert("readyState:"+xmlHttp.readyState)
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// alert(xmlHttp.responseText);
// 更新当前页面数据
var data = xmlHttp.responseText;
document.getElementById("mydata").innerText = data;
}
}
// 3. 初始化请求参数
// 获取dom对象的value属性值
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;
// alert("param--->"+param);
// 也就是把参数值发送给BmiAjaxServlet.java ,get请求拼接字符
xmlHttp.open("get","bmiAjaxServlet?"+param,true);
// 4. 发起请求
xmlHttp.send();
}
</script>
</head>
<body>
<p>局部刷新---ajax</p>
<div>
<span>姓名:</span><input type="text" id="name"/><br/>
<span>体重(公斤):</span><input type="text" id="weight"/><br/>
<span>身高(米/单位):</span><input type="text" id="height"/><br/>
<input type="submit" value="计算" οnclick="doAjax()"/>
</div>
<br/>
<div id="mydata">等待加载数据......</div>
</body>
</html>
BmiAjaxServlet.java(局部刷新—ajax)
package com.bgy.controller;
import java.io.IOException;
import java.io.PrintWriter;
public class BmiAjaxServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request,
javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
}
protected void doGet(javax.servlet.http.HttpServletRequest request,
javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
System.out.println("接收了ajax的请求");
String name = request.getParameter("name");
String weight = request.getParameter("weight");
String height = request.getParameter("height");
float h = Float.valueOf(height);
float w = Float.valueOf(weight);
float bmi = w / ( h * h );
String msg = "";
if ( bmi < 18.5 ) {
msg = "您比较瘦";
} else if ( bmi > 18.5 && bmi <= 23.9 ) {
msg = "您正常";
} else if ( bmi > 24 && bmi <= 27 ) {
msg = "您较胖";
} else {
msg = "您太胖了,长点儿心吧!";
}
msg = name + "," + "bmi指数为" + bmi + "," + msg;
System.out.println("mgs--->"+msg);
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
writer.print(msg);
writer.flush();
writer.close();
}
}
web.xml(servlet映射)
<?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>BmiAjaxServlet</servlet-name>
<servlet-class>com.bgy.controller.BmiAjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>BmiAjaxServlet</servlet-name>
<url-pattern>/bmiAjaxServlet</url-pattern>
</servlet-mapping>
</web-app>