报文\json字符串\ cookie\ajax请求

最新推荐文章于 2024-04-26 19:58:57 发布

珎珎啊

最新推荐文章于 2024-04-26 19:58:57 发布

阅读量156

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_43363773/article/details/105717559

版权

前端专栏收录该内容

113 篇文章 1 订阅

订阅专栏

1.

请求报文和响应报文

建立连接: 在发送真正的请求之前
3次握手:
目的是确认服务器和客户端,接收,发送消息都正常
3次握手,确认无误之后,才会正式发送消息
断开连接:
4次挥手 :
目的是确认服务器和客户端暂时都不再发送消息了
但是客户端随时会再次发送消息
服务器随时准备接收消息
请求报文
请求行请求头请求空行请求体
响应报文
响应行响应头响应体
常见传参方式
get
存储显示在浏览器地址栏中
存储内容的大小,收到浏览器限制
不同浏览器get存储数据大小,不同
会被浏览器缓存
不安全
一般用于向服务器搜索数据百度搜索等
post
存储显示在请求体中
存储内容的大小,理论上没有限制的
但是会受限于服务器设定的上传内容大小
不会被浏览器缓存
比get方式安全一些
一般用于向服务器发送写入数据,或者是敏感数据注册登录
常见的响应状态码 100 - 599
1开头: 链接还在继续,还没有断开连接
2开头: 请求成功
3开头: 重定向请求
4开头: 客户端错误
5开头: 服务器错误

json字符串

是所有计算机语言通用的数据格式
便于各种计算机语言之间传递数据
PHP
json_encode() 将其他数据转化为json串
json_decode() 将json串还原为其他数据
JavaScript
JSON.stringify() 将其他数据转化为json串
JSON.parse() 将json串还原为其他数据

cookie

概念: 本质上就是一个建立在浏览器文件夹中的文件
用于存储浏览器公共数据信息
属性: cookie 都是以键值对的形式建立存在的
键名 : cookie的键名
数据 : cookie的数据
时效 : cookie存在的时间
默认是会话时效,一旦浏览器关闭,就会被删除
设定时效,超过设定的时效,浏览器会删除cookie
设定时效,以服务器时间为准,世界标准时
中国时区 - 8小时 = 世界标准时
设定cookie
PHP :
设定
setcookie()方法
参数1:键名
参数2:数据
参数3:时效 time() + 设定的时效单位:秒
time()是PHP获取当前时间戳的方法
获取
通过预定义变量 $_COOKIE 来存储所有的cookie值
$_COOKIE 是以数组的形式来存储,可以通过 $_COOKIE[索引键名]来获取具体的数据
JavaScript中没有定义好的方法,我们只能自己定义
设定:
定义一个函数
参数1:键名
参数2:数值
参数3:时效
程序:
1,获取当前时间,创建时间对象
2,获取当前时间对象的时间戳
3,当前时间戳 - 8小时时差的毫秒 + 时效的毫秒
4,将计算后的时间戳,设定为当前时间对象的新的时间戳
5,判断是否有时效参数
如果有,赋值时间对象
如果没有,赋值空字符串
6,设定cookie
document.cookie = ‘键名=数值;expires=时间对象或者空字符串’;

特别注意: cookie必须是键值对的形式
cookie的设定,必须是字符串形式
expires只接受时间对象或者空字符串
如果直接写数值,会是会话时效

获取cookie
通过document.cookie只能获取到cookie字符串
所有的cookie的数据的设定,实际上都是字符串类型
必须将 cookie字符串转化为对应的对象

定义一个函数
参数:cookie字符串

程序:
1, 根据 ;空格将cookie字符串,转化为数组
数组中的数据是 cookie 的键值对也就是 name=张三
2, 建立一个对象
3, 循环遍历数组
将数组的数据,根据 =等号转化为数组
数组的索引0是 cookie的键名
数组的索引1是 cookie的数据

将键名和数据,设定为对象的键名和数据存储

4, 循环结束,返回对象

2.ajax请求

超链接跳转传参和form表单跳转传参
都必须要跳转页面,而且是去后端程序页面
不利于前端开发
之后,我们使用ajax来发送请求数据等,与后端程序进行数据交互
ajax发送请求,完成数据交互,优点
不用跳转页面,在当前页,就可以显示数据交互的结果
所有的页面渲染操作,生成页面操作,都是在前端完成,减轻服务器的操作压力
不用跳转,减轻服务器压力
什么是ajax
a : async 异步
j : JavaScript
a : and
x : XML

一个异步的 JavaScript 和 XML 的数据交互

ajax技术最初只能和 XML格式的内容进行交互
现在发展到可以和任意的后端程序内容进行交互

现在是前后端数据交互的主要手段

基本步步骤过程
1,创建一个ajax对象
const xhr = new XMLHttpRequest();
2,配置定义请求信息内容
xhr.open( ‘请求方式’ , ‘请求地址?键名=数值&键名=数值…’ );
get方式可以在请求地址之后,拼接参数

        3,发送ajax请求
            xhr.send();

        4,接收相应内容
            xhr.onload = function(){}

3.ajax请求总结

ajax请求总结1
ajax请求的本质
通过JavaScript方式,与后端程序以及数据库,进行交互
之前的方式是 form表单或者超链接都属于 HTML方式

ajax请求的基本过程原理
通过 ajax请求是JavaScript定义好的程序
向后端发送请求以及数据
后端程序跟发送的请求以及数据,对数据库进行操作,并且获取操作结果
ajax请求,通过响应体,获取后端操作结果
优点:

不用跳转页面,也可以在局部进行发送请求,获取响应结果
页面渲染,可以通过前端操作完成,减轻后端程序压力

程序执行步骤

创建ajax实例化对象
const xhr = new XMLHttpRequest();
设定ajax对象,请求信息
请求的方式
请求的对象地址
如果是get方式,可以在请求地址之后拼接参数
xhr.open(‘get’ , ‘url地址?键名=数值&键名=数值…’);
xhr.open(‘post’ , ‘url地址’);
如果是post方式,必须要设定请求头,确保可以正确传参
get方式不要设定
语法形式是固定格式的内容
xhr.setRequestHeader(‘content-type’ , ‘application/x-www-form-urlencoded’);
发送请求
如果是get方式,是直接发送请求
xhr.send()
如果是post方式,需要在send()中定义参数
xhr.send(‘键名=数值&键名=数值…’)
接收响应体
xhr.onload = function(){
请求结束后要执行的内容
请求结果,也就是响应体
存储在 xhr.response 中
}

4.ajax封装

ajax的最基本封装

    // 将 get请求方式 和 post请求方式 封装为两个函数
    function getAjaxSend(url , cb){
        // 1,创建ajax实例化对象
        const xhr = new XMLHttpRequest();

        // 2,设定ajax请求信息
        // 不需要定义请求的参数,直接拼接在url之后就可以了
        xhr.open('get' , url);

        // 3,发送请求
        xhr.send();

        // 4,接收相应
        xhr.onload = function(){
            // 调用参数函数,执行内容是响应体
            cb(xhr.response);
        }
    }

    // post请求方式
    // 要比get方式,多设定一个请求头
    // 还要多设定一个请求参数的数据
    function postAjaxSend(url , cb , dataStr){
        // 1,创建ajax实例化对象
        const xhr = new XMLHttpRequest();

        // 2,设定ajax请求信息
        xhr.open('post' , url);

        // post方式,必须要设定请求头
        xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');

        // 3,发送请求
        xhr.send(dataStr);

        // 4,接收相应
        xhr.onload = function(){
            // 调用参数函数,执行内容是响应体
            cb(xhr.response);
        }
    } 
</script>