Ajax编程

回顾

什么是网络?

用网线/无线信号 - 链接在一起的各种电脑形成网络
什么是资源?

数据, 字符串, 文件, 视频, 音频等等, 存储在电脑上的。
服务器和客户端

客户端负责浏览和使用各种资源的设备(个人电脑/个人手机等等)

服务器负责提供各种数据资源
URL

客户端想要去请求资源, 需要知道资源在哪里. 所以URL是一串地址, 标记资源在哪里. (叫统一资源定位符)
IP

URL中开头部分, 用于标识网络中哪台计算机的地址
域名

ip是一串以.分割的4段数字, 很难记住, 所以我们有了域名(一串.分割的英文字符)
DNS服务

负责记录域名和IP的对应关系, 用于把域名翻译成IP地址的功能, 负责在网络里寻找目标电脑的IP
请求响应过程

客户端 -> 请求 -> 服务器

客户端 <- 响应 <- 服务器
请求的分类
- 非Ajax - 比如打开一个网页, 网页直接把数据全都加载回来
- Ajax请求 - 是一种异步请求资源的方式(不用刷新整个网页, 就可以给网页某一块从后端请求数据)
Ajax请求方式

在JS代码中, 编写一段代码就可以在html网页中嵌入一个请求的方式, 返回的数据到JS代码的地方
必备能力

学会从Network里分析网络请求(跟css / console打印一样)
请求方式
- GET - 是请求数据 - 负责从后台GET拿数据
- POST - 用于发送数据 - 把前端的数据发送给后台
使用Ajax

$.ajax({

type: “”, // 请求方式 - 默认不写是GET(大小写都可以)

url: “”, // 请求的后端地址

data: {}, // 里面可以向后台传递数据

success: function(res){} // 固定是一个函数题(用于接受后台返回的结果

})
后端接口

就是使用的URL: 只不过这个url返回的不是网页, 而是一串字符串数据
接口调试工具
- 不用写$.ajax 就可以测试下后台的URL是否可用
- 可使用postman / REST Client插件来测试URL是否可用

4. 原生JS代码 - Ajax使用

之前用的是JQ封装的Ajax功能, 这节课我们来看看内部实现的原理

4.0 JS - Ajax编写

// 1. 实例化ajax对象
var ajaxObj = new XMLHttpRequest(); 

// 2. 注册 onreadystatechange 事件
/*
          下面事件的触发时机, ajax对象的readyState状态改变时触发
          0 - ajax对象被创建 
          1 - open一定被调用
          2 - send一定被调用
          3 - 正在接收服务器数据
          4 - 服务器数据接收完毕
          当0变到1, 触发一次onreadystatechange事件, 当1到2, 当2到3, 当3到4都会触发onreadystatechange事件执行
        */
// ajax(XMLHttpRequest) 让浏览器发起一次 -> http网络请求
ajaxObj.onreadystatechange = function () {
    
    
    // 4(数据接收完毕)(JS代码层面), status代表http网络请求成功(200)
    if (ajaxObj.readyState === 4 && ajaxObj.status === 200) {
    
    
        // responseText 取出请求回来的字符串数据
        var res = JSON.parse(ajaxObj.responseText);
        console.log(res);
    }
}

// 3. 调用open方法，设置请求方式及请求的url地址
ajaxObj.open('GET', 'URL');

// 4. 最后，调用send方法，发送这次ajax请求
ajaxObj.send();

readyState属性和onreadystatechange事件

Ajax从创建xhr对象开始，一直到完全接收服务器返回的结果为止；我们可以把整个请求响应过程划分为几个阶段。

请求阶段 - 异步等待阶段 - 响应阶段

Ajax对象 - 执行send()方法 - 就进入请求发送阶段
浏览器开启线程去指定的URL请求数据, 后台收到请求, 执行后台代码, 然后返回数据
Ajax对象 - 事件监听收到返回的数据出发事件和回调函数执行

4.1 JS - Ajax - GET请求

参数和前面的接口地址之间，使用 ? 隔开
如果有多个参数，参数之间使用 & 隔开
多个参数之间，没有顺序要求

在url后面拼接的请求参数，就是 “xxx=sss&yyy=mmm&zzz=bbb” 这种格式的字符串，叫做查询字符串

// 1. id为3的书籍信息
// 1.1 创建Ajax对象 - 绑定状态改变事件(准备接受返回的数据)
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
    
    
    if (ajax.readyState === 4 && ajax.status === 200) {
    
    
        var res = JSON.parse(ajax.responseText);
        console.log(res);
    }
}

// 1.2 设置请求方式, 请求的url以及参数
ajax.open('GET', 'URL?id=3');
// 1.3 发送请求
ajax.send();


// 2. id为1且bookname是西游记
// 2.1 再创建一个Ajax对象
var ajaxObj = new XMLHttpRequest();
// 2.2 绑定事件
ajaxObj.onreadystatechange = function () {
    
    
    if (ajaxObj.readyState === 4 && ajaxObj.status === 200) {
    
    
        var res = JSON.parse(ajaxObj.responseText);
        console.log(res);
    }
}
// 2.3 设置请求方式 - 请求url - 参数拼接
ajaxObj.open('GET', 'URL?bookname=西游记&id=1');
// 2.4 发送请求
ajaxObj.send();

在这里插入图片描述

4.2 url编码

// 编码: 计算机保存/传输一切都是以0和1位基本的, 给我们展示的时候, 就得转换编程成另一种形式
// url编码: 把url地址中的非英文字符转成另外一种编码形式, 确保后台准确解析我通过url的参数

// 方法1: 快速编码和解码
console.log(encodeURI('西游记&')); // %E8%A5%BF%E6%B8%B8%E8%AE%B0&
console.log(decodeURI('%E8%A5%BF%E6%B8%B8%E8%AE%B0&'));// 西游记& 

// 方法2: 范围更广的 编码 和 解码
console.log(encodeURIComponent('西游记&')); // %E8%A5%BF%E6%B8%B8%E8%AE%B0%26
console.log(decodeURIComponent('%E8%A5%BF%E6%B8%B8%E8%AE%B0%26')); // 西游记&

// 方法2, 可以编码的字符比较多
// 可以对 ;/?:@&=+$,# 进行编码
// 两个函数都不会对  - _ . ! ~ * ' ( ) 进行编码

4.3 url编码使用场景

// 使用场景:
// 问题:
// 我们都知道url传递的格式是key=value&key=value
// 但是当我的值里也出来了&, 就破坏了解析字符串的规则, 后台解析失败

// 1.1 创建 Ajax对象
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
    
    
    if (ajax.readyState === 4 && ajax.status === 200) {
    
    
        var res = JSON.parse(ajax.responseText);
        console.log(res);
    }
}

// 1.2 设置请求方式, 请求的url以及参数
ajax.open('GET', 'URL?a=6&10');
// 1.3 发送请求
ajax.send();

// 解决: 进行url编码
var str = encodeURIComponent("6&10");
console.log(str);
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function () {
    
    
    if (ajax.readyState === 4 && ajax.status === 200) {
    
    
        var res = JSON.parse(ajax.responseText);
        console.log(res);
    }
}

// 1.2 设置请求方式, 请求的url以及参数
ajax.open('GET', `URL?a=${
      
      str}`);
// 1.3 发送请求
ajax.send();

4.4 JS - Ajax - POST请求

和GET请求的两个区别

请求参数位置不一样
需要多加一个请求头

document.getElementById("createBtn").onclick = function () {
    
    
    // 1.1 创建Ajax对象 - 监测事件
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function () {
    
    
        if (this.readyState === 4 && this.status === 200) {
    
    
            var res = JSON.parse(this.responseText);
            console.log(res);
        }
    }
    // 1.2 设置请求方式 - 请求的url
    ajax.open('POST', 'URL');


    // // 必须在open和send之间加一个请求头，这个请求头写法固定。记不住可以复制
    // 1.3 设置请求头 - 告诉后端, 我给你发送的内容类型
    // 意思是以xxx=yyy&zzz=ttt的格式传递参数给后台, 后台从Content-type发现值是下面这个就按照对应的规则来解析这个字符串, 提取参数名和值了
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // 1.4 发送请求并且携带参数, 格式固定
    // POST方式提交的数据，仍然是查询字符串格式，只不过位置改变了
    ajax.send('bookname=红与黑&author=司汤达&publisher=法国出版社&appkey=b7fc2560-5632-4da5-b625-58cff58c6b31');
}

4.5 练习

练习1: 编写原生Ajax代码 - 请查询公共数据(无需带appkey参数), 中id为2的数据信息 (这是要哪数据吧? 用那种请求方式呢?)
        let ajaxObj = new XMLHttpRequest();
        ajaxObj.onreadystatechange = function(){
    
    
            if (ajaxObj.readyState == 4) {
    
    
                if (ajaxObj.status == 200) {
    
    
                    console.log(ajaxObj.responseText);
                }
            }
        }
        // 总结: 多个参数要在?后面 以参数名=值&参数名=值
        ajaxObj.open("GET", "URL?id=2");
        ajaxObj.send();
练习2: 编写原生Ajax代码 - 请向自己的表中(带appkey和自己的值), 向后台随便增加一条书籍信息, 然后调用查询自己书籍信息的接口, 查看是否添加成功 - (这是要发送数据吧? 应该用什么请求方式呢?)
        // 1. 实例化ajax对象
        let ajaxObj = new XMLHttpRequest();
        // 2. 绑定事件
        ajaxObj.onreadystatechange = function(){
    
    
            // 5. 接受返回的结果
            if (ajaxObj.readyState == 4) {
    
    
                if (ajaxObj.status == 200) {
    
    
                    console.log(ajaxObj.responseText);
                }
            }
        }
        // 3. 设置参数
        ajaxObj.open("POST", "URL");

        // (新) - 设置内容的类型
        ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        // 4. 发送请求
        // (新)-post的参数要写在send()里面
        ajaxObj.send("bookname=我是vscode插件的书籍&author=vscode&publisher=121&appkey=b7fc2560-5632-4da5-b625-58cff58c6b31");

整体

无论是GET还是POST方式，请求参数如有特殊字符, 最好进行urll编码
服务器返回的一般都是JSON格式的字符串，需要自己调用 JSON.parse 转换格式
GET还是POST用哪种, 其实和后台规定的对应上即可
参数名一定也要和后台规定的对应上即可

5. 自己封装Ajax

来模拟下JQ的ajax的函数内代码的执行过程

		// function $(){};
        // $.ajax = function(){};
        // $.ajax();
        // 封装函数的过程步骤:
        // 1. 定义函数壳子(名字)
        // 2. 调用函数, 传入一套例子(目标)
        // 3. 编写(粘贴+修改)函数里的代码
        //   想好哪些变量以后会变 (这次传a, 下次传b, 那么这个变量就必须在形参上)

        function myAjax(obj) {
    
    
            // 解构赋值提取外面参数的值
            let {
    
     type, url, data, success } = obj;
            // 原生Ajax
            let ajaxObj = new XMLHttpRequest();
            ajaxObj.onreadystatechange = function () {
    
    
                if (ajaxObj.readyState == 4) {
    
    
                    if (ajaxObj.status == 200) {
    
    
                        success(JSON.parse(ajaxObj.responseText)); // 回调外面传入的success对应的函数执行, 把值传出去
                    }
                }
            }
            ajaxObj.open(type, url);
            ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // 把对象转成字符串
            // 不能用JSON.stringify, 因为字符串的格式不对, 我们要的是key=value&key=value的字符串
            var arr = [];  // 因为对象里有多对key=value, 所以我想要把对象没对key-value转成字符串, 多对都转在一个数据结构里(采用数组来装载)
            for (var key in data) {
    
    
                arr.push(`${
      
      key}=${
      
      data[key]}`);
            }
            var argStr = arr.join("&"); // join就是用()里的符号, 把数组里的每个值链接起来形成一个大字符串返回
            ajaxObj.send(argStr);
        }
        myAjax({
    
    
            type: "POST",
            url: "http://123.57.109.30:3006/api/addbook",
            data: {
    
    
                bookname: "我是vscode插件的书籍",
                author: "vscode",
                publisher: "哈哈",
                appkey: "b7fc2560-5632-4da5-b625-58cff58c6b31"
            },
            success: function (res) {
    
    
                console.log(res);
            }
        })"
            },
            success: function (res) {
    
    
                console.log(res);
            }
        })

5.0 自己实现$.ajax() 方法

回忆下$.ajax里传入的配置对象, 有哪些key属性和功能

get方式: 传参和不传参
post方式: 传参

封装思路

获取对象的属性（可选）
基本的Ajax代码（基本的步骤写出来）
判断GET和POST请求，分别写 open 和 send方法
处理请求参数，把对象形式的参数处理成查询字符串格式
当ajax请求成功之后，调用success函数，把服务器返回的结果传入
细节处理（默认GET方式、不区分大小写等等…）

使用自己封装的Ajax方法

function $() {
    
     };
$.ajax = function (obj) {
    
    
    // 1. 默认值确保
    obj.type = obj.type || "GET"; // 防止外面没传type值, 给予默认值"GET"
    obj.type = obj.type.toUpperCase(); // 防止外面传的小写, 导致下面比较不相等
    // 模拟JQ的ajax实现过程 - 内部使用的就是原生JS的XMLHTTPRequest

    // 2. 新建Ajax对象 - 绑定事件
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function () {
    
    
        if (this.readyState === 4 && this.status === 200) {
    
    
            obj.success(JSON.parse(this.responseText)) // 请求成功回调外面success函数执行, 把值传出去
        }
    }
    // 3. 把data对象里的参数转换成这个格式 key=value&key=value
    var arr = [];
    for (var prop in obj.data) {
    
    
        arr.push(`${
      
      prop}=${
      
      obj.data[prop]}`);
    }
    var argStr = arr.join("&"); // 拼接字符串参数

    // 4. 判断是不是GET方式, 并且是否有参数, 都符合在拼接url后面?传参
    if (obj.type == "GET") {
    
    
        obj.url += "?" + argStr; // 注意这里必须是+=哦
    }
    // 5. 设置Ajax请求方式和url
    ajax.open(obj.type, obj.url);

    // 6. 判断是POST, 得设置请求头内容类型
    obj.type.toUpperCase() == "POST" && ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 判断type是POST方式, 则必须执行设置请求头的内容类型

    // 7. 发起Ajax请求
    ajax.send(obj.type == "POST" ? argStr : '');
}

// 点击查询
document.getElementById("btn").onclick = function () {
    
    
    $.ajax({
    
    
        url: 'http://123.57.109.30:3006/api/getbooks',
        data: {
    
    
            appkey: "b7fc2560-5632-4da5-b625-58cff58c6b31"
        },
        success: function (res) {
    
    
            console.log(res);
        }
    })
}

// 点击新增
document.getElementById("createBtn").onclick = function(){
    
    
    $.ajax({
    
    
        type: "post",
        url: 'http://123.57.109.30:3006/api/addbook',
        data: {
    
    
            bookname: "红黑树",
            author: "算法杨",
            publisher: "数学出版社",
            appkey: "b7fc2560-5632-4da5-b625-58cff58c6b31"
        },
        success: function (res) {
    
    
            console.log(res);
        }
    })
}

6. 表单的提交

以前没有Ajax的时候, 都是用表单向后台提交数据

6.0 表单的同步提交（了解）

点击<input type="submit"> 类型的按钮或者在form标签里的button，让表单自行提交到 action 指定的url位置。这就是表单的同步提交。

同步提交的缺点：

页面会跳转，用户体验差
表单提交之后，表单中填写的数据，可能就丢失了，得重新填写

from标签的action、method、enctype、target只有在表单同步提交的时候才有用

action 是 form标签提交到哪里
method 是 form标签提交数据的方式 (GET默认 / POST / …)
enctype 是 form标签提交的标签夹着的那些表单值的类型 (默认是application/x-www-form-urlencoded)
target 是 form标签提交是在当前网页 / 新开一个标签页

使用一下form标签的提交方式

表单提交GET方式 - 带参数
表单提交POST方式 - 带参数
表单提交POST方式 - 参数+文件

<!-- 表单提交GET方式 - 带参数 -->
<!-- name就是后台规定的参数名, 值就是用户填写的value属性值 -->
<h2>表单提交 - get方式</h2>
<form action="URL" target="_blank">
    <input type="text" name="appkey" placeholder="用户appkey">
    <input type="submit" value="点击获取书籍信息"> 
</form>

<!-- 表单提交POST方式 - 带参数 -->
<h2>表单提交 - post方式(字符串内容)</h2>
<form action="URL" method="POST" target="_blank">
    <input type="text" name="bookname" placeholder="书名">
    <input type="text" name="author" placeholder="作者">
    <input type="text" name="publisher" placeholder="出版社">
    <input type="text" name="appkey" placeholder="用户appkey">
    <input type="submit" value="新增一本书"> 
</form>

<!-- 表单提交POST方式 - 参数+文件 -->
<!-- 如果有文件, 就得是enctype="multipart/form-data", 上传字节流(文件格式特殊) -->
<h2>表单提交 - post方式(带文件)</h2>
<form action="URL" method="POST" enctype="multipart/form-data" target="_blank">
    <span>选择要上传的文件</span>
    <input type="file" name="img">
    <input type="text" name="username" placeholder="用户名">
    <input type="submit" value="传文件和参数到后台"> 
</form>

6.1 Ajax异步提交表单（重点）- 带文件

异步提交

使用JS的手段，实现表单数据的提交。

使用方法

监听表单的提交事件
阻止表单提交的默认行为
收集表单各项的值
- 可以一项一项的收集
- 也可以使用 serializeArray 或 serialize 来收集
ajax提交数据到接口，从而完成数据的提交

jQuery中提供的serializeArray和serialize方法

这两个方法是由jQuery封装的
使用要求，表单各项必须有name属性；这两个方法是根据表单各项的name属性获取值的
配合ajax使用要求：表单各项的name属性值 === 接口要求的参数
这两个方法，不能收集文件域中选择的文件。也就是不能实现文件上传
这两个方法，能够收集到隐藏域的值
如果一个输入框的 disabled，禁用状态；不能通过这两个方法收集到值。

// 不用form默认提交, 换成Ajax提交
// (1): form标签 - submit提交事件
// (2): 按钮(button/input) - click点击事件(触发的提交行为) - 阻止点击的默认行为(就会阻止提交行为)
// 1. GET传参 - 表单
$("#formOne input[type=submit]").on("click", function (ev) {
    
    
    ev.preventDefault();
    $.ajax({
    
    
        type: "GET",
        url: "URL",
        data: {
    
    
            appkey: $("#appk").val()
        },
        success(res) {
    
    
            console.log(res);
        }
    })
})

// 2. POST传参 - 表单 - 不带文件
$("#formTwo input[type=submit]").on("click", function (ev) {
    
    
    ev.preventDefault();
    var s = $("#formTwo").serializeArray(); // 数组里套对象格式
    var s2 = $("#formTwo").serialize(); // 这个是字符串key=value&key=value格式
    $.ajax({
    
    
        type: "POST",
        url: "URL",
        data: s2,
        success(res) {
    
    
            console.log(res);
        }
    })
})

// 3. POST传参 - 表单 - 带文件
$("#formThree input[type=submit]").on("click", function (ev) {
    
    
    ev.preventDefault();
    var files = $('#theFile')[0].files; // 获取到文件类型对象
    if (files.length <= 0) {
    
     // 判断文件是否存在
        return alert('请选择文件后再上传！')
    }

    var fd = new FormData() // 表单数据 - 如果有文件必须用这个数据格式来传递数据
    fd.append('avatar123', files[0]);
    fd.append("username", $("#uname").val());

    $.ajax({
    
    
        method: 'POST',
        url: 'URL',
        data: fd,
        // 上传文件不需要吧data转换为字符串
        // 不要转成字符串key=value&key=value&key=value格式
        processData: false,
        // 防止JQ对内容类型操作, 直接二进制流方式上传(保证是multipart/form-data)
        contentType: false,
        success: function (res) {
    
    
            console.log(res)
        }
    })
})


// 总结:
// JQ提供方法 $("form标签").serialize() 收集标签里每个name属性的值和value的值然后返回一个字符串

7. 案例 - 评论

7.0 - 案例 - 评论 - 初始化列表

// 1.0 声明变量 - 定义获取当前页面评论数据 的方法
var nowPage = 1; // 当前要第几页数据
var allPage; // 一共几页
// 1.1 获取铺设评论列表区
function getCommentList() {
    
    
    // 1.2 调用接口 - 传递相应参数给后台 - 获取数据
    $.ajax({
    
    
        method: 'GET',
        url: `URL?page=${
      
      nowPage}&appkey=b7fc2560-5632-4da5-b625-58cff58c6b31`,
        success: function (res) {
    
    
            // 1.3 判断不是200证明报错 - 提示消息
            if (res.status !== 200) return alert(res.msg)
            // 1.4 保存当前一共有多少页
            allPage = res.allPage;

            // 1.5 先清空当前列表页面 - 重新铺设
            $('#cmt-list').empty();
            // 1.6 遍历铺设这次获取回来的数据
            $(res.data).each(function (i, item) {
    
    
                $('#cmt-list').append($(`<li class="list-group-item">
<span class="badge del" style="cursor:pointer" theid=${
      
      item.id}>删除</span> 
<span class="badge" style="background-color: #F0AD4E;">评论时间：${
      
      item.time}</span>
<span class="badge" style="background-color: #5BC0DE;">评论人：${
      
      item.username}</span>
${
      
      item.content}</li>`));
            })

            // 1.7 设置页码
            $("#pageShow").html(nowPage);
        }
    })
}

// 1.8 获取此页的数据
getCommentList();

// 1.9 绑定上一个按钮/下一个按钮点击事件
$("#last").on("click", function () {
    
    
    if (nowPage > 1) nowPage--;
    getCommentList()
})
$("#next").on("click", function () {
    
    
    if (nowPage < allPage) nowPage++;
    getCommentList()
})

7.1 - 案例 - 评论 - 新增评论

// 2.0 点击发布事件
$(function () {
    
    
    $('#formAddCmt').submit(function (e) {
    
    
        e.preventDefault()
        // 2.1 获取表单上的内容形成key=value&key=value字符串
        var data = $(this).serialize()
        // 2.2 拼接我的授权码
        data += "&appkey=b7fc2560-5632-4da5-b625-58cff58c6b31";
        // 2.3 post发送数据给后台
        $.post('URL', data, function (res) {
    
    
            if (res.status !== 201) {
    
    
                return alert('发表评论失败！' + res.msg);
            }
            // 2.4 发送成功后, 重新获取数据铺设页面
            nowPage = 1;
            getCommentList();
            // 2.5 复位表单输入框
            $('#formAddCmt')[0].reset()
        })
    })
})

7.2 - 案例 - 评论 - 删除评论

// 3.0 事件委托 - 给所有删除绑定绑定点击事件
$("#cmt-list").on("click", ".del", function () {
    
    
    // 3.1 去上面给删除标签绑定数据对应id, 点击获取评论对应唯一性的id
    var theId = $(this).attr("theid");
    // 3.2 调用删除接口 - 让后台删除这个数据
    $.ajax({
    
    
        method: 'GET',
        url: `URL?id=${
      
      theId}&appkey=b7fc2560-5632-4da5-b625-58cff58c6b31`,
        success: function (res) {
    
    
            // 3.3 如果不是200状态码, 代表删除失败给个提示, 阻止代码继续往下走
            if (res.status !== 200) return alert(res.msg);
            // 3.4 如果上面if进不去就走这里, 保存当前最大页码(因为当前页没数据了得自动回上一页)
            allPage = res.allPage;
            if (nowPage > allPage) nowPage = allPage;
            // 3.5 设置页码 - 重新获取数据 - 铺设当前页面
            getCommentList();
        }
    })
})

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！

前端与移动开发----Ajax编程----原生JS代码Ajax使用，自己封装Ajax，表单的提交