1.Ajax局部刷新技术概述，底层原理，全局刷新的例子

文章目录

Ajax
- 0、第四阶段概述
- - 本阶段课程内容：
  - 哪些感觉比较难？
- 1、全局刷新和局部刷新
- 2、异步对象
- 3、Ajax
- 4、Ajax中使用异步对象
- - （1）创建异步对象
  - （2）给异步对象绑定事件
  - - 异步对象的属性readyState
    - 异步对象的属性 status
  - （3）初始异步请求对象
  - （4）使用异步对象发送请求
  - - 怎么能获取服务器端返回的数据？
- 5、全局刷新的例子

Ajax

0、第四阶段概述

本阶段课程内容：

前端内容：ajax,jquery
动态代理
maven：项目的构建工具
mybatis：访问数据库的框架
spring：管理和创建对象的构架
springmvc：做web开发的

前面的1-3阶段是小学部分

第四阶段：初中部分。

前端内容：ajax,jquery —JavaScript , Dom， Html,Css
1. 动态代理：反射
2. mybatis: —JDBC的升级（创建Connection,执行sql 得到ReultSet，关闭资源）
3. spring: — 看做是创建管理对象，之前是 new Student() ,new StudentDao().
4. springmvc: —servlet的升级，使用servlet接收请求，现在使用springmvc做servlet的事情

哪些感觉比较难？

反射：先初级入门，经验多了后，再看就好多了

js: 主要是用的少

1、全局刷新和局部刷新

全局刷新：浏览器输入url地址，网页页面全部发生改变，数据传输量大。

局部刷新：还是原来的页面，只有局部页面发生改变，数据传输量小。

eg1:级联刷新

浏览器只有部分发生变化

eg2:搜索列表

2、异步对象

内存中可以有多个异步对象，发请求，和获取数据。
AJax就是实现异步刷新的一种技术
XmlHttpRequest就一种异步对象，存在于浏览器内存之中

总结：

ajax是用来做局部刷新的

局部刷新使用的核心就是异步对象（XmlHttpRequest）

这个异步对象存在于浏览内存中的

使用js语法创建和使用 XmlHttpRequest 对象

3、Ajax

Ajax :Asynchronous JavaScript and XML(异步的JS 和XML)

Asynchronous ：异步的意思

js：js脚本，在浏览器中执行

and: 和

xml:是一种数据格式

ajax是一种做局部刷新的新方法，不是一种语言。
ajax包含的技术主要有js,dom,css,xml等等, 核心是js 和xml.
- js:负责创建异步对象，发送请求，更新页面的dom对象。 ajax请求需要服务器端的数据。
- xml:网络中数据传输的数据格式 . （后来用json替换了xml）

4、Ajax中使用异步对象

（1）创建异步对象

var xmlHttp = new XMLHttpRequest();

（2）给异步对象绑定事件

onreadystatechange: 当异步对象发起请求，获取了数据就会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化。

例如：

xmlHttp.onreadystatechange = function(){处理请求的状态变化 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//可以处理服务器端的数据，更新当前页面}}

因为是网络请求，有很多状态，涉及网络的传输和网络的通信，以及请求不同点的变化，这些请求的状态变化，用readyState属性来表示。

异步对象的属性readyState

表示异步对象请求的状态变化

异步对象的属性 status

表示网络请求的状况的，200，404，500

需要是当status == 200 时，表示当网络请求是成功的

（3）初始异步请求对象

异步的方法 open().

xmlHttp.open(请求方式 get| post, “服务器端的访问地址”，同步|异步请求默认是true)

例如：

xmlHttp.open(“get”,“loginServlet? name =zs& pwd =123”,true);

（4）使用异步对象发送请求

     xmlHttp.send()

怎么能获取服务器端返回的数据？

使用异步对象的的属性 responseText
- 例子
  
  xmlHttp.responseTest

xmlHttp.onreadystatechange = function(){处理请求的状态变化 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//可以处理服务器端的数据，更新当前页面var data = xmlHttp.responseTest;document.getElementById("name").value = data;}}

总结：

整个ajax 就这一个对象，就这四个步骤就完事了。

注意点：

这个函数会执行好多次，每次状态值status改变就会执行一次。

5、全局刷新的例子

首页：

<%--Created by IntelliJ IDEA.User: AdministratorDate: 22/04/04Time: 上午 12:09To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>全局刷新</title></head><body><p>全局刷新</p><form action="bmiServlet" method="get">姓名：<input type="text" name="name"> <br>体重（公斤）：<input type="text" name="w"> <br>身高（米）：<input type="text" name="h"> <br><input type="submit" value="提交"></form></body>
</html>

serlvet:

package com.blackcat.controller;import java.io.IOException;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 heigth = request.getParameter("w");String Weight = request.getParameter("h");//计算bmi： bmi = 体重/身高的平方float h = Float.valueOf(heigth);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 = "你的身体肥胖";}System.out.println("msg=" + msg );msg = "您好" + strName + "先生/女士，你的bmi值是：" + bmi + "," + msg;//把数据存入requestrequest.setAttribute("msg",msg);//转发到新的页面request.getRequestDispatcher("/result.jsp").forward(request,response);}
}

结果页：

<%--Created by IntelliJ IDEA.User: AdministratorDate: 22/04/04Time: 上午 2:37To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="true" language="java" %>
<html>
<head><title>结果页面</title>
</head>
<body><p>显示bmi计算结果</p><h3>${msg}</h3>
</body>
</html>

效果：