Web基础：Ajax入门
目录
1.全局刷新和局部刷新
2.Ajax简介
3.Ajax异步的实现步骤
3.1 异步对象的重要属性
3.2 实现步骤
3.3 异步请求流程图
4.使用Ajax的例子
5.使用json作为数据交换格式
6.同步请求和异步请求
1.全局刷新和局部刷新
全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面。
局部刷新：在浏览器的内部，发起请求，获取数据，改变页面中的部分内容，其余的页面无需加载和渲染。
Ajax就是用来做局部刷新的。局部刷新使用的核心对象是异步对象XMLHttpRequest。这个异步对象是存在于浏览器内存中的，使用JavaScript语法创建和使用XMLHttpRequest对象。
2.Ajax简介
Ajax：Asynchronous JavaScript and XML
Asynchronous：异步的
JavaScript：javascript脚本，在浏览器中执行
xml：是一种数据格式
Ajax是一种做局部刷新的方法，不是一种新语言。Ajax包含的技术主要有javascript、dom、css、xml等等。核心是javascript和xml。
javascript：负责创建异步对象，发送请求，更新页面的dom对象。ajax请求需要服务器端的
数据，要和服务端交互。
xml：网络中的传输的数据格式。(目前使用json来替代了xml)
3.Ajax异步的实现步骤
3.1 异步对象的重要属性
①onreadystatechange属性：一个js函数名或直接定义函数，每当readyState属性改变时，就会调用该函数。
②readyState属性：存有XMLHttpRequest的状态，从0到4发生变化。
0：请求未初始化，创建异步请求对象。var xmlHttp = new XMLHttpRequest();
1：初始化异步请求对象。xmlHttp.open(请求方式,请求地址,true)
2：异步对象发送请求。xmlHttp.send()
3：异步对象接收从服务端返回的数据，XMLHttpRequest内部处理。注意3是异步对象内部使
用，表示获取了原始的数据。
4：异步请求对象已经将数据解析完毕，此时才可以读取数据。在状态4时更新当前页面。
③status属性：
200："OK"
404：未找到页面
④responseText/responseXML属性：获取服务器端返回的数据。
responseText：获得字符串形式的响应数据
responseXML：获得XML形式的响应数据
3.2 实现步骤
①创建异步对象XMLHttpRequest：
var xmlHttp = new XMLHttpRequest();
②给异步对象绑定onreadystatechange事件。当异步对象发起请求，获取了数据就会触发这个事件，这个事件需要指定一个函数，在函数中处理状态的变化。
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
处理请求的状态变化
}
}
③初始异步请求对象。异步的方法open()。
xmlHttp.open(请求方式get|post,"服务器端的访问地址",同步|异步请求[默认是true表示异步]);
如：xmlHttp.open("get","loginServlet?name=zs&pws=123",true);
④使用异步对象发送请求。
xmlHttp.send();
⑤接收服务器响应的数据。使用异步对象的responseText或responseXML属性。
3.3 异步请求流程图
可以有多个异步对象。
4.使用Ajax的例子
1.简单例子：根据用户输入，计算bmi，然后通过局部刷新出现检测结果。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
局部刷新--ajax
局部刷新ajax-计算bmi
姓名：
体重（公斤）：
身高（米）：
等待加载数据..
public class BmiAjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收参数
String name = request.getParameter("name");
String weight = request.getParameter("w");
String height = request.getParameter("h");
float w = Float.valueOf(weight);
float h = Float.valueOf(height);
//计算bmi
float bmi = w / (h * h);
String msg = "";
if(bmi <= 18.9){
msg = "您很瘦";
}else if(bmi > 18.9 && bmi <= 23.9){
msg = "您的bmi正常";
}else if(bmi > 23.9 && bmi <= 27.5){
msg = "您较胖";
}else {
msg = "您肥胖";
}
//响应Ajax需要的数据，使用HttpServletResponse输出数据
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(msg);
out.flush();
out.close();
}
}
BmiAjaxServlet
com.bjpowernode.controller.BmiAjaxServlet
BmiAjaxServlet
/bmiAjax
2.通过省份id查询省份名称，使用了利用JDBC在服务端从数据库获取数据。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
ajax根据省份id获得名称
ajax根据省份id获得名称
省份编号：
省份名称
public class QueryProvinceServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理get请求
String proid = request.getParameter("proid");
System.out.println(proid);
String name = "默认无数据";
if(proid != null && !"".equals(priod.trim())){//参数不为空，并且参数不为空字符串
ProvinceDao dao = new ProvinceDao();
name = dao.queryProvinceNameById(Integer.valueOf(proid));//如果是空字符串这里转换成Integer会出异常
}
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.println(name);
pw.flush();
pw.close();
}
}//使用jdbc访问数据库
public class ProvinceDao {
//根据id获取名称
public String queryProvinceNameById(Integer provinceId){
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs= null;
String sql = "";
String name = "";
String url = "jdbc:mysql://localhost:3306/springdb";
String root = "root";
String password = "Axxyneymar123";
//加载驱动
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,root,password);
sql = "select name from province where id=?";
ps = conn.prepareStatement(sql);
ps.setInt(1,provinceId);
rs = ps.executeQuery();
while(rs.next()){
name = rs.getString("name");
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}finally {
if(rs != null){
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(ps != null){
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(conn != null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
return name;
}
}5.使用json作为数据交换格式
根据省份编号，查询省份的全部数据，数据格式是json。
json的分类：
①json对象：JSONObject，这种对象的格式---名称:值，也可以看作是key:value的形式。
②json数组：JSONArray，基本格式：[{ name:"河北", jiancheng:"冀","shenghui":"石家庄"} ,
{ name:"山西", jiancheng:"晋","shenghui":"太原"} ]
为什么使用json：
①json格式好理解；
②json格式数据在多种语言中比较容易处理。使用java、javascript读写json格式的数据比较容
易；
③json格式数据占用的空间小，在网络中传输快，用户的体验好。
处理json的工具库：
①gson：谷歌公司的。
②fastjson：速度最快，但不是最符合json处理规范的，阿里巴巴公司的。
③jackson：性能好，规范好。目前学习使用的。
④json-lib：性能差，依赖多。
代码实现：
①省的实体类：
public class Province {
private Integer id;
private String name;
private String jiancheng;
private String shenghui;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getJiancheng() {
return jiancheng;
}
public void setJiancheng(String jiancheng) {
this.jiancheng = jiancheng;
}
public String getShenghui() {
return shenghui;
}
public void setShenghui(String shenghui) {
this.shenghui = shenghui;
}
public Province() {
}
public Province(Integer id, String name, String jiancheng, String shenghui) {
this.id = id;
this.name = name;
this.jiancheng = jiancheng;
this.shenghui = shenghui;
}
}②前端代码：在js中，可以把json格式的字符串转为json对象，json中的key就是json对象的属
性名。使用函数eval()
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
使用json格式的数据
ajax请求使用json格式的数据
省份编号：
省份名称：
省份简称
省会名称：
③JDBC连接数据库：
public class ProvinceDao {
//根据id获取一个完整的Province对象
public Province queryProvinceById(Integer provinceId){
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs= null;
String sql = "";
Province province = null;
String url = "jdbc:mysql://localhost:3306/springdb";
String root = "root";
String password = "Axxyneymar123";
//加载驱动
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection(url,root,password);
sql = "select id,name,jiancheng,shenghui from province where id=?";
ps = conn.prepareStatement(sql);
ps.setInt(1,provinceId);
rs = ps.executeQuery();
while(rs.next()){
province = new Province();
province.setId(rs.getInt("id"));
province.setName(rs.getString("name"));
province.setJiancheng(rs.getString("jiancheng"));
province.setShenghui(rs.getString("shenghui"));
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
}finally {
if(rs != null){
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(ps != null){
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(conn != null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
return province;
}
}④Servlet实现类，将从数据库中取出的数据转为json格式，利用了jackson工具库中的一个类
ObjectMapper，该对象有一个方法writeValueAsString()，可以将java对象转换为json格
式的字符串。
Province p = new Province();
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(p);
public class QueryJsonServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取请求参数，省份的id
String proid = request.getParameter("proid");
//默认值，{}：表示json格式的数据
String json = "{}";
//判断proid是否有值
if(proid != null && proid.trim().length() >0 ){
ProvinceDao dao = new ProvinceDao();
Province p = dao.queryProvinceById(Integer.valueOf(proid));
//需要使用jackson把Province对象转化为json格式
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(p);
}
//把获取的数据，通过网络传给ajax中的异步对象，响应结果数据
//指定服务器端（servlet）返回给浏览器的是json格式的数据
response.setContentType("application/json;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.println(json);//输出数据，会赋给ajax中的responseText属性
//servlet写完之后，可以启动tomcat，在url上手动输入参数进行测试
pw.flush();
pw.close();
}
}6.同步请求和异步请求
xmlHttp.open()方法中的第三个参数true表示异步处理请求，false表示同步处理请求。
异步处理请求：使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其他的操作。
同步处理请求：异步对象必须处理完成请求，从服务器端获取数据后，才能执行send()之后的代码，即任意时刻只能执行一个异步请求。
PS：根据动力节点课程整理，如有侵权，联系删除。