1.Ajax局部刷新技术概述，底层原理，全局刷新的例子-CFANZ编程社区

文章目录

- Ajax

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:级联刷新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1GTMgr3h-1649013240471)(Ajax.assets/image-20220403124856780.png)]

浏览器只有部分发生变化

eg2:搜索列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IOCpPkr8-1649013240475)(Ajax.assets/image-20220403125031576.png)]

2、异步对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8uN5fuk-1649013240477)(Ajax.assets/image-20220403134952402.png)]

内存中可以有多个异步对象，发请求，和获取数据。
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);

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

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

xmlHttp.onreadystatechange = function(){

	处理请求的状态变化 

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

}

总结：

注意点：

5、全局刷新的例子

首页：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 22/04/04
  Time: 上午 12:09
  To 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;

        //把数据存入request
        request.setAttribute("msg",msg);

        //转发到新的页面
        request.getRequestDispatcher("/result.jsp").forward(request,response);
    }
}

结果页：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 22/04/04
  Time: 上午 2:37
  To 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>