快速了解Ajax
全局刷新和局部刷新(Ajax)
全局刷新：整个浏览器被新的数据覆盖,需要在网络中传输大量的数据。浏览器需要加载，渲染页面。相当于我们正常点击访问网站的方式。
局部刷新：在浏览器的内部，发起请求，获取数据，改变页面的部分内容。其余的页面无需加载和渲染，网络中的数据传输量少，给用户感觉好。
而我们网页的局部刷新使用的就是Ajax!
全局刷新
首先我们编辑一个小程序来更好的理解什么叫做全局刷新。
bmiindex.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>全局刷新</title>
</head>
<body>
<p>全局刷新计算bmi</p>
<form action="bmiServlet" method="get">
姓名：<input type="text" name="name"/>
体重(公斤)：<input type="text" name="w"/>
身高(米)：<input type="text" name="h"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
BmiPrintServlet.java
package com.test.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class BmiPrintServlet extends HttpServlet {
public BmiPrintServlet() {
// TODO Auto-generated constructor stub
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
//接收请求参数
String name = req.getParameter("name");
String height = req.getParameter("h");
String weight = req.getParameter("w");
//计算bmi 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 = "你的bmi是正常的";
}else if(bmi > 23.9 && bmi <= 27){
msg = "你的身体比较胖";
}else{
msg = "你的身体肥胖";
}
msg = "您好："+name+"先生/女士，您的bmi的值是："+bmi+","+msg;
// 使用HttpServletResponse输出数据
resp.setContentType("text/html;charset=utf-8");
// 输出PrintWriter
PrintWriter pw = resp.getWriter();
//输出数据
pw.println(msg);
//清空缓存:可以加速网页加载
pw.flush();
//关闭pw
pw.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
web.xml
<!-- HttpServletResponse输出数据 -->
<servlet>
<servlet-name>BmiPrintServlet</servlet-name>
<servlet-class>com.test.controller.BmiPrintServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>BmiPrintServlet</servlet-name>
<url-pattern>/bmiPrint</url-pattern>
</servlet-mapping>
打开bmiindex.jsp
输入你的基本信息，点击提交。
这种提交全局刷新后显示的过程叫做全局刷新。
局部刷新(Ajax)
上边讲到了全局刷新，现在讲一下使用ajax的局部刷新。
在使用ajax进行网页局部刷新时，主要使用XMLHttpRequest异步对象完成的。
1.首先，新建jsp,使用XMLHttpRequest异步对象。
使用异步对象有以下四个步骤：
- 创建
- 绑定事件
- 初始化请求
- 发送请求
2.然后，创建服务器的servlet，接收并处理数据，把数据输出给异步对象。
ajaxbmiindex.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ajax局部刷新</title>
<script type="text/javascript">
//使用内存的异步对象，代替浏览器发送请求。异步对象使用js创建和管理的。
function doAjax() {
// 1.创建异步对象
var xmlHttp = new XMLHttpRequest();
// 2.绑定事件
xmlHttp.onreadystatechange = function() {
// 处理服务器返回的数据，更新当前页面
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data = xmlHttp.responseText;
document.getElementById("mydata").innerText = data;
}
}
// 获取dom对象的value属性值
var name = document.getElementById("name").value;
var w = document.getElementById("w").value;
var h = document.getElementById("h").value;
var param = "name="+name+"&w="+w+"&h="+h;
// 3.初始请求数据
xmlHttp.open("get", "bmiAjax?"+param, true);
// 4.发起请求
xmlHttp.send();
}
</script>
</head>
<body>
姓名：<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()"/>
<p id = "mydata"></p>
</body>
</html>
可以看到我们的提交已经不是通过form表单完成，而是使用了doAjax()这个点击事件，使用内存的异步对象，代替浏览器发送请求，而异步对象使用js创建和管理的。
注意点：var param = “name=”+name+"&w="+w+"&h="+h;此处就是在模拟get方式的数据发送格式。
BmiAjaxServlet.java
package com.test.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class BmiAjaxServlet extends HttpServlet {
public BmiAjaxServlet() {
// TODO Auto-generated constructor stub
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
//接收请求参数
String name = req.getParameter("name");
String height = req.getParameter("h");
String weight = req.getParameter("w");
//计算bmi 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 = "你的bmi是正常的";
}else if(bmi > 23.9 && bmi <= 27){
msg = "你的身体比较胖";
}else{
msg = "你的身体肥胖";
}
msg = "您好："+name+"先生/女士，您的bmi的值是："+bmi+","+msg;
// 相应ajax的数据，使用HttpServletResponse输出数据
resp.setContentType("text/html;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.println(msg);
pw.flush();
pw.close();
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
}
}
这个servlet服务器的代码和全局刷新区别不大，最大的区别就是他是回调到发起请求的那个页面。
运行ajaxbmiindex.jsp,输入相应信息。
点击计算bmi。
回调信息直接显示在页面上，其他地方都没有改变，这就是我们使用ajax完成的局部刷新。
