使用Ajax局部更新页面
1. 创建项目
2. 代码
- index.jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>局部刷新-ajax</title>
<script type="text/javascript">
function doAjax() {
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange = function () {
//处理服务器端返回的数据，更新当前页面
//alert("readyState属性值======" + xmlHttp.readyState + "| status:" + xmlHttp.status)
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// alert(xmlHttp.responseText);
//获取服务端返回的数据并赋值给data
var data = xmlHttp.responseText;
//更新客户端dom对象， 通过赋值更新页面数据（局部更新）
document.getElementById("mydata").innerText = data;
}
//3.初始化请求数据
//获取dom对象的value值
var name = document.getElementById("name").value;
var w = document.getElementById("w").value;
var h = document.getElementById("h").value;
//bmiPrint?name=李四&w=82&h=1.8
var param = "name="+name + "&w="+w+"&h="+h;
//alert("param="+param);
//获取dom对象的值，并传送参数给后台servlet（请求方式，请求地址+参数，是否等待有返回数据时再往下走true为不等待：即异步获取数据）
xmlHttp.open("get","bmiAjax?"+param,true);
//4.发送请求
xmlHttp.send();
}
}
</script>
</head>
<body>
<p>局部刷新ajax-计算bmi</p>
<div>
姓名：<input type="text" id="name" /> <br>
体重：<input type="text" id="w" /> <br>
身高：<input type="text" id="h" /> <br>
<input type="button" value="计算bmi" onclick="doAjax()">
<br/>
<div id="mydata">等待加载数据.....</div>
</div>
</body>
</html>
- BmiajaxServlet页面代码
package com.bjpowernode.controller;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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 {
//检测是否接收到了ajax的请求
System.out.print("hello ajax");
//接受从异步对象传过来的请求参数
String strname =request.getParameter("name");
String height =request.getParameter("h");
String weight =request.getParameter("w");
//计算bmi
float h =Float.valueOf(height);
float w =Float.valueOf(weight);
float bmi =w/(h*h);
//判断bmi的范围
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="您的身体太胖了";
}
System.out.println("msg="+msg);
msg ="您好："+strname+"先生/女士，您的bmi值是："+ bmi +","+msg;
//把数据存到request
//request.setAttribute("msg",msg);
//转发到新的页面
//request.getRequestDispatcher("/result.jsp").forward(request,response);
//使用httpServletResponse输出数据而不使用请求转发来转到另一个页面输出（result.jsp）,此处是定义输出的文本及编码方式
response.setContentType("text/html;charset=utf-8");
//获取PrintWriter
PrintWriter pw = response.getWriter();
//输出数据
pw.println(msg);
//清空缓存
pw.flush();
//关闭close
pw.close();
}
}
- 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">
<!--jsp页面和servlet页面通过配置servlet来连接，相当于二者的桥梁-->
<servlet>
<!--配置servlet的名称和具体位置-->
<servlet-name>BmiAjaxServlet</servlet-name>
<servlet-class>com.bjpowernode.controller.BmiajaxServlet</servlet-class>
</servlet>
<!--配置jsp页面要连接的name和地址，此处地址和xmlHttp.open("get","bmiAjax?"+param,true);中的地址要求一样-->
<servlet-mapping>
<servlet-name>BmiAjaxServlet</servlet-name>
<url-pattern>/bmiAjax</url-pattern>
</servlet-mapping>
</web-app>
笔记
- 每建立一个servlet文件都要在web.xml文件中配置
- 注意每一个项目运行都要配置Tomcat
- 绝大部分项目都要引入jar包（位于自建文件夹lib）