1.什么是ajax

1.Ajax全称：Asynchronous JavaScript And XML

2.是一种异步加载数据的技术

3.可以通过使用Ajax，实现页面的局部刷新

简单来讲就是通过ajax，你不需要重新刷新整个页面就能实现对局部页面的刷新操作。

2.AJAX的使用

使用ajax主要有以下四步骤

//1.创建ajax对象
 var xhr=new XMLHttpRequest();
 2.监听ajax对象
 xhr.onreadystatechange=function(){}
 3.打开对象
 xhr.open()
 4.发送请求
 xhr.send()

ajax有get和post两种方式发送请求，下面通过java和ajax模拟异步刷新。java方面以SpringBoot作为后台。

3.SpringBoot后台的搭建

搭建SpringBoot后台不是一件困难的事情，下图是整个项目的结构图

3.1 创建项目，引入依赖

创建maven项目，引入SpringBoot相关的依赖

4.0.0com.sdxbajaxtest1.0-SNAPSHOT1.8org.springframework.bootspring-boot-starter-parent2.1.7.RELEASEorg.springframework.bootspring-boot-starterorg.springframework.bootspring-boot-starter-weborg.springframework.bootspring-boot-starter-testorg.springframework.bootspring-boot-maven-plugin
 

3.2 编写启动类和配置文件

编写SpringBoot的启动类AjaxtextApplication

@SpringBootApplication
 public class AjaxtestApplication {public static void main(String[] args) {SpringApplication.run(AjaxtestApplication.class);}
 }

所有html代码均放在resource文件夹下的templates中，在application.properties文件中表明静态文件路径

spring.resources.static-locations=classpath:/templates/
 spring.mvc.view.suffix=.html

3.3 编写controller

新建indexController，首先写一个简单的方法，用于返回我们第一个静态页面index.html

@Controller
 public class indexController {@RequestMapping("/test")public String index(){return "index";}
 }

至此，一个简单的java后台就搭完了。

4.ajax的get请求

我们写一个简单的页面，只包含一个按钮和一行文本。然后通过ajax的get请求去后端请求一段数据，不断刷新到文本处。下面是html代码：

 
 
 
 
 
 
test
 
 
 

关键的ajax代码处已经用注解标出。还需要在controller中处理http://localhost:8080/test2的请求，在indexController中添加以下代码：

@GetMapping("/test2")
 @ResponseBody
 public String index2(HttpServletResponse response){return "hello world";
 }

运行项目，输入http://localhost:8080/test，不断点击按钮，不断将文本刷新到页面上：

5.ajax的post请求

通常需要提交数据的场景都会使用post请求，通过表单提交数据，因此就来模拟登陆的场景。为了方便，我直接将用户名和密码写在前端代码中：login.html

 
 
 
 
 
 
test
 
 
 

同样在indexController中再写两个方法：

@RequestMapping("/log")
 public String login(){return "login";
 }
 @PostMapping("/test3")
 @ResponseBody
 public Result index3(HttpServletRequest request,HttpServletResponse response){String username=request.getParameter("username");String password=request.getParameter("password");Result result=new Result();if (username.equals("sdxb")&&password.equals("123456")){result.setRes(true);return result;}else {result.setRes(false);return result;}
 }

这里的Result对象是自己写的类，只包含一个Res对象，当使用了@ResponseBody后，返回对象时会自动转化成json对象传递给前端。

 附上github代码：https://github.com/OliverLiy/springbootANDajax