Ajax---局部刷新

使用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）

使用Ajax局部更新页面

猜你喜欢