Ajax——1

最新推荐文章于 2022-10-08 15:05:00 发布

Feliks.

最新推荐文章于 2022-10-08 15:05:00 发布

阅读量1.3k

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_47770336/article/details/124004010

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

客户端与服务器

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

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

URL地址

URL (全称是UniformResourceLocator)中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

常见的URL举例：

http://www.baodu.com

URL地址组成部分

三部分：

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fFyNN953-1649263714143)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220406153850827.png)]

分析网页的打开过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rISSSiZw-1649263714145)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220406154115684.png)]

基于浏览器的开发者工具分析通信过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zzZRDaFM-1649263714147)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220406154422269.png)]

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

网页中常见资源

文字
image图片
Audio音频
Video视频
……

数据也是资源

网页中的数据，也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等。

数据是网页的灵魂

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

骨架、颜值、行为皆为数据服务数据，在网页中无处不在

网页中如何请求数据

数据，也是服务器对外提供的一种资源。只要是资源，必然要通过请求–处理一响应的方式进行获取。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h3j1Q5Lv-1649263714148)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220406154940011.png)]

如果要在网页中请求服务器上的数据资源，则需要用到XMLHttpRequest对象。

XMLHttpRequest(简称xhr）是浏览器提供的js 成员，通过它，可以请求服务器上的数据资源。

最简单的用法 var xhrObj = new XMLHttpRequest()

资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为get和 post请求.

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

例如:根据URL地址，从服务器获取HTML文件、css文件、js文件、图片文件、数据资源等
post 请求通常用于向服务器提交数据（往服务器发送资源)

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

了解Ajax

Ajax的全称是Asynchronous Javascript And XML(异步JavaScript和XML)。

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

为什么学Ajax?

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yPhdR1QZ-1649263714149)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220406155544861.png)]

Ajax的典型应用场景

用户名检测：注册用户时。通过ajax的形式。动态检测用户名是否被占用
搜索提示:当输入搜索关键字时，通过ajax的形式，动态加载搜索提示列表
数据分页显示:当点击页码值的时候，通过 ajax的形式，根据页码值动态刷新表格的数据
数据的增删改查:数据的添加、删除、修改、查询操作，都需要通过ajax的形式，来实现数据的交互

jQuery中的Ajax

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

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

$.get()
$.post()
$.ajax()

$.get()语法

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

语法：

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

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

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sLOp4jWS-1649263714150)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220406211029788.png)]

浏览器XHR查看Ajax请求

    <script src="../js/jquery-3.1.1.min.js"></script>
</head>

<body>
    <button id="doGet">点击发起不带参数的get请求</button>

    <script>
        $(function() {
            $('#doGet').on('click', function() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
                    console.log(res);
                })
            })
        })
    </script>

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

$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
    console.log(res)//res:服务器返回的数据
})

    <script src="../js/jquery-3.1.1.min.js"></script>
</head>

<body>
    <button id="btn">发起带参数的get请求</button>
    <script>
        $(function() {
            $('#btn').on('click', function() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', {id: 1}, function(res) {
                    console.log(res);
                })
            })
        })
    </script>

$.post函数语法

jQuery中 $. p o s t) 函数的功能单一，专门用来发起 p o s t 请求，从而向服务器提交数据。$ .post()函数的语法如下:

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

参数含义

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

    <button id="btn">发起POST请求</button>
    <script>
        $(function() {
            $('#btn').on('click', function() {
                $.post('http://www.liulongbin.top:3006/api/addbook', {
                    bookname: 'jscript',
                    author: 'yueying',
                    publisher: 'beijing'
                }, function(red) {
                    console.log(res);
                })
            })
        })
    </script>

$.ajax()函数语法

相比于 $. g e t) 和$ .post()函数，jQuery 中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。

语法：

$.ajax({
    type:'',//请求的方式
    url:'',//请求的URL地址
    data:{},//请求携带的数据
    success:function(res){}//请求成功回调函数
})

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

    <button id="btn">点击通过$.ajax发起get请求</button>
    <script>
        $(function() {
            $('#btn').on('click', function() {
                $.ajax({
                    type: 'GET', //请求的方式
                    url: 'http://www.liulongbin.top:3006/api/getbooks', //请求的URL地址
                    data: {
                        id: 1
                    }, //请求携带的数据
                    success: function(res) {
                            console.log(res);
                        } //请求成功回调函数
                })
            })
        })
    </script>

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

$.ajax({
    type:'post',//请求的方式
    url:'http://www.liulongbin.top:3006/api/addbook',//请求的URL地址
    data:{
        bookname:'',
        author:'',
        publisher:''
    },//请求携带的数据
    success:function(res){}//请求成功回调函数
})

    <button id="btn">点击通过$.ajax发起Post请求</button>
    <script>
        $(function() {
            $('#btn').on('click', function() {
                $.ajax({
                    type: 'post', //请求的方式
                    url: 'http://www.liulongbin.top:3006/api/addbook', //请求的URL地址
                    data: {
                        bookname: 'jscript',
                        author: 'feliks',
                        publisher: 'shanghai'
                    }, //请求携带的数据
                    success: function(res) {
                            console.log(res);
                        } //请求成功回调函数
                })
            })
        })
    </script>

接口

概念：

使用Ajax请求数据时，被请求的URL地址，就叫做数据接口（简称接口)。同时，每个接口必须有请求方式。

例如：

http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)
http://www.liulongbin.top:3006/api/addbook 添加图书的接口(POST请求)

接口的请求过程

通过GET方式请求接口的过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8PpDR5zD-1649263714151)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220407002457034.png)]

通过POST方式请求接口的过程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7VxgT7uq-1649263714152)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220407002552244.png)]

接口测试工具

PostMan
ApiPost

接口文档

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

接口文档的组成部分

接口名称
接口URL
调用方式
参数格式
响应格式
返回实例（可选）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jNfOPtH4-1649263714153)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220407004534544.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BZU5ZGlW-1649263714153)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220407004542635.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-inAGu1pX-1649263714154)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220407004549302.png)]