Ajax

Ajax学习

AJAX学习

客户端与服务器

上网的本质目的：通过互联网的形式来获取和消费资源

服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器

客户端

上网过程中，负责获取和消费资源的电脑，叫做客户端

URL地址

URL地址：UniformResourceLocator——统一资源定位符，用于标记互联网上每一个资源的唯一存放位置，浏览器只能通过URL地址才能正确定位资源的存放位置，从而成功访问对于的资源

URL地址的组成部分

客户端与服务器之间的通信协议
存有该资源的服务器的名称
资源在服务器上具体的存放位置

分析网页的打开过程

客户端与服务器之间的通信过程：分为请求——处理——响应
网页中的每一个资源，都是通过请求——处理——响应的方式从服务器获取回来的

服务器对外提供了那些资源

网页好最常见的资源：

文字内容
图片资源
音频资源
视频资源
数据也是一种资源

数据是网页的灵魂

HTML是网页的骨架
CSS是网页的颜值
JavaScript是网页的行为
数据还是网页的灵魂

如果要在网页中请求服务器上的数据资源，这需要用到XMLHttpRequest对象
XMLHttpRequest（简称xhr）是浏览器提供的js的成员，通过它，可以请求服务器上的数据资源
最简单的使用方法：var xhr=new XMLHttpRequest()

资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的请求方式为GET和POST请求

get请求通常用于获取服务器端资源（向服务器要资源）

例如：根据URL地址，从服务器获取HTML文件，Css文件，js文件。图片文件等

post请求通常用于向服务器提交数据（往服务器发送资源）

例如：登录时向服务器提交的登录信息，注册时向服务器提交的注册信息，添加用户时向服务器提交的用户信息等各种数据提交操作

了解Ajax

Ajax：Asynchronous JavaScript And XML（异步JavaScript和XML）

通俗理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax

Ajax能让我们轻松实现网页与服务器之间的数据交互

Ajax的典型应用场景

用户名的检测
数据分页显示
数据的增删改查

JQuery中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度

jQuery中发起Ajax的请求最常用的三个方法：

$.get()——从服务器拿数据
$.post()——从服务器提交数据
$.ajax()——既可以从服务期拿数据，也可以从服务器提交数据

$.get()函数的语法

jQuery中的$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用

$.get()语法格式：


x
1

2
$.get(url,[data],[callback])
3

参数：

url——请求的资源地址，参数类型为String，是必选参数，即servlet接口的地址
data——可选参数，参数类型为object，请求资源期间携带的参数
callback——可选参数，参数类型为function，请求成功的回调函数，数据获取成功后会调用这个函数

$.get()发起不带参数的请求

使用$.get()函数发起不带参数的请求时，直接提供请求的URL地址和请求成功之后的回调函数即可

例如：


xxxxxxxxxx
4
1

2
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
3
    console.log(res) //这里的res时服务器返回的数据
4
})

servlet接口里的response.getWrite().write(“hello world”)就是Ajax接收到的参数，即res

$.get()发起带参数的请求

例如：


xxxxxxxxxx
5
1

2
$.get("http://www.liulongbin.top:3006/api/getbooks",  {id:1} , function(res){
3
    console.log(res)//准确获取服务器里面对于索引的数据
4
})
5

$.post()函数的语法

jQuery中的$.post()函数的功能单一，专门用来发起post请求，从而向服务器提交数据

$.post()语法：


xxxxxxxxxx
3
1

2
$.post(url,[data],[callback])
3

url——必选参数，是提交数据的接口地址
data——可选参数，是要提交的数据，参数类型是object对象
callback——可选参数，数据提交成功的回调函数，function

$.post()向服务器提交数据


xxxxxxxxxx
7
1

2
$.post("http://www.liulongbin.top:3006/api/getbooks",{
3
    bookname:"水浒传",author:"施耐庵",publisher:"上海图书出版社"
4
},function(){
5
    console.log("数据提交成功")
6
})
7

$.ajax()函数的语法

相比于其他两个请求，$.ajax()函数是一个功能比较齐全的综合函数，它允许我们队Ajax请求进行更详细的配置

$.ajax()的基本语法：


xxxxxxxxxx
7
1

2
$.ajax({
3
    type: '',   //请求的方式，例如GET，POST
4
    url: '',  //请求的接口地址
5
    data:{}, //这次请求要携带的数据
6
    success:function(res){} //请求成功之后的回调函数
7
})

type：请求的方式，值为GET或POST，可以写成小写，建议写成大写
url：请求的接口地址
data：请求携带的数据——不需要参数可以不写
success：请求成功后的回调函数

使用$.ajax()发起GET请求


xxxxxxxxxx
9
1

2
$.ajax({
3
    type:'GET',
4
    url:'http://www.liulongbin.top:3006/api/getbooks',
5
    data:{id:1},
6
    success:function(res){
7
        console.log(res)
8
    }
9
})

使用$.ajax()发起POST请求


xxxxxxxxxx
12
1
$.ajax({
2
    type:'GET',
3
    url:'http://www.liulongbin.top:3006/api/addbooks',
4
    data:{
5
        bookname:'水浒传',
6
        author:'施耐庵',
7
        publisher:'上海图书出版社'
8
    },
9
    success:function(res){
10
        console.log("添加数据成功")
11
    }
12
})

接口

接口的概念：使用Ajax请求数据的时候，被请求的URL地址，就叫做数据接口（简称接口），同时接口必须有请求方式

接口的请求过程

接口测试工具

接口测试工具：为了验证接口能否被正常访问，我们常常需要使用接口测试工具，来对数据接口进行检测。

好处：接口测试工具能让我们在不写任何代码的情况下，对接口进行调用和测试。

使用PostMan接口测试工具

PostMan的官网：https://www.getpostman.com/downloads/

接口文档

接口文档，接口的说明书，他是我们调用接口的依据，好的接口文档包含了对接口URL、参数以及输出内容的说明

接口的组成部分：

接口名称：用来标识各个接口的简单说明
接口URL：接口的调用地址
调用方法：接口的调用方式
参数格式：接口需要传递的参数，每一个参数必须包括参数名称、参数类型、是否必选、参数说明这4项内容
响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容
返回示例（可选）：通过对象的形式，例举服务器返回数据的结构

JSON

JSON的基础语法

定义


xxxxxxxxxx
7
1

2
var 变量名={
3
      "key1":"value1",
4
        "key2":"value2",
5
        "key3":"value3",
6
        "key4":"value4",
7
}

示例


xxxxxxxxxx
6
1
var json={
2
    
3
    "name":"李白",
4
    "age":18,
5
    "addr":["西安","上海","北京"]
6
}

获取数据

变量名.key


xxxxxxxxxx
3
1

2
json.key
3

value的数据类型

数字(整形或浮点型)
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）
null

JSON数据和Java对象转换

请求数据：JSON字符串转为Java对象
响应数据：Java对象转为JSON字符串
Fastjson：是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言最快的JSON库，可以实现Java对象和JSON字符串的转换

使用：

导入坐标


xxxxxxxxxx
5
1
<dependency>
2
    <groudid>com.alibaba</groudid>
3
    <artifactid>fastjson</artifactid>
4
    <version>2.0.20</version>
5
</dependency>

java对象转JSON


xxxxxxxxxx
3
1

2
String jsonStr=JSON.toJSONString(obj);
3

JSON字符串转Java对象


xxxxxxxxxx
3
1

2
User user=JSON.parseObject(jsonStr,User.class);
3

案例

测试类


xxxxxxxxxx
17
1

2
public class Fastjson{
3
    public static void main(String[] args) {
4
        
5
        //将Java对象转为JSON字符串
6
        
7
        User user=new User();
8
        user.setId(1);
9
        user.setUsername("李白");
10
        user.setPwd("123");
11
        
12
        String jsonstr=JSON.toJSONString(user);
13
        
14
        //将JSON转为Java对象
15
        
16
    }
17
}

User对象


xxxxxxxxxx
7
1

2
public class User{
3
    private Integer id;
4
    private String username;
5
    private String pwd;
6
    //省略set和get方法....................................以及toString方法
7
}

FormData对象管理表单数据

ajax操作往往用来提交表单数据，为了方便处理，HTML5新增了一个FormData对象，可以模拟表单操作

使用流程：


xxxxxxxxxx
21
1

2
//新建一个FormData对象
3
var fd=new FormData()
4

5
//为FormData添加表单项
6
fd.append("uname","zs")
7
fd.append("upwd","123456")
8

9
//创建xhr对象
10
var xhr=new XMLHttpRequest()
11
//指定请求类型和URL地址
12
xhr.open("POST","https://.......")
13
//提交FormData对象
14
xhr.send(fd)
15
//监听函数
16
xhr.onreadystatechange=function(){
17
    if(xhr.readyState===4&&xhr.status===200){
18
        console.log("添加数据成功")
19
    }
20
}
21

FormData对象也可以用来获取网页表单的值

示例：


xxxxxxxxxx
6
1

2
<form id="form">
3
    <input type="text" name="uname" autocomplete="off"/>
4
        <input type="text" name="upwd" autocomplete="off"/>
5
    <button type="submit">提交</button>
6
</form>


xxxxxxxxxx
18
1
//获取表单元素
2
var form=document.querySelector("#form")
3
//监听表单元素的submit事件
4
form.addEventListener('submit',function(e){
5
    //阻止表单的默认提交行为
6
    e.preventDefault()
7
    //根据form表单创建FormData对象会自动将表单数据填充到FormData对象中
8
    var fd=new FormData(form)//获取的表单元素传递给FormData对象
9
    var xhr=new XMLHttpRequest()
10
    xhr.open("POST","http.....")
11
    xhr.send(fd)
12
    xhr.onreadystatechange=function(){
13
        if(xhr.readyState===4&&xhr.status===200){
14
            console.log("请求成功")
15
        }
16
    }
17
})
18

上传文件

新版的XMLHttpRequest对象，不仅可以实现发送文本信息，还可以实现上传文件的功能

实现步骤

定义UI结构
验证是否选择文件
向FormData中追加文件
使用xhr发起上传文件的ajax请求
监听onreadystatechange事件


xxxxxxxxxx
47
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9
<body>
10
    <input type="file" id="file"/>
11
    <button id="btn">上传文件</button>
12
    <img src="" alt="" id="img">
13
</body>
14
<script>
15

16
    // 验证是否选择文件
17
    // 获取上传文件按钮
18
    let btn=document.querySelector("#btn")
19
    btn.addEventListener('click',function(){
20
        let files=document.querySelector("#file").files //获取文件的数组
21
        if(files.length<=0){
22
            confirm("请选择要上传的文件")
23
        }else{
24
            console.log(files[0]);
25

26
//          向FormData对象追加文件
27
            var fd=new FormData()
28
            fd.append("file",files[0])
29

30
            // xhr发起上传文件的请求
31
            var xhr=new XMLHttpRequest()
32
            xhr.open("POST","http://www.liulongbin.top:3006/api/upload/avatar")
33
            xhr.send(fd)
34
            xhr.onreadystatechange=function(){
35
                if(xhr.readyState===4&&xhr.status===200){
36
                    var data=JSON.parse(xhr.responseText)
37
                    if(data.status===200){
38
                            document.querySelector("#img").src="http://www.liulongbin.top:3006"+data.url
39
                    }else{
40
                        console.log(data.message);
41
                    }
42
                }
43
            }
44
        }
45
    })
46
</script>
47
</html>

显示文件的上传进度

新版本的XMLHttpRequest对象中可以通过监听xhr.upload.onprogress事件来获取文件的上传进度

语法格式


xxxxxxxxxx
11
1

2
//创建xhr对象
3
var xhr=new XMLHttpRequest()
4
xhr.upload.onprpgress=function(e){
5
    //.lengthComputable是一个布尔值，表示当前上传的资源是否具有可计算的长度
6
    if(e.lengthComputable){
7
        //e.loaded 已传输的字节
8
        //e.total 需要传输的总字节
9
        var percentComplete=Math.cell((e.loaded/e.total)*100)
10
    }
11
}

案例：


xxxxxxxxxx
124
1

2
<!DOCTYPE html>
3
<html lang="en">
4

5
<head>
6
    <meta charset="UTF-8">
7
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
    <title>Document</title>
10
    <link rel="stylesheet" href="/bootstrap-3.4.1-dist/css/bootstrap.css">
11
</head>
12
<style>
13
    *{
14
        padding: 0;
15
        box-sizing: border-box;
16
        margin: 0;
17
    }
18
    input{
19
        width: 10vw;
20
        height: 10vw;
21
        background-color: red;
22
        display: flex;
23
        justify-content: center;
24
        align-items: center;
25
        border-radius: 50%;
26
        cursor: pointer;
27
    }
28
    button{
29
        width: 5vw;
30
        height: 2vw;
31
        background-color: aquamarine;
32
        border-radius: 0.4vw;
33
        margin: 0.2vw;
34
    }
35
    body{
36
        width: 100vw;
37
        height: 100vh;
38
        display: flex;
39
        justify-content: center;
40
        align-items: center;
41
        position: relative;
42
        flex-direction: column;
43
    }
44
</style>
45
<body>
46
    <input type="file" id="file" />
47
    <button id="btn">上传文件</button>
48
    <img src="" alt="" id="img">
49
    <div class="progress" style="width: 50%;display: none;" id="pg">
50
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="progress">
51
            0%
52
        </div>
53
    </div>
54
    <div class="alert alert-warning alert-dismissible" role="alert" id="alert" style="display: none;width: 50%;position: absolute;top: 0;">
55
        <button type="button" class="close fade in" data-dismiss="alert" aria-label="Close"><span
56
                aria-hidden="true">&times;</span></button>
57
        <strong>提示：</strong> 文件上传成功！
58
    </div>
59
</body>
60
<script src="/jQuery/jQuery.min.js"></script>
61
<script src="/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
62
<script>
63

64
    // 验证是否选择文件
65
    // 获取上传文件按钮
66
    let btn = document.querySelector("#btn")
67
    btn.addEventListener('click', function () {
68
        let files = document.querySelector("#file").files //获取文件的数组
69
        if (files.length <= 0) {
70
            confirm("请选择要上传的文件")
71
        } else {
72
            $("#pg").show(100)
73
            $("#progress").css({
74
                backgroundColor: "#3498db"
75
            })
76
            document.querySelector("#progress").style.width = 0 + "%"
77
            document.querySelector("#progress").innerHTML = 0 + "%"
78
            console.log(files[0]);
79

80
            //          向FormData对象追加文件
81
            var fd = new FormData()
82
            fd.append("file", files[0])
83

84
            // xhr发起上传文件的请求
85
            var xhr = new XMLHttpRequest()
86
            // 监听文件上传的进度
87
            xhr.upload.onprogress = function (e) {
88
                // 判断文件是否可计算进度
89
                if (e.lengthComputable) {
90
                    // 计算出上传的进度
91
                    var pro = Math.ceil((e.loaded / e.total) * 100)
92
                    console.log(pro);
93

94
                    document.querySelector("#progress").style.width = pro + "%"
95
                    document.querySelector("#progress").innerHTML = pro + "%"
96
                    if (pro == 100) {
97
                        $("#pg").hide(100)
98
                        $("#progress").css({
99
                            backgroundColor:"#55efc4"
100
                        })
101
                        document.querySelector("#alert").style.display="block"
102
                    }
103
                }
104
            }
105
            xhr.open("POST", "http://www.liulongbin.top:3006/api/upload/avatar")
106
            xhr.send(fd)
107
            xhr.onreadystatechange = function () {
108
                if (xhr.readyState === 4 && xhr.status === 200) {
109
                    var data = JSON.parse(xhr.responseText)
110
                    if (data.status === 200) {
111
                        document.querySelector("#img").src = "http://www.liulongbin.top:3006" + data.url
112
                    } else {
113
                        console.log(data.message);
114
                    }
115
                }
116
            }
117
        }
118
    })
119
    $('#myAlert').on('closed.bs.alert', function () {
120
        // do something…
121
    })
122
</script>
123

124
</html>

使用JQuery实现文件上传

第一步：使用FormData对象获取文件
let fd=FormData()
fd.append(“file”,files[0])
使用ajax发送请求
$.ajax({
type:”POST”,
data:fd,
url:””,
contentType:fales,
processData:fales,
success:function(res){},
error:function(){}
})


xxxxxxxxxx
29
1

2
   $("#btn").on('click',function(){
3
        let files=$("#file")[0].files
4
        if(files.length<=0){
5
            alert("请选择文件")
6
        }else{
7
            console.log(files[0]);
8
            var fd=new FormData()
9
            fd.append("avatar",files[0])
10
            $.ajax({
11
                type:"POST",
12
                url:"http://www.liulongbin.top:3006/api/upload/avatar",
13
                data: fd,
14
                // 使用jQuery上传文件要加上这两个属性contentType、processData，并且属性值要都设置为false，不对FormData中的数据进行编码，而是将FormData数据原样发送到服务器
15
                contentType:false,
16
                processData:false,
17
                success:function(res){
18
                    console.log(res.url);
19
                    $("#pg").show()
20
                    $("#progress").css({
21
                        width:0
22
                    })
23
                },
24
                error:function(){
25

26
                }
27
            })
28
        }
29
    })

需要注意的是，使用JQuery来操作ajax进行文件的上传时，必须要使用属性contentType和属性processData，且这两个属性的值都要设置为false，不对FormData中的数据进行编码，使用FormData数据原格式发送到服务器

JQuery实现loading效果

ajaxStart(callback)

ajax请求开始时，执行ajaxStart函数，可以在ajaxStart的callback中显示loading效果，示例如下：


xxxxxxxxxx
7
1

2
//自jQuery版本1.8起，该方法只能被附加到文档——即document
3

4
$(document).ajaxStart(function(){
5
    $("#loading").show()
6
})
7

注意：$(document).ajaxStart()函数会监听当前文档内所有的Ajax请求

ajaxStop(callback)

ajax请求结束后，执行ajaxStop函数，可以在ajaxStop的callback中隐藏loading效果：


xxxxxxxxxx
4
1

2
$(document).ajaxStop(function(){
3
    $("#loading").hide()
4
})

axios

axios是专注于网络数据请求的库

相比于原生的XMLHttpRequest对象，axios简单易用

相比于JQuery，axios更加轻量化，只专注于网路数据的请求

axios发起GET请求

axios.get(“url”,{ params:{ 参数 } } ).then(callback)


xxxxxxxxxx
7
1

2
var url="https://www.liulangbin.top:3006/api/get"
3
var paramsObj={name:"LB",age:20}
4
axios.get(url,{params:paramsObj}).then(function(res){
5
    console.log(res.data)
6
})
7