Ajax

VIP文章暴风背后藏未来

已于 2022-03-21 10:18:08 修改

阅读量672

点赞数 1

文章标签： ajax 服务器前端

于 2022-03-05 15:02:22 首次发布

本文链接：https://blog.csdn.net/qq_50954803/article/details/123168959

版权

Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。

一、客服端和服务端

1、概念介绍

客户端：客户使用的一种设备(手机、电脑，打印机...)；

服务端(服务器)：提供服务的机器，可以是普通的电脑或是专业的服务器；

2、客服端和服务端的通信过程

分为请求 - 响应两个步骤

请求(Request)：客户端通过网络去找服务器要资源的过程；

相应(Response)：服务器把资源通过网络发送给客户端的过程；

3、浏览器使用

如果get请求有查询参数时，Headers后面会有Payload，里面保存着查询参数信息

4、URL地址

协议类型：规定了计算机之间进行数据交互的规则。https协议比http协议更安全；
域名(主机名)：每个网站的域名都是唯一的；
端口号：用来确定具体要访问服务器上的哪个数据资源。https或http协议下的默认端口是80；
文件路径：要请求的资源；

url的编码和解码

url编码：浏览器地址中不允许出现中文、空格等特殊符号。如果地址栏中出现了汉字或特殊符号，那么浏览器的内置功能会对汉字进行编码；

url解码：对url编码进行解码；

1. 对中文进行编码
    encodeURI('汉字')
2. url解码
    decodeURI(编码结果)
    如，decodeURI('%E6%B1%89%E5%AD%97')

二、请求

1、请求的方法

请求方式	描述
get	从服务器获取数据，获取数据的时候也可向服务端发送数据(查询参数data)
post	向服务器新增数据
delete	删除服务器上的数据
patch	更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）
put	更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）

get请求和post请求的区别：

get请求：

get请求是获取服务端的数据，但获取数据的时候也可以向服务端发送数据；
get请求如果要向服务器发送数据，则需要查询参数（jQuery的查询参数用data；axios的查询参数用params）；
查询参数最后通过拼接到url地址后面发送给服务器（拼接格式：×××.com？属性=值&属性=值）；
get请求的安全性略差；

post请求：

post请求是向服务端发送数据；
post请求如果要向服务器发送数据，则需要查询参数（jQuery和axios的查询参数都用data）；
post请求体数据不会拼接到url地址后面，而是放到了独立的“请求体”中；
请求体数据可在浏览器的 payload选项卡中看到；
post请求比get请求的安全性更高；

2、实现Ajax请求的2种方法

2-1、axios

axios是第三方的js文件（下载引入即可）

文档：axios中文文档|axios中文网 | axios

（1）通过axios实现get请求

axios({
    1. 设置请求方法
    method: 'get',

    2. 请求的url地址
    url: '请求的服务器地址',

    3. 查询参数，筛选
    params: {
        参数名: 参数值
        参数名: 参数值
    }
}).then(function (res) { console.log(res); })   4. 服务端响应(返回)结果

（2）通过axios实现post请求

axios({
    1. 设置请求方法
    method: 'post',

    2. 请求的url地址
    url: '请求的服务器地址',

    3. 请求体：向服务器传送数据
    data: {
        参数名: 参数值
        参数名: 参数值
    }
}).then(function (res) { console.log(res); })   4. 服务端响应(返回)结果

2-2、jQuery

jQuery是第三方的js文件（下载引入即可）

（1）通过jQuery实现get请求

（1-1）语法

$.ajax({
    1. 设置请求方式
        type: '请求方式',
        type: 'get',

    2. 请求的服务器url地址
        url: 'url地址',
        url: 'http://www.liulongbin.top:3006/api/get',
        url: 'http://www.liulongbin.top:3006/api/getbooks',

    3. 服务端响应(返回)结果 
        success: function (形参) { js功能代码 },
        success: function (res) { console.log(res); },

    4. 设置查询参数
        data: {
            参数名: 参数值    注意：参数名要看数据库，参数名相同后面的会覆盖前面的
            bookname:'西游记',
            bookname:'红楼梦',
            author: '曹雪芹'   // 选出bookname为'红楼梦',并且author为'曹雪芹'的书
         } 
})

注意：$.ajax({ 对象 })  里面是对象，要用冒号和逗号

查询参数(查询符合特指条件的数据)：

查询参数不是必须要写的；
jQuery中查询参数是通过 data对象设置的；
只有get请求中才叫查询参数；
在get请求中，通过查询参数向服务端发送数据,返回符合特指条件的数据；

（1-2）将数据渲染到页面

        let ul = document.querySelector('ul')

        $.ajax({
            type: 'get',    // 设置请求方式
            url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的url地址

            // 服务端响应结果 
            success: function (res) {
                // 在页面中渲染出数据
                let { data } = res    // 解构赋值
                data.forEach(item => {
                    console.log(item)
                    let li = document.createElement('li')
                    li.innerHTML = `名字：${item.bookname} 作者：${item.author} 出版社：${item.publisher}`
                    ul.appendChild(li)
                });
            },

             // 设置查询参数
             data: {
                 bookname: '西游记',
                 bookname: '红楼梦',
                 author: '曹雪芹'   // 选出bookname为'红楼梦',并且author为'曹雪芹'的书
             }
        })

（2）通过jQuery实现post请求

$.ajax({
    1. 设置请求方式
    type: 'post',

    2. 请求的服务器url地址
    url: 'http://www.liulongbin.top:3006/api/addbook',

    3. 服务端响应(返回)结果
    success: function (res) {
        console.log(res)
    },
            
    4. 请求体：向服务器传送数据
    data:{
        属性名：属性值,
        bookname: 'TNT', 
    }
})