全局刷新和局部刷新
B/S结构项目中，浏览器（Browse）负责把用户的请求和参数通过网络发送给服务器（Server），服务端使用Servlet（多种都无端技术的一种）接收请求，并将处理结果返回给浏览器。
浏览器在HTML，JSP上呈现数据，混合使用CSS，JS帮助美化页面，或响应事件。
全局刷新
登录请求处理：
index.jsp 发起登录请求--------LoginServlet--------result.jsp
发起请求 request 阶段：
浏览器现在内存中是 index 页面的内容和数据 ：
服务器端应答结果阶段：
sevlet 返回后把数据全部覆盖掉原来 index 页面内容， result.jsp 覆盖了全部的浏览器内存数据。 整个浏览器数据全部被刷新。重新在浏览器窗口显示数据，样式，标签等
全局刷新原理:
- 必须由浏览器亲自向服务端发送请求协议包。
- 这个行为导致服务端直接将【响应包】发送到浏览器内存中
- 这个行为导致浏览器内存中原有内容被覆盖掉
- 这个行为导致浏览器在展示数据时候，只有响应数据可以展示
局部刷新
浏览器在展示数据时，此时在窗口既可以看到本次的响应数据， 同时又可以看到浏览器内存中原有数据
局部刷新原理:
- 不能由浏览器发送请求给服务端
- 浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求.
- 这个行为导致导致服务端直接将【响应包】发送脚本对象内存中
- 这个行为导致脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有受到任何影响.
- 这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据
AJAX 实现局部刷新的一种技术。
异步请求对象
在局部刷新，需要创建一个对象，代替浏览器发起请求的行为，这个对象存在内存中。代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。
全局刷新是同步行为， 局部刷新是异步行为[浏览器数据没有全部更新]
这个异步对象用于在后台与服务器交换数据。XMLHttpRequest 就是我们说的异步对象。
XMLHttpRequest 对象能够：
在不重新加载页面的情况下更新网页
在页面已加载后向服务器请求数据
在页面已加载后从服务器接收数据
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象
创建 XMLHttpRequest 对象的语法（xhr）：
var xmlhttp=new XMLHttpRequest();
AJAX 中的核心对象就是 XMLHttpRequest
AJAX
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法
AJAX 不是新的编程语言，而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。主要是 JavaScript , XML.
JavaScript: 使用脚本对象 XMLHttpRequest 发送请求， 接收响应数据
XML: 发送和接收的数据格式，现在使用 json
AJAX 不单需要前端的技术，同时需要后端（服务器）的配合。服务器需要提供数据，数据是 AJAX 请求的响应结果。
AJAX 异步实现步骤
XMLHttpRequest 对象介绍
（1） 创建对象方式
var xmlHttp = new XMLHttpRequest();
（2） onreadstatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。此事件可以指定一个处理函数 function。
通过判断 XMLHttpReqeust 对象的状态，获取服务端返回的数据。
语法：
下面是 XMLHttpRequest 对象的三个重要的属性：
onreadystatechange 属性：
一个 js 函数名 或 直接定义函数，每当 readyState 属性改变时，就会调用该函数
readyState 属性：
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化，创建异步请求对象 var xmlHttp = new XMLHttpRequest()
1: 初始化异步请求对象， xmlHttp.open(请求方式，请求地址，true)
2: 异步对象发送请求， xmlHttp.send()
3: 异步对象接收应答数据 从服务端返回数据。XMLHttpRequest 内部处理。
4: 异步请求对象已经将数据解析完毕。 此时才可以读取数据。
status 属性：
200: "OK"
404: 未找到页面
（3） 初始化请求参数：
方法：
open(method,url,async) ： 初始化异步请求对象
参数说明：
method：请求的类型；GET 或 POST
url：服务器的 servlet 地址
async：true（异步）或 false（同步）
例如:
xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)
（4） 发送请求
xmlHttp.send()
（5） 接收服务器响应的数据
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或responseXML 属性。
responseText：获得字符串形式的响应数据
responseXML：获得 XML 形式的响应数据
实例：全局刷新计算 bmi
需求：计算某个用户的 BMI。 用户在 jsp 输入自己的身高，体重；servlet 中计算 BMI，并显示 BMI 的计算结果和建议。
BMI 指数（即身体质量指数，英文为 BodyMassIndex，简称 BMI），是用体重公斤数除以身高米数平方得出的数字，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准
成人的 BMI 数值：
1）过轻：低于 18.5
2）正常：18.5-23.9
3）过重：24-27
4）肥胖：28-32
5）非常肥胖,高于 32
开发步骤：
1.在 idea 中创建新的工程，名称：ch01-bmi-ajax
2.配置 tomcat 服务器，如果已经配置，省略此步骤。
选择 Local
配置 tomcat 服务器的位置
Module 添加 tomcat 支持
出现窗口
选择 2 Library
确定使用 tomcat
3.创建 jsp，定义 form，有参数 name， weight， height
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
全局刷新
全局刷新计算bmi
4.创建 Servlet， 名称 BMIServlet
图片中代码
public class BMIServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse
resp)
throws ServletException, IOException {
String strName = req.getParameter("name");
String strWeight = req.getParameter("weight");
String strHeight = req.getParameter("height");
//计算 bmi
float weight = Float.parseFloat(strWeight);
float height = Float.parseFloat(strHeight);
float bmi = weight / (height * height);
System.out.println(String.format("%s 的 bmi%s",strName,bmi));
String msg = "";
if( bmi < 18.5 ){
msg = "过瘦";
} else if( bmi >= 18.5 && bmi < 23.9 ){
msg = "正常";
} else if( bmi >=23.9 && bmi <= 27){
msg = "过重";
} else if(bmi > 27 && bmi < 32 ){
msg = "肥胖";
} else {
msg="非常肥胖";
}
req.setAttribute("msg", strName + "你的 bmi 是"+bmi+","+msg);
req.getRequestDispatcher("/result.jsp").forward(req,resp);
} }
package com.hust.controller;
import java.io.IOException;
//servlet
public class BmiServlet 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 {
//接收请求参数
String strName = request.getParameter("name");
String height = request.getParameter("h");
String weight = request.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 >= 24 && bmi <=27){
msg = "您身体比较胖";
}else if (bmi >=28 && bmi <=32){
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);
}
}
5.注册 servlet
BmiServlet
com.hust.controller.BmiServlet
BmiServlet
/bmiServlet
6.创建 result.jsp
web 目录下创建 result.jsp 文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
结果页面
显示bmi计算结果
${msg}
7.配置运行程序，输入参数。显示 bmi
实例：使用 HttpServletResponse 响应输出
1.新建 jsp： indexPrint.jsp
2.新建 Servlet, 名称 BMIServeltPrint
图片中的代码
public class BMIServletPrint extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse
resp) throws ServletException, IOException {
String strName = req.getParameter("name");
String strWeight = req.getParameter("weight");
String strHeight = req.getParameter("height");
//计算 bmi
float weight = Float.parseFloat(strWeight);
float height = Float.parseFloat(strHeight);
float bmi = weight / (height * height);
System.out.println(String.format("%s 的 bmi%s",strName,bmi));
String msg = "";
if( bmi < 18.5 ){
msg = "过瘦";
} else if( bmi >= 18.5 && bmi < 23.9 ){
msg = "正常";
} else if( bmi >=23.9 && bmi <= 27){
msg = "过重";
} else if(bmi > 27 && bmi < 32 ){
msg = "肥胖";
} else {
msg="非常肥胖";
}
String res = strName + "你的 bmi 是"+bmi+","+msg;
resp.setContentType("text/html;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.println(res);
pw.flush();
pw.close();
} }
package com.hust.controller;
import java.io.IOException;
import java.io.PrintWriter;
//servlet
public class BmiPrintServlet 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 {
//接收请求参数
String strName = request.getParameter("name");
String height = request.getParameter("h");
String weight = request.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 >= 24 && bmi <=27){
msg = "您身体比较胖";
}else if (bmi >=28 && bmi <=32){
msg = "您的身体肥胖";
}else{
msg = "您非常肥胖";
}
System.out.println("msg=" + msg);
msg = strName + " 先生/女士，您好，您的bmi值是：" + bmi + "，" + msg;
//使用HttpServletResponse输出数据
response.setContentType("text/html;charset=utf-8");
//获取PrintWriter
PrintWriter pw = response.getWriter();
//输出数据
pw.println();
//清空缓存
pw.flush();
//关闭close
pw.close();
}
}
3.注册 Servlet
实例：使用 ajax 请求，计算 bmi
1.新建 ajax.jsp
2.在 ajax.jsp 的 head 部分指定 doAjax()函数
3.复制 BMIServletPrint，重新命名 BMIServletAjax
代码不需要改动
4.注册 Servlet
5.在浏览器访问 ajax.jsp
在 BMIServltAjax 的第一行设置断点，然后在 jsp 中点击按钮，发起请求，观察浏览器中的弹出的内容变化
6.修改 ajax.jsp 中的 doAjax()函数
7.访问 ajax.jsp 请求
在 jsp 中点击按钮，发起请求，观察浏览器中的弹出的内容变化
8.获取 dom 对象 value 值
- 在浏览器测试发送 ajax 请求
10.修改 doAjax 函数
实例：根据省份 id 查询省份名称
需求：用户在文本框架输入省份的编号 id，在其他文本框显示省份名称
项目环境准备：
1）数据库：springdb
2）数据表
省份信息表：
CREATE TABLE `province` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL COMMENT '省份名称',
`jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',
`shenghui` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;
城市信息表：
CREATE TABLE `city` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`provinceid` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;
项目结构：
项目是一个 web 应用， index.jsp 发送请求， SearchServlet 接收请求， 调用 ProvinceDao从数据库获取指定 id 的省份名称
实现步骤：
-
在 idea 新建 web application : 项目名称 ajaxweb
image.png -
配置 tomcat 服务器
image.png -
在 index.jsp 中创建 XMLHttpRequest 对象
定义表单：
image.png
创建 XMLHttpRequest 对象
- 创建 Servlet 处理 Ajax 请求。
- web.xml 文件，注册 servlet
SearchServlet
com.bjpowernode.controller.SearchServlet
SearchServlet
/searchProvince
- 发布应用到 tomcat 服务器，在浏览器访问 index.jsp，得到省份名称
- 添加 mysql 驱动
可 以 在 WEB-INF 目 录 下 创 建 lib 文 件 ， 用 来 存 放 jar 文 件 ， 把 准 备 好 的mysql-connector-java-5.1.6.jar 拷贝到 lib 目录下。
在 Project Structure 窗口中，选择你的 modules，选择 Dependencies
确认修改：
点击“Fix”后选择 Add lib to the artifact
- 创建类 ProvinceDao 访问数据库
方法定义：
定义变量：
访问数据库：
finally 关闭资源
返回结果：
- 修改之前创建的 Servlet
- 修改 index.jsp 的 js 代码
- 部署项目，在浏览器访问应用
实例：使用 json 作为数据交换格式
需求：根据省份编号 id，查询省份的全部数据，数据格式 json
项目结构：
实现步骤：
- 添加处理 json 的工具库
jackson：是非常有名的处理 json 的工具库。使用 jackson 可以实现 java 对象到 json 格式字符串的转换，也可以实现 json 字符串转为 json 对象。
把下面三个 jar 文件复制到/WEB-INF/lib 目录中。
其他步骤同 添加 mysql 驱动
- 创建实体类 Province
- 在 ProvinceDao 中增加方法，返回对象
方法定义：
数据库操作：
其他代码同 selectProvinceName()方法。
- 创建新的 Servlet 对象
- 创建 searchJson.jsp，获取 json 数据
页面定义：
AJAX 请求处理：
- 部署应用，浏览器访问
异步请求
XMLHttpRequest 对象 open( method , url, true ) 第三个参数 true 表示异步请求
异步请求特点：
1)某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成。
2)浏览器委托异步请求对象工作期间，浏览器处于活跃状态。可以继续向下执行其他命令。
- 当响应就绪后再对响应结果进行处理
实现步骤：
- 设置异步对象 open 方法第三个参数为 true
- send()后面，增加 alert()
3.SearchServletJson 类的 doGet 方法第一个加入断点
4.部署应用，在浏览器访问应用。
点击“搜索”按钮，请求发送到 Servlet，程序暂停执行， js 中 alert 执
行继续执行，没有等待请求处理完成，浏览器窗口弹窗“我是在异步请求之后
的执行代码”字符串
同步请求
XMLHttpRequest 对象 open( method , url, false ) 第三个参数 false 表示同步请求
同步请求特点：
1)某一个时刻，浏览器只能委托一个异步请求对象发送请求，必须等待请求处理完成。
2)浏览器委托异步请求对象工作期间，浏览器处于等待状态。不能执行其他命令。
3)不推荐使用
实现步骤：同 以上 步骤，需要 open(method,url,false)第三个参数设为 false
总结
1.全局刷新和局部刷新
全局刷新： 整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载，渲染页面。
局部刷新： 在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容。其余的页面无需加载和渲染。 网络中数据传输量少， 给用户的感受好。
ajax是用来做局部刷新的。局部刷新使用的核心对象是 异步对象（XMLHttpRequest）
这个异步对象是存在浏览器内存中的 ，使用javascript语法创建和使用XMLHttpRequest对象。
2.ajax:Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
Asynchronous: 异步的意思
JavaScript：javascript脚本，在浏览器中执行
and : 和
xml : 是一种数据格式
ajax是一种做局部刷新的新方法（2003左右），不是一种语言。 ajax包含的技术主要有javascript,dom,css, xml等等。 核心是javascript 和 xml 。
javascript：负责创建异步对象， 发送请求， 更新页面的dom对象。 ajax请求需要服务器端的数据。
xml： 网络中的传输的数据格式。 使用json替换了xml 。
<数据>
<数据1>宝马1
<数据2>宝马2
<数据3>宝马3
<数据4>宝马4
3.ajax中使用XMLHttpRequest对象
1）创建异步对象 var xmlHttp = new XMLHttpRequest();
2）给异步对象绑定事件。onreadystatechange ：当异步对象发起请求，获取了数据都会触发这个事件。
这个事件需要指定一个函数， 在函数中处理状态的变化。
btn.onclick = fun1()
function fun1(){
alert("按钮单击");
}
例如：
xmlHttp.onreadystatechange= function(){
处理请求的状态变化。
if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
//可以处理服务器端的数据，更新当前页面
var data = xmlHttp.responseText;
document.getElementById("name").value= data;
}
}
异步对象的属性 readyState 表示异步对象请求的状态变化
0：创建异步对象时， new XMLHttpRequest();
1: 初始异步请求对象， xmlHttp.open()
2：发送请求， xmlHttp.send()
3: 从服务器端获取了数据，此时3， 注意3是异步对象内部使用， 获取了原始的数据。
4：异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。
在4的时候，开发人员做什么 ？ 更新当前页面。
异步对象的status属性，表示网络请求的状况的， 200， 404， 500， 需要是当status==200时，表示网络请求是成功的。
- 初始异步请求对象
异步的方法open().
xmlHttp.open(请求方式get|post, "服务器端的访问地址", 同步|异步请求（默认是true，异步请求）)
例如：
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);
4)使用异步对象发送请求
xmlHttp.send()
获取服务器端返回的数据， 使用异步对象的属性 responseText .
使用例子：xmlHttp.responseText
回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数。
访问地址： 使用get方式传递参数
http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8
4.json使用
ajax发起请求-------servlet（返回的一个json格式的字符串 { name:"河北", jiancheng:"冀","shenghui":"石家庄"}）
json分类：
json对象 ，JSONObject ,这种对象的格式 名称:值， 也可以看做是 key:value 格式。
json数组， JSONArray, 基本格式 [{ name:"河北", jiancheng:"冀","shenghui":"石家庄"} , { name:"山西", jiancheng:"晋","shenghui":"太原"} ]
为什么要使用json ：
- json格式好理解
- json格式数据在多种语言中，比较容易处理。 使用java， javascript读写json格式的数据比较容易。
- json格式数据他占用的空间下，在网络中传输快， 用户的体验好。
处理json的工具库： gson（google）； fastjson（阿里），jackson， json-lib
在js中的，可以把json格式的字符串，转为json对象， json中的key，就是json对象的属性名。