Json字符串、cookie、Js_Ajax

最新推荐文章于 2023-03-20 20:33:46 发布

anyw_

最新推荐文章于 2023-03-20 20:33:46 发布

阅读量146

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44862403/article/details/107417355

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Json字符串、cookie、Js_Ajax

json字符串

PHP

json_encode() 将其他数值,转化为json字符串

json_decode() 将json字符串,还原为其他数值

$arr = [
    'name'=>'张三',
    'age'=>180,
    'sex'=>'男',
];

// 输出数组的形式
print_r($arr);

// 转化为json串
$json = json_encode($arr);

echo $json , '<br>';

// 还原为对应的数据
// 数组还原为对象了,是PHP的执行机制
$jsonArr = json_decode($json);

print_r($jsonArr);

JavaScript

// JavaScript中的json操作
const obj = {
    name:'张三',
    age:18,
    sex:'男',
};

// 转化为json串
let str = JSON.stringify(obj);

// 将json串,还原为数据
// 还原的是PHP中的json串
const phpJson = JSON.parse('<?php echo $json;?>');

Cookie

什么是 cookie

cookie 是浏览器的一个功能，是前端浏览器的一种存储机制，本质上是在浏览器内,建立一个文档文件,来存储浏览器执行页面时,产生的一些数据，这些数据是各个浏览器都要使用的公共数据,会存储在cookie，cookie本质上,一个是建立在浏览器文件夹中,存储页面公共数据的文件

什么是cookie的时效

cookie是浏览器存储数据的一种机制

cookie存储的数据,不会一直存储在浏览器的文件中

存储在文件中的数据,容易被攻击造成数据泄露

为了确保数据的安全性,cookie存储的数据,是有时效性的

也就是有存储时间,如果到达存储时间,浏览器会自动删除cookie中存储的数据

cookie的时效性,可以设定,设定的是一个时间节点

超过这个时间节点,浏览器会自动删除cookie数据

如果没有设定时效,默认是会话时间

所谓的会话时间,是浏览器打开执行前端程序的时间,也就是页面关闭,cookie就会被删除

设定cookie

前端,后端程序,都可以设定cookie

注意:设定的cookie只在当前目录文件和子级目录文件中创建

JavaScript,PHP,java,python所有的语言都可以设定操作cookie

JavaScript中设定cookie

设定和读取cookie都是 document.cookie

变量 = document.cookie 是获取cookie数据

document.cookie = 内容是设定cookie数据

设定cookie函数

function mySetCookie(key,value,time){
    // JavaScript中,时间单位默认是毫秒
    // 获取当前时间对象
    const nowTime = new Date();
    // 当前时间的时间戳和服务器时间,有8个小时的时差 -8小时的毫秒数
    // 设定cookie时效时间 + 时间的毫秒数
    let t = nowTime.getTime() - (8*60*60*1000) + time*1000;
    // 将新的时间戳,设定给 时间对象
    nowTime.setTime(t);
    // 通过三元运算符,给 expires 赋值 如果没有时间参数,赋值空字符串,有时间参数,赋值时间对象
    document.cookie = `${key}=${value};expires=${time === undefined ? '' : nowTime }`;
}

获取cookie

获取cookie函数

// 1
function myGetCookie(cookieStr){
    const obj = {};
    const arr1 = cookieStr.split('; ');
    arr1.forEach((item)=>{
        const newArr = item.split('=');
        obj[newArr[0]] = newArr[1];
    })
    return obj;
}

// 2
/*
    key:要查询的cookie的键

*/
function getCookie(key){
    //先获取到所有的cookie
    var str = document.cookie;//类似:a=1; b=2; c=3
    //以"; "为分隔符分割成数组
    var arr = str.split('; ');//["a=1","b=2,"c=3"]
    //遍历arr,看遍历到的那一个的key是否和传入的key一致
    for(var i=0;i<arr.length;i++){
        var eachArr = arr[i].split('=');//arr[0] = "a=1";分割以后eachArr = ['a',1];
        if(eachArr[0]==key){
            //如果相同,那么对应的值就是我们要的
            return eachArr[1];//return不能退出循环,return是退出函数,并带回返回值
        }
    }
}

JS_Ajax

常见传参方式

get

存储显示在浏览器地址栏中

存储内容的大小,收到浏览器限制

不同浏览器get存储数据大小,不同

会被浏览器缓存,不安全

一般用于向服务器搜索数据 百度搜索等

post

存储显示在请求体中

存储内容的大小,理论上没有限制的

但是会受限于服务器设定的上传内容大小

不会被浏览器缓存

比get方式安全一些

一般用于向服务器发送写入数据,或者是敏感数据注册登录

优点

1,不用页面跳转,就可以完成数据交互

2,可以减轻服务器压力

常见的响应状态码 100 - 599

1开头: 链接还在继续,还没有断开连接

2开头: 请求成功

3开头: 重定向请求

4开头: 客户端错误

5开头: 服务器错误

js中ajax基本步步骤过程

1,创建一个ajax对象

const xhr = new XMLHttpRequest();

2,配置定义请求信息内容

get方式可以在请求地址之后,拼接参数

xhr.open( '请求方式' , '请求地址?键名=数值&键名=数值...' );

post方式

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 中

}

ajax的最基本封装

get

// 将 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

// 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);
    }
}

jsonp

function jsonpOption({url,success}){
    var callbackName = "cyr"+Math.random().toString().slice(2)+"_"+new Date().getTime();
    window[callbackName] = function(data){
        success(data);
        document.body.removeChild(script);
    }           
    var script = document.createElement('script');
    if(url.indexOf('?')>-1){
        script.src = url+"&callback="+callbackName;
    }else{
        script.src = url+"?callback="+callbackName;
    }            
    document.body.appendChild(script);            

}

调用get方式的封装函数

<h1>通过调用封装的get,ajax请求函数,完成请求内容</h1>
账号 : <input type="text"><br>
密码 : <input type="password"><br>
<button>请求</button>

<script src="./utils.js"></script>
<script>
    // 获取button标签
    const oBtn = document.querySelector('button');

    oBtn.addEventListener('click' , ()=>{
        // 1,获取数据
        let regname = document.querySelectorAll('input')[0].value;
        let regpwd = document.querySelectorAll('input')[1].value;

        // 调用函数
        getAjaxSend(`./ajax6.php?regname=${regname}&regpwd=${regpwd}` , fun1);

        function fun1(str){
            // 把请求结果,也就是响应体,解析之后输出
            console.log( JSON.parse(str) );
        }

    })
</script>

调用post方式的封装函数

<h1>通过调用封装的post,ajax请求函数,完成请求内容</h1>
账号 : <input type="text"><br>
密码 : <input type="password"><br>
<button>请求</button>

<script src="./utils.js"></script>
<script>
    // 获取button标签
    const oBtn = document.querySelector('button');

    oBtn.addEventListener('click' , ()=>{
        // 1,获取数据
        let regname = document.querySelectorAll('input')[0].value;
        let regpwd = document.querySelectorAll('input')[1].value;

        // 调用函数

        // 可以没有参数,后代PHP程序,也就是接收不到参数
        // postAjaxSend('./ajax7.php' , fun1);

        postAjaxSend('./ajax7.php' , fun1 , `name=${regname}&pwd=${regpwd}`);

        function fun1(str){
            // 把请求结果,也就是响应体,解析之后输出
            console.log( JSON.parse(str) );
        }

    })
</script>

ajax的兼容处理

标准浏览器

const xhr = new XMLHttpRequest();

低版本IE浏览器

const xhr = new ActiveXObject('Microsoft.XMLHTTP');

// 兼容语法
if(XMLHttpRequest){
    const xhr = new XMLHttpRequest();
}else{
    const xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

接收响应体时,也要做兼容处理

// 标准方法  当请求结束时,触发程序
xhr.onload = function(){
    // 判断请求是否成功   
    if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){}
}
// 兼容低版本IE语法   当ajax请求状态码发生改变时,触发程序
// 状态码 从 0 - 1 - 2 - 3 - 4 每次状态码改变,都会触发程序
xhr.onreadystatechange = function(){
    // 当状态码为4时,请求状态为2开头的3位数值时
    // 有正确的响应体内容
    if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
        // 执行程序
    }
}

Ajax的状态码

ajax执行的状态码 xhr.readyState

即时请求失败,也会走完所有的执行步骤

0 : 表示创建了ajax对象

1 : 表示设定了ajax对象的open()方法

2 : 表示浏览器接收到响应体,但是存储在响应报文中,无法使用

3 : 表示浏览器正在从响应报文中分离响应体

4 : 表示浏览器分离响应体成功,可以正常使用响应体

ajax请求的响应状态码 xhr.status

以 2 开头 200-299 表示请求成功

response中会有正确的响应体

400-499 500-599 表示请求错误

response中会有报错信息

同源策略

同源策略,只限制 ajax请求,不限制超链接和form表单等跳转

1,为什么有同源策略

为了防止数据的盗用和黑客的攻击

浏览器默认只允许,同源的文件,访问数据,外部文件,不允许访问数据

只能浏览页面,不能访问数据,获取响应体

2,cookie的同源策略

创建的cookie只能是同一个文件夹中的文件或者子级文件

共同使用这个设定的cookie

父级文件夹中的文件,不会共享这个cookie

实际项目中的cookie一般设定在顶级文件夹 / 根目录中

3,ajax的同源的同源策略

相对路径:

只要可以通过相对路径访问的程序,一定有一个相同的文件夹,只要也在相同的盘符下

浏览器允许ajax访问获取响应体

绝对路径: url地址

要求请求协议路径地址端口号都必须相同

才会认为是同源文件,才可以正常访问并且获取响应体

跨域访问的方式有3种

jsonp

cors

服务器代理

proxy代理方法

在phpStudy中找到nginx-conf配置文件，在 server{} 的 {}中设定代理配置

location = /dt {proxy_pass https://www.duitang.com/napi/index/hot/;}

anyw_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Json字符串、cookie、Js_Ajax

Json字符串、cookie、Js_Ajaxjson字符串PHPjson_encode() 将其他数值,转化为json字符串json_decode() 将json字符串,还原为其他数值$arr = [ 'name'=>'张三', 'age'=>180, 'sex'=>'男',];// 输出数组的形式print_r($arr);// 转化为json串$json = json_encode($arr);echo $json ,
复制链接

扫一扫

专栏目录