【Ajax异步请求案例&jQuery库对Ajax的封装】

一、Ajax请求：异步的请求.可以进行页面的局部刷新

1、Ajax的核心：异步请求对象XMLHttpRequest

2、Ajax请求的步骤：

(1)创建XMLHttpRequest的对象

    var xhr =  new XMLHttpRequest() 
1

(2)对异步请求对象进行配置：请求方式、请求的地址

  xhr.open('请求方式','请求地址');
1

(3)向服务器发起请求

   xhr.send()
1

(4)当请求-响应发生后,会产生一个状态码,客户端可以根据状态码来触发XMLHttpRequest的事件,目的是获取服务器的响应信息(即客户端如何知道服务器的响应)–onreadystatechange

   xhr.onreadystatechange = function(){}
1

☀️案例演示：使用Ajax对象发起登录验证请求。

(1)若用户名或密码错误，页面局部刷新显示‘用户名或密码错误’

(2)若用户名或密码正确,页面局部刷新显示’登录成功’

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    div{
     width: 500px;
     margin: 100px auto;
 }
style>
<body>
    <div>
     
            <label>
                用户名：<input type="text" id="userName" name="username">
            label>
            <br><br>
            <label>
                密   码：<input type="password" id="userPwd" name="password">
            label>
            <br><br>
            //因为不是表单提交，所以类型就是普通的button类型
           <button type="button" id="btn_reset">重置button>
          
           <button type="button" id="btn_submit">提交button>
 
        <br><br>
       <span id="msg">span>
    div>

    <script>
     // 1、获取登录按钮
    var btn_submit=document.querySelector('#btn_submit')
    // 2、给登录按钮绑定click事件
    btn_submit.onclick=function(){
        //2.1 获取用户输入的用户名和密码
        let name=document.querySelector('#userName').value
        let pwd=document.querySelector('#userPwd').value
        //2.2创建异步请求对象
        let xhr =new XMLHttpRequest()
        //2.3配置请求对象
        let url='http://localhost:5000/login/get?userName='+name+'&userPwd='+pwd
        xhr.open('get',url)
        //2.4向服务器发起请求
        xhr.send()
        //2.5触发onreadystatechange事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
                document.querySelector('#msg').innerHTML = xhr.responseText
            }
        }
    }
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

（express框架）logincheck.js代码：

var express= require('express');
var router =express.Router();

//路由接口
//http://localhost:5000/login/get
router.get('/get',(req, res) => {
   let uname=req.query.userName
    let upwd=req.query.userPwd
    if(uname==='abc' && upwd==='123456'){
        res.send('合法用户，登录成功')
    }else{
        res.send('不合法用户，登录失败')
    }
})
module.exports=router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

app.js代码：导入cors模块，解决跨域问题

var cors = require('cors');
var loginRouter = require('./routes/logincheck');
app.use(cors());
app.use('/login',loginRouter);
1
2
3
4

结果展示：输入’abc‘和’123456‘，合法用户
在这里插入图片描述
输入’abc‘和’123‘，不合法用户

二、jQuery库对Ajax的封装：

1、底层封装函数：

$.ajax({
	   
		  url: '请求地址',
		  
		  type:'请求方式',
		  
		  contentType:'请求参数的类型',
		  
		  data:'发送到服务器的数据',
		  
		  dataType:'服务器返回的数据类型',
		  
		  success:function(data, textStatus){},   --- 请求-响应成功后调用的函数
		  
		  error：function(xhr,){} --- 请求-响应失败后调用的函数
	   })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

☀️例子同上：

login.html代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    div{
     width: 500px;
     margin: 100px auto;
 }
style>
<body>
    <div>
        
            <label>
                用户名：<input type="text" id="userName" name="username">
            label>
            <br><br>
            <label>
                密   码：<input type="password" id="userPwd" name="password">
            label>
            <br><br>
                        
           <button type="button" id="btn_reset">重置button>
                 
           <button type="button" id="btn_submit">提交button>
        
        <br><br>
       <span id="msg">span>
    div>
    <script src="../js/jquery-3.4.1.js">script>
    <script>
      $(function(){//jQuery入口函数
            //1、给登录按钮绑定click事件
            $('#btn_submit').click(function(){
                //2、获取用户输入的密码和用户名
                let name=$('#userName').val()
                let pwd = $('#userPwd').val()
                //3.调用ajax函数向服务器发送异步的请求
                $.ajax({
                    url:'http://localhost:5000/login/get',
                    type:'get',
                    data:{
                        userName:name,
                        userPwd:pwd
                    },
                    success:function(data){
                        $('#msg').html(data)
                    },
                    error:function(error){
                        console.log(error)
                    }
                })
            })
        })
   script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

logincheck.js后端代码如下：

var express= require('express');
var router =express.Router();

//路由接口
//http://localhost:5000/login/get
router.get('/get',(req, res) => {
   let uname=req.query.userName
    let upwd=req.query.userPwd
    if(uname==='abc' && upwd==='123456'){
        res.send('合法用户，登录成功')
    }else{
        res.send('不合法用户，登录失败')
    }
})
module.exports=router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结果展示：输入’abc‘和’123456‘，合法用户
在这里插入图片描述
输入’123‘和’12‘，不合法用户

2、高层封装函数：

（1）发起get请求

$.get(url, [data], [callback], [type]) //发起get请求

 url：请求的服务器地址
		
 data：请求参数(key/value)
		
callback：请求成功的回调函数
		
type：响应信息的格式
1
2
3
4
5
6
7

login.html代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    div{
     width: 500px;
     margin: 100px auto;
 }
style>
<body>
    <div>
        
            <label>
                用户名：<input type="text" id="userName" name="username">
            label>
            <br><br>
            <label>
                密   码：<input type="password" id="userPwd" name="password">
            label>
            <br><br>
                        
           <button type="button" id="btn_reset">重置button>
                 
           <button type="button" id="btn_submit">提交button>
        
        <br><br>
       <span id="msg">span>
    div>
    <script src="../js/jquery-3.4.1.js">script>
    <script>
      $(function(){//jQuery入口函数
            //1、给登录按钮绑定click事件
            $('#btn_submit').click(function(){
                //2、获取用户输入的密码和用户名
                let name=$('#userName').val()
                let pwd = $('#userPwd').val()
                //3.调用ajax函数向服务器发送异步的请求
                $.get('http://localhost:5000/login/get',{userName:name,userPwd:pwd},function(result){
                $('#msg').html(result)
             })
           })
        })
   
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

logincheck.js后端代码如下：

var express= require('express');
var router =express.Router();

//路由接口
//http://localhost:5000/login/get
router.get('/get',(req, res) => {
    let uname=req.query.userName
     let upwd=req.query.userPwd

    if(uname==='abc' && upwd==='123456'){
        res.send('合法用户，登录成功')
    }else{
        res.send('不合法用户，登录失败')

    }
})

module.exports=router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果展示：输入’abc‘和’123456‘，合法用户
在这里插入图片描述
输入’123‘和’12‘，不合法用户

（2）发起post请求

$.post(url, [data], [callback], [type]) //发起post请求

url：请求的服务器地址
		
data：请求参数(key/value)
		
callback：请求成功的回调函数
		
type：响应信息的格式
1
2
3
4
5
6
7

login.html代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    div{
     width: 500px;
     margin: 100px auto;
 }
style>
<body>
    <div>
        
            <label>
                用户名：<input type="text" id="userName" name="username">
            label>
            <br><br>
            <label>
                密   码：<input type="password" id="userPwd" name="password">
            label>
            <br><br>
                        
           <button type="button" id="btn_reset">重置button>
                 
           <button type="button" id="btn_submit">提交button>
        
        <br><br>
       <span id="msg">span>
    div>
    <script src="../js/jquery-3.4.1.js">script>
    <script>
      $(function(){//jQuery入口函数
            //1、给登录按钮绑定click事件
            $('#btn_submit').click(function(){
                //2、获取用户输入的密码和用户名
                let name=$('#userName').val()
                let pwd = $('#userPwd').val()
                //3.调用ajax函数向服务器发送异步的请求
                $.post('http://localhost:5000/login/post',{userName:name,userPwd:pwd},function(result){
                $('#msg').html(result)
                },'json')
            })
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

logincheck.js后端代码如下：

var express= require('express');
var router =express.Router();

//路由接口
//http://localhost:5000/login/post
router.post('/post',(req, res) => {
   // let uname=req.query.userName
   //  let upwd=req.query.userPwd
    let uname=req.body.userName
    let upwd=req.body.userPwd
    if(uname==='abc' && upwd==='123456'){
        res.send('合法用户，登录成功')
    }else{
        res.send('不合法用户，登录失败')

    }
})
module.exports=router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果展示：输入’abc‘和’123456‘，合法用户
在这里插入图片描述
输入’123’和’12’，不合法用户

3、辅助函数：

serialize()：表单序列化函数(将表单(form)中的控件的值转换成字符串)

test.html代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <form>
        <lable>毕业院校：lable>
        <select name="single">
            <option>西安邮电大学option>
            <option>西北政法大学option>
        select>
        <br><br>
        <label>兴趣爱好：label>
        <input type="checkbox" name="hobby" value="游泳"/>游泳
        <input type="checkbox" name="hobby" value="游戏"/>游戏
        <br><br>
        <label>性别：label>
        <input type="radio" name="sex" value="男"checked='checked'>男
        <input type="radio" name="sex" value="女">女
    form>
    <br><br>
    <button type="button" id="btn">获取表单数据button>
    <script src="../js/jquery-3.4.1.js">script>
    <script>
        $(function(){
            $('#btn').bind('click',function(){
                let str = $('form').serialize()//表单序列化
               $.post('http://localhost:3000/login/serlize',$('form').serialize(),function(result){
                console.log(result)
               })
            })
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

后端test.js代码如下：

var express= require('express');
var router =express.Router();
//路由接口
//http://localhost:5000/login/serlize
router.post('/serlize',(req, res) => {
    let single = req.body.single
    let hobby =req.body.hobby
    let sex =req.body.sex
    console.log('学校：',single)
    console.log('爱好：',hobby)
    console.log('性别：',sex)
    res.send('表单序列化')

})

module.exports=router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

输出结果：

在这里插入图片描述

三、服务器端响应数据的格式是JSON格式

(1)服务器端如何响应json格式数据

res.send({ //将响应信息封装成json格式
key1：value1,
key2：value2,
…
})

(2)客户端接收时,要指定响应信息的格式.

☀️login.html代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    div{
     width: 500px;
     margin: 100px auto;
 }
style>
<body>
    <div>
        
            <label>
                用户名：<input type="text" id="userName" name="username">
            label>
            <br><br>
            <label>
                密   码：<input type="password" id="userPwd" id="password">
            label>
            <br><br>
                        
           <button type="button" id="btn_reset">重置button>
                 
           <button type="button" id="btn_submit">提交button>
        
        <br><br>
       <span id="msg">span>
    div>
    <script src="../js/jquery-3.4.1.js">script>
    <script>
      $(function(){//jQuery入口函数
            //1、给登录按钮绑定click事件
            $('#btn_submit').click(function(){
                //2、获取用户输入的密码和用户名
                let name=$('#userName').val()
                let pwd = $('#userPwd').val()
                //3.调用ajax函数向服务器发送异步的请求
                $.post('http://localhost:5000/login/post',{userName:name,userPwd:pwd},function(result){
                $('#msg').html(result.msg)//注意，这里得到的是服务器端的msg信息。
                },'json')//客户端接收时,要指定响应信息的格式json.
            })
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

☀️logincheck.js后端代码如下： ：

var express= require('express');
var router =express.Router();

//路由接口
//http://localhost:5000/login/post
router.post('/post',(req, res) => {
    //let uname=req.query.userName
    //let upwd=req.query.userPwd

    let uname=req.body.userName
    let upwd=req.body.userPwd
    if(uname==='abc' && upwd==='123456'){
        // res.send('合法用户，登录成功')
        res.send({
            code:1000,
            msg:'合法用户，登录成功'
        })
    }else{
        // res.send('不合法用户，登录失败')
        res.send({
            code:2000,
            msg:'不合法用户，登录失败'
        })
    }
})

module.exports=router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在软件postman测试结果如下图所示：
在这里插入图片描述 结果展示：输入’abc‘和’123456‘，合法用户

输入’123’和’12’，不合法用户

相关阅读:
前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶（三）
axios——503响应超时重复多次请求——技能提升
 java生成pdf表格并支持下载可选另存为
 Unicorn 嵌入Android系统
 python(47): 多线程多进程应用-批量造数据小结
 程序员如何进化成架构师？
腾讯原来这么容易进去...
在“美国死海”边的科研盛会 ACM CCS‘24 截稿日期逼近行动要快
 elementui组件兼容移动端
 Himall商城-公共方法
原文地址：https://blog.csdn.net/m0_46839072/article/details/126003343

【Ajax异步请求案例&jQuery库对Ajax的封装】

目录

一、Ajax请求：异步的请求.可以进行页面的局部刷新

二、jQuery库对Ajax的封装：

1、底层封装函数：

2、高层封装函数：

（1）发起get请求

（2）发起post请求

3、辅助函数：

三、服务器端响应数据的格式是JSON格式