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

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请求,通过响应体,获取后端操作结果
优点:

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

程序执行步骤

1. 创建ajax实例化对象
   const xhr = new XMLHttpRequest();
2. 设定ajax对象,请求信息
   请求的方式
   请求的对象地址
   如果是get方式,可以在请求地址之后拼接参数
   xhr.open(‘get’ , ‘url地址?键名=数值&键名=数值…’);
   xhr.open(‘post’ , ‘url地址’);
3. 如果是post方式,必须要设定请求头,确保可以正确传参
   get方式不要设定
   语法形式是固定格式的内容
   xhr.setRequestHeader(‘content-type’ , ‘application/x-www-form-urlencoded’);
4. 发送请求
   如果是get方式,是直接发送请求
   xhr.send()
   如果是post方式,需要在send()中定义参数
   xhr.send(‘键名=数值&键名=数值…’)
5. 接收响应体
   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>