Ajax的概念及jQuery中的Ajax的3种方法，模仿jQuery封装自己的Ajax函数

一、网页中如何请求数据

我们从浏览器看到的视频、音乐都属于资源；当然数据也是服务器对外提供的一种资源，只要是数据，都要经过请求 — 处理 — 响应的方式进行获取。

网页中请求服务端的数据需要用到XMLHttpRequest对象，简称xhr，是浏览器提供的JS成员
在这里插入图片描述

资源的请求方式

请求方式	说明	举例
get	获取服务器的资源	从腾讯上看综艺
post	向服务器提交资源	登录微信账号

二、Ajax

1、什么是Ajax

概念：Ajax（全称：Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式
注意：Ajax不是一种技术规范，只是多种技术的组合。每种技术都有其独特这处，合并在一起形成了一个功能强大的新技术。

2、Ajax的特点

特点：局部刷新，异步加载
通过与后端服务器进行少量的数据交换，Ajax可以使页面实现异步更新。这也意味着可以在不重新加载整个页面的情况下，对页面某个部分进行局部更新。

3、Ajax工作原理

客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上
在这里插入图片描述

4、同步与异步的区别

同步提交：当用户发送请求时，当前页面不能使用，服务器响应页面到客户端，响应完成之后用户采用使用页面。

异步提交：当用户发送请求时，当前页面可以使用，当异步请求的数据响应给页面，页面把数据显示出来。

三、jQuery中的Ajax

浏览器提供的xhr使用方法比较复杂，jQurey对其进行二次封装，降低使用难度(xhr详解：https://blog.csdn.net/Vest_er/article/details/127397828)
jQuery中发起Ajax请求的方法

1、$.get()函数

向服务器请求数据
语法：

$.get(url, [data], [callback])
1

参数名	参数类型	必选？	说明
url	sting	是	要请求的资源地址
data	object	否	请求资源要携带的参数
callback	function	否	请求成功的回调函数

2、$.post()函数

向服务器提交数据
语法（参数同$.get()函数）

$.post(url, [data], [callback])
1

3、$.ajax()函数

综合，可以请求也可以提交数据

语法

$.ajax({
	tyep:'', // 请求的方式 eg:get或post
	url:'',	// 请求的url地址
	data:{}, // 这次请求要携带的数据
	sunccess:function(res){} // 请求成功之后的回调
})
1
2
3
4
5
6

四、模仿jQuery封装自己的Ajax函数

实现效果

<!-- 导入自定义的ajax函数库 -->
<script src="./MyAjax.js"></script>
<script>
    myAjax({
        methods:'请求类型',
        url:'请求地址',
        data:{请求参数对象},
        success:function(res){ // 成功的回调函数
            console.log(res); //打印数据
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12

1、定义options参数选项

myAjax()函数是我们自己定义的Ajax函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性

属性名	功能
method	请求类型
url	请求的URL地址
data	请求携带的参数
success	请求成功之后的回调函数

2、定义resoveData()函数处理data参数

需要把data参数对象转化成查询字符串的格式，从而提交到服务器，因此需要提前定义resoveData函数

// 处理data参数
// @params{data}需要发送到服务器的参数
// @returns{string} 返回拼接好的查询字符串 name=zs&age=18

function resoveData(data){
    var arr = [];
    for(var k in data){
        arr.push(k + '=' + data[k]);
    };
    return arr.join('&');
}
1
2
3
4
5
6
7
8
9
10
11

3、定义myAjax()函数

在myAjax()函数中，需要创建xhr对象，并监听onreadyStatechange事件

function myAjax(options){
    var xhr = new XMLHttpRequest();

    // 拼接查询字符串
    var qs = resoveData(options.data);

    // 监听请求状态改变的事件
    xhr.onreadystatechange = function (){
        if(xhr.readyState == 4 && xhr.status == 200) {
            // JSON字符串转化为JS对象
            var result = JSON.parse(xhr.responseText);
            options.success(result)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、判断请求类型

toUpperCase()函数：转化为大写

if(options.methods.toUpperCase() === 'GET') { // 发起GET请求
    // 创建请求
    xhr.open(options.methods,options.url + '?' + qs);
    // 发送Ajax请求
    xhr.send();
}else if(options.methods.toUpperCase() === 'POST') {     // 发起POST请求
	// 创建请求
    xhr.open(options.methods,options.url);
    // 设置Content-Type属性（固定写法）
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // 发送Ajax请求
    xhr.send(qs)
}
1
2
3
4
5
6
7
8
9
10
11
12
13

五、使用封装的Ajax函数发送请求

MyAjax.js代码

// 定义resoveData()函数处理data参数
function resoveData(data){
    var arr = [];
    for(var k in data){
        arr.push(k + '=' + data[k]);
    };
    return arr.join('&');
}

// 定义myAjax()函数
function myAjax(options){
    var xhr = new XMLHttpRequest();

    // 拼接查询字符串
    var qs = resoveData(options.data);

    // 判断请求类型
    if(options.methods.toUpperCase() === 'GET') {
        // 发起GET请求
        xhr.open(options.methods,options.url + '?' + qs);
        xhr.send();
    }else if(options.methods.toUpperCase() === 'POST') {
        // 发起POST请求
        xhr.open(options.methods,options.url);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(qs)
    }

    // 监听请求状态改变的事件
    xhr.onreadystatechange = function (){
        if(xhr.readyState == 4 && xhr.status == 200) {
            // JSON字符串转化为JS对象
            var result = JSON.parse(xhr.responseText);
            options.success(result)
        }
    }
}
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

index.js代码

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">
     
     <script src="./MyAjax.js">script>
    <title>Documenttitle>
head>
<body>

    <script>
        // 发起GET请求
        myAjax({
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/getbooks',
            data:{id:1},
            success:function(res){ // 成功的回调函数
                console.log(res); //打印数据
            }
        });

        // 发起POST请求
        myAjax({
            method:'POST',
            url:'http://www.liulongbin.top:3006/api/addbook',
            data:{bookname:"憨瓜与波妞",author:"离奇6厘米",publisher:"郑州图书出版社"},
            success:function(res){ // 成功的回调函数
                console.log(res); //打印数据
            }
        })

    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

运行结果
在这里插入图片描述

相关阅读:
泛型（工作能用到的）
想要精通算法和SQL的成长之路 - 分发糖果
 [题]跳房子 #单调队列优化(伪)
弘辽科技：淘宝客服没办法改价吗？淘宝客服改价步骤是什么？
【Verilog 教程】7.2 Verilog 文件操作
 如何从无法开机的手机中恢复数据？4个解决方案解决了
 钢建筑模板和木建筑模板的优缺点？
单场直播销售额破7亿，11月的抖音带货风向是什么？
postgresql pgsql 连接池 pgBouncer（详细）
npm ERR! code ELIFECYCLE
原文地址：https://blog.csdn.net/Vest_er/article/details/127393463