Ajax与http

最新推荐文章于 2024-02-15 16:12:24 发布

BlackeggXian

最新推荐文章于 2024-02-15 16:12:24 发布

阅读量416

点赞数

文章标签： ajax http 服务器

本文链接：https://blog.csdn.net/BlackeggXian/article/details/121801231

版权

一、Ajax的介绍

1、客户端与服务器

概念

客户端：在因特网中，负责获取和消费资源电脑

服务器：在因特网中，负责存放和对外提供给资源的电脑

客户端与服务器通信的过程

服务器对外提供的资源

数据也是资源

网页中的数据，也是服务器对外提供的一种资源。需要通过：请求、处理、响应的方式进行获取

网页请求数据

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

资源请求的方式

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

get 请求通常用于获取服务端资源（向服务器要资源）
post 请求用于向服务器提交数据（往服务器发送资源) 提交用户信息，注册等

2、URL地址

概念：URL全称叫统一资源定位符，用于表示互联网上每个资源的唯一存放位置，从成功访问到对应的资源

URl的组成部分

URL一般由三步组成

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

3、了解Ajax

Ajax全称 Asynchronous JavaScript And XML（异步JavaScript 和XML）

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

学习Ajax的用途：

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

Ajax的典型应用场景

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

4、jQuery中的ajax

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

jQuery中发起Ajax请求最常用地三个方法如下：

$.get() 获取
$.post() 提交
$.ajax() 既可获取也可提交

$.get()语法

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

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

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

直接提供请求的URL地址和请求成功之后的回调函数

$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){

console.log(res) //这里的res是服务器返回的数据

}）

<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>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
</head>

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

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

使用$.get()函数发起带参数的请求是，示例代码如下

$.get('http://www.liulongbin.top:3006/api/getbooks',{id：1},function(res){

console.log(res) //这里的res是服务器返回的数据

}）

<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>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
</head>

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

$.post()函数的语法

jQuery中$.post(）函数的功能单一，专门用来发起post请求

语法如下：

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

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

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

代码如下：

$.post(

'http://www.liulongbin.top:3006/api/addbook', //请求的地址

{bookname：'水浒传',author:'施耐庵’,publisher:'上海图书出版社'}, //提交的数据

function(res){ //回调函数

console.log(res)

}

}

<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>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
</head>

<body>
    <button id="btn">发起post请求</button>
    <script>
        $(function() {
            $("#btn").on("click", function() {
                $.post(
                    "http://www.liulongbin.top:3006/api/addbook", {
                        bookname: "水浒传",
                        author: "施耐庵",
                        publisher: "天津出版社",
                    },
                    function(res) {
                        console.log(res);
                    }
                );
            });
        });
    </script>
</body>

$.ajax()函数

相比于前面两个函数，ajax()函数比较综合

语法

$.ajax({

type:'', //请求的方式，例如 get和 post

url:'', //请求URL的地址

data：{ }, //这次请求要携带数据

success:function(res){} //请求成功后回调的函数

})

5、接口

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

分析接口的请求过程

通过get方式请求接口的过程
通过post方式请求接口的过程

接口测试工具

下载安装PostMan

使用PostMan测试接口

步骤：

选择请求的方式
填写测试的URL地址
填写请求的参数
点击send按钮发起GET请求
查看服务器响应的结果

使用postman测试post接口

步骤：

选择请求方式
填写请求的URL地址
选择Body面包并勾选数据格式
填写要发送到服务器的数据
点击send按钮发起POST请求
查看服务器响应的结果

接口文档

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

接口文档的组成部分：

接口名称：用来标识各个接口的简单说明，如登录接口、获取图书列表接口等
接口URL：接口的调用地址
调用方式：接口的调用方式，如GET或POST
参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否筛选、参数说明这四项内容。
响应格式：接口的返回值的详细描述，一搬包含数据名称、数据类型、说明等
返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。

图书列表的案例

案例中用到的库和插件

css库 bootstrap.css

javaScript库 jquery.js

vs code插件 Booststrap 3 Snippets

BlackeggXian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax与http

一、Ajax的介绍1、客户端与服务器概念客户端：在因特网中，负责获取和消费资源电脑服务器：在因特网中，负责存放和对外提供给资源的电脑客户端与服务器通信的过程服务器对外提供的资源数据也是资源网页中的数据，也是服务器对外提供的一种资源。需要通过：请求、处理、响应的方式进行获取网页请求数据网页中请求数据：如果要在服务器上请求资源，则需要XMLHttpReqest对象 XMLHttpReqest（简称xhr）是浏览器提供的js成员，通过它，可以请求服务器上的数据资源
复制链接

扫一扫