AJax
1.全局刷新和局部刷新
1.全局刷新：整个浏览器被新的数据覆盖。在网络中会传输大量的数据，浏览器需要加载、渲染页面。
2.局部刷新：
1.概念：在浏览器内部发起请求，获取数据，改变页面的部分内容。其余页面无需加载和渲染。
2.特点：网络中数据传输量少，用户体验好。
3.实现方式：Ajax就是用来做局部刷新的。
4.示意图
2.异步对象
1.Ajax技术是用来做局部刷新的，利用异步对象（XMLHTTPRequest）实现这个功能。
2.这个异步对象存在于浏览器内存中，使用JS语法创建和使用异步对象。
3.概念
（1）Ajax：Asynchronous JavaScript and XML（异步的jS和XML）
Asynchronous：异步
JS：JavaScript脚本语言，在浏览器中执行
xml：一种数据格式
（2）Ajax是一种局部刷新的新方法，不是一种语言。使用的技术主要包括：JS、dom、css、xml。
JS：负责创建异步对象，发送请求，更新页面的DOM对象，
JSON：网络中传输数据的格式，替代了冗余的xml数据格式
（3）发生了数据交换才是局部刷新的标志。
4.异步对象的属性：readyState：表示异步对象请求的状态变化
5.异步对象使用的步骤
第一步：创建异步对象：new XMLHttpRequest();
第二步：绑定事件
注意：函数写好以后，只要状态发生变化，它就会调用函数一次。
1 xmlHttp.onreadystatechange = function(){
2 // 处理请求的状态变化
3 if(xmlHttp.readState == 4 && xmlHttp.status== 200){
4 // 可以处理服务器的数据，更新当前页面
5 var data = xmlHttp.responseText;
6 document.getElementById("name").value = data;
7 }
8 }
第三步：初始化异步请求对象
1.格式：xmlHttp.open("请求方式","服务器地址",同步|异步请求(默认是true));
2.示例：xmlHttp.open("get","loginServlet?name=jason&pwd=123",true);
第四步：发送请求：xmlHttp.send();
6，异步对象使用案例
演示全局刷新：
1.index.jsp
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <center>
3 <form action="/myweb/one" method="get">
4 用户<input type="text" name="name"><br/>
5 身高（米）<input type="text" name="h"><br/>
6 体重（公斤）<input type="text" name="w"><br/>
7 <input type="submit" value="提交">
8 </form>
9 </center>
2.OneServlet
1 package com.bjpowernode;
2
3 import javax.servlet.ServletException;
4 import javax.servlet.http.HttpServlet;
5 import javax.servlet.http.HttpServletRequest;
6 import javax.servlet.http.HttpServletResponse;
7 import java.io.IOException;
8
9 public class OneServlet extends HttpServlet {
10
11 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
12 // 1.获取请求参数
13 String name = request.getParameter("name");
14 String height = request.getParameter("h");
15 String weight = request.getParameter("w");
16
17 // 2.计算BMI BMI值 = 体重/身高的平方
18 float h = Float.valueOf(height);
19 float w = Float.valueOf(weight);
20 float bmi = w / (h * h);
21
22 // 3.判断BMI的范围
23 String msg = "";
24 if(bmi <= 18.5){
25 msg = "你的身材处于偏瘦状态";
26 }else if(bmi > 18.5 && bmi <= 23.9){
27 msg = "你的身材处于正常状态";
28 }else if(bmi > 24 && bmi <= 27){
29 msg = "你的身材处于偏胖状态";
30 }else {
31 msg = "你的身材处于肥胖状态";
32 }
33 System.out.println(msg);
34 msg = ("你好" + name + "先生/女士，您的BMI值是" + bmi + "," + msg);
35
36 // 4.把数据存储到request域中
37 request.setAttribute("msg",msg);
38
39 // 5.然后通过请求转发到页面
40 request.getRequestDispatcher("/result.jsp").forward(request,response);
41 }
42 }
3.result.jsp
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>Title</title>
5 </head>
6 <body>
7 <p style="color: green;font-size: 40px">BMI值计算结果</p>
8 <h3>${msg}</h3>
9 </body>
10 </html>
局部刷新演示
1.index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> <script type="text/javascript"> // 使用内存中的异步对象，代替浏览器发送请求，异步对象使用JS创建和管理 function doAjax(){ var xmlHttp = new XMLHttpRequest();// 1.创建异步对象 xmlHttp.onreadystatechange = function(){ // 2.绑定事件 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ // 处理服务器返回的数据，更新当前页面 var data = xmlHttp.responseText; var data = document.getElementById("mydata").innerText=data;// 更新dom对象，更新页面数据 } } var name = document.getElementById("name").value; // 获取dom对象的属性值 var w = document.getElementById("w").value; var h = document.getElementById("h").value; var param = "name=" + name + "&w="+w+ "&h="+h; xmlHttp.open("get","bmi?"+param,true); // 3.初始化请求数据 xmlHttp.send(); // 4.发送请求 } </script> </head> <body> <div> 用户<input id="name"><br/> 体重<input id="h"><br/> 身高<input id="w"><br/> <input type="button" value="计算BMI值" onclick="doAjax()"> </div> <br/> <br/> <div id="mydata">等待加载数据......</div> </body> </html>
2.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>com.bjpowernode.BmiServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>BmiServlet</servlet-name> <url-pattern>/bmi</url-pattern> </servlet-mapping> </web-app>
3.servlet
package com.bjpowernode; 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 BmiServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 1.接收请求参数 String name = request.getParameter("name"); String weight = request.getParameter("w"); String height = request.getParameter("h"); // 2.计算BMI BMI值 = 体重/身高的平方 float h = Float.valueOf(height); float w = Float.valueOf(weight); float bmi = w / (h * h); // 3.判断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 = ("你好" + name + "先生/女士，您的BMI值是" + bmi + "," + msg); // 4.输出数据 response.setContentType("text/html;charset=utf-8"); PrintWriter pw = response.getWriter(); pw.write(msg); pw.flush(); pw.close(); } }
4.tomcat路径配置：http://localhost:8080/myweb/
省市查询案例
1.基本步骤：
1.准备两张城市和省份的数据表 1.省份信息表 2.城市信息表 2.所需jar包 1.jackson-annotations-2.9.0.jar 2.jackson-core-2.9.0.jar 3.jackson-databind-2.9.0.jar 4.mysql-connector-java-5.1.6.jar 3.创建页面 4.使用JDBC访问数据库 1.用到连接数据库的工具类 5.测试Servlet是否是通的 6.拿到省份编号文本框的值和Servlet绑在一起 7.拿到响应数据，将数据输出到省份名称文本框
1.index.jsp
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html> 3 <head> 4 <title>$Title$</title> 5 <script type="text/javascript"> 6 function search(){ 7 // 1.创建异步对象 8 var xmlHttp = new XMLHttpRequest(); 9 // 2.绑定事件 10 xmlHttp.onreadystatechange = function(){ 11 // alert(xmlHttp.readyState); 12 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ 13 document.getElementById("proname").value = xmlHttp.responseText; //拿到响应数据 将响应数据输出到proname文本框里面 14 } 15 } 16 var proid = document.getElementById("proid").value; // 拿到proid文本框的值 17 xmlHttp.open("get","queryProvince?proid=" + proid,true);// 3.初始化异步对象 18 xmlHttp.send();// 4.发送数据 19 } 20 </script> 21 </head> 22 <body> 23 <p>Ajax 根据省份ID获取名称</p> 24 <table> 25 <tr> 26 <td>省份编号</td> 27 <td><input id="proid"> 28 <input type="button" value="搜索" onclick="search()"> 29 </td> 30 </tr> 31 <tr> 32 <td>省份名称</td> 33 <td><input id="proname"></td> 34 </tr> 35 </table> 36 </body> 37 </html>
2.web.xml
1 <servlet> 2 <servlet-name>QueryProvinceServlet</servlet-name> 3 <servlet-class>com.bjpowernode.controller.QueryProvinceServlet</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>QueryProvinceServlet</servlet-name> 7 <url-pattern>/queryProvince</url-pattern> 8 </servlet-mapping>
3.servlet
1 package com.bjpowernode.controller; 2 3 import com.bjpowernode.dao.ProvinceDao; 4 5 import javax.servlet.ServletException; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 import java.io.IOException; 10 import java.io.PrintWriter; 11 12 public class QueryProvinceServlet extends HttpServlet { 13 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 14 // 处理get请求 15 String proid = request.getParameter("proid"); 16 System.out.println("proid=" + proid); 17 // 访问数据库，拿到数据 18 String result = "默认是无数据"; 19 ProvinceDao dao = new ProvinceDao(); 20 if(result != null && !"".equals(proid.trim())){ // 结果不为空，并且去掉两边空格后不能是空字符串 21 result = dao.queryProvinceNameById(Integer.valueOf(proid)); 22 } 23 // 使用响应对象输出数据 24 response.setContentType("text/html;charset=utf-8"); 25 PrintWriter pw = response.getWriter(); 26 pw.write(result); 27 pw.flush(); 28 pw.close(); 29 } 30 }
4.项目结构图
浙公网安备 33010602011771号