AJAX入门(Java程序的自我修养)

一、AJAX简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

　　 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

　　 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

二、AJAX的产生原因

简单点说就是我们在以前写项目的时候,通过框架可以实现页面跳转,但是在写的时候会发现,如果前端人员需要写网页的时候,需要后台程序员把后台的API接口创建完毕,前端人员才能继续写网页,要不然前端人员写了半天网页,但是网页上没有数据,这样前端人员在写的时候没有办法测试网页,但是如果等后台人员把代码写完,前端人员写完,这样项目的周期又会加长,而且如果一个项目周期假如3个月,然后后台代码写了2个月,留给前端人员和测试人员的时间更可怜了

所以最好的办法是前端网页和后台代码一起写,前端网页可以通过JS实现页面跳转

那么当我们前端网页跳转成功以后,前端怎么获取数据?这个时候AJAX的就闪亮登场了

之前我们在进行网页跳转的时候,例如我们想从A页面,跳转到B页面,那么我们需要从A页跳转到后台的API接口,然后通过后台的Java代码跳转到B页面,在跳转到B页面的时候,后台代码可以将B页面的需要数据发送到B页面

但是当我们有了AJAX以后,我们现在如果想从A页面跳转到B页面,那么我们不必经过后台代码,我们在A页面中可以通过JS直接跳转到B页面,但是跳转到B页面以后并没有数据,这样我们可以通过AJAX来访问后台的API接口

三、AJAX测试需要软件工具

1. IntelliJ IDEA 2019.1 x64 提供后台API接口

2. Postman 接口测试工具

3 VsCode前端开发软件

四、AJAX格式

这个是ajax最常用的格式，这里面涉及的参数有url,type,data,sussess,如果想了解更多的参数,可以查看这篇文章 AJAX参数介绍

           $.ajax({
              url:"show.do",//访问的url地址
              type:"POST",//请求类型
              data:{"id":2,},//需要的参数
              success:function(result){
                  //result为接受的结果
                  console.log(result);
              }
           });

五、测试(未携带参数)

步骤一:创建后台API接口,返回格式为JSON

1 后台通过IDEA创建springboot工程,这样提供后台API接口很方便

2 后台提供的接口为 http://localhost:8080/test

　　import org.springframework.web.bind.annotation.RequestMapping;
　　import org.springframework.web.bind.annotation.RestController;

　　@RestController
　　public class TestController {

  　　  @RequestMapping(value = "test")
   　　 public String test() {
   　　     return "测试ajax";
   　　 }
　　}

步骤二:通过Postman接口测试工具测试

步骤三: 通过AJAX访问后台接口

1)导入jQuery:

导入方式分为2种:

(1)将jQuery文件下载至本地,然后在将该文件引入网页

(2)很多服务器提供公开的jQuery文件访问,可以直接引入,但是需要有网络

例如: <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

2)创建AJAX请求

我在这里面使用的VsCode软件写HTML页面,因为这个软件写网页比较方便,而且最重要的时它有AJAX的错误提示

但是如果我们通过VsCode软件访问IDEA服务器中的API接口,属于跨域访问,在浏览器的控制台会报这个错误

此时我们的解决办法可以在后台的API接口添加@CrossOrigin注解实现跨域访问

3) 当后台添加该注解以后,我们的HTML网页刷新以后就可以看到后台返回的数据

4)可以看到我们通过后台API接口返回的数据被接收到到了success参数中,在该参数中创建匿名函数,该匿名函数的形参就是后台返回的JSON数据

然后我们将数据添加到HTML页面就可以

六、测试(携带参数)

步骤一:创建后台API接口,设置接收参数

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin
public class TestController {
    
    @PostMapping(value = "test2")
    public String test2(String name,Integer age){
        System.out.println("接收值：name=" + name);
        System.out.println("接收值：age=" + age);
        return "接收成功 name=" + name + ",age=" + age;
    }
}