Ajax之基础知识

目录

一、什么是Ajax?

二、Ajax请求的使用

1.Ajax请求使用步骤

2.如何发送Ajax请求

1.(现在没落了)通过jQUery方式

2.(现在重点用这个)axios发送Ajax请求

3.详解发送了get请求后客户端做了哪些事

三、编码解码方法

---

一、什么是Ajax?

核心:就是从服务器端进行数据交互的一种技术
通俗:通过Ajax从服务器获取数据

为什么要从服务器获取数据?
在实际开发中需要动态的从服务器获取数据。

客户端和服务器：

什么是客户端?
概念:手机电脑都属于客户端范畴
前端的客户端特指浏览器
什么是服务器?
概念:能够提供的一台机器
本质:电脑
服务器能提供哪些服务?
外卖平台-点餐
电子商务-电商服务

URL地址：

a)URL地址组成:
1)协议类型:https或者http  
    计算机之间进行沟通的一种约定
2)主机名:blog.csdn.net()域名
    唯一的
3)端口号:  :8083 在主机名后边的一个4位数字,一般隐藏不会显示
    范围0-65535之间
    作用:接入不同的功能,一个端口可能代表了用户要看到的页面,另一个端口可能显示的的就是管理页面
4)资源路径

二、Ajax请求的使用

Ajax请求:就是客户端向服务器发送请求的一种方式
url地址背后---就是Ajax请求

什么情况下需要用到Ajax请求?
凡是需要服务端给客户端返回数据---就需要用到Ajax请求

1.Ajax请求使用步骤

post请求、get请求、delete请求、put请求、petch请求

a）post请求：

侧重点,将客户端收集的数据发送给服务器(在服务器中增加一条数据)
当用户注册信息的时候,用户登陆的时候

b）get请求：

侧重点,发送请求的目的是为了从服务器获取数据

c）delete请求

侧重点,发送delete请求是为了删除服务器中的某条数据

e）put请求

侧重点,发送put请求是为了更新服务器上的数据,全部更新
::姓名:张三,年龄:18,性别:女
用put请求将会姓名,年龄,性别全改,用patch可以只改姓名

f）patch请求

侧重点,发送patch请求是为了更新服务器上的数据

2.如何发送Ajax请求

1.(现在没落了)通过jQUery方式
2.(现在重点用这个)axios发送Ajax请求

注意：这两种方式都是对原生JS发送Ajax的封装

1.(现在没落了)通过jQUery方式

代码演示通过jQuery发送Ajax请求(固定写法)
    引入jQuey文件
    调用jQuery提供的Ajax请求方法

<script src="../jquery-3.6.0/jquery-3.6.0.js"></script>
<script>
    $.ajax({
        //设置url地址
        url:'要请求的url地址',
        // 设置请求的方式
        type: 'get', //type:'请求方式',
        //设置请求发送后服务端返回的结果
        success: function(res) {
            //res参数就是服务器端返回的数据,可以对他进行任意操作
            console.log(res);
        }
    })
</script>

2.(现在重点用这个)axios发送Ajax请求

axios的官网:http://www.axios-js.com/zh-cn/docs/ 
概念:基于服务端(node)或者客户端浏览器发送Ajax请求
作用:基于promise对象,Vue,React
步骤:
引入axios库(本质上就是js文件)
网络引入:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
本地引入:下载到本地

<script src="../lib/axios.min.js"></script>
<script>
    axios({
        //设置请求地址
        url:'要请求的url地址',
        //设置请求方式
        method: 'get',
        //响应结果,写在最后.then
    }).then(function(res) {
        //服务端返回的数据
        console.log(res)
    })

3.详解发送了get请求后客户端做了哪些事

1.服务器返回的数据都在response中
2.axios会将返回的数据二次包装,有以下几个包装
3.Headers(请求头部)
    request URL:请求路径
    Request Method:请求方式
    Status:请求状态,成功没

三、编码解码方法

url地址中不允许出现汉字,空格,特殊符号,浏览器会自动转化为编码
服务器会对汉字等编码进行解码
编码解码方法:
编码:encodeURI('要被编码的内容')
解码:decodeURI('要被解码的内容')

<script>
         let str='西游记';
         console.log(encodeURI(str))
         console.log(decodeURI('%E8%A5%BF%E6%B8%B8%E8%AE%B0'))

        //  后端程序员会对信息加密
        // 1.现在用MD5加密处理
        // 2.最开始通过编码解码处理
</script>