04--JS04--进阶

news/2024/11/16 19:30:25/文章来源:https://www.cnblogs.com/Edmondhui/p/18201032

JavaScript04:拓展进阶

一. jsonp

为了解决浏览器跨域问题,jQuery提供了jsonp请求

在网页端如果见到了服务器返回的数据是:

​ xxxxxxxxxxdjsfkldasjfkldasjklfjadsklfjasdlkj( { json数据 } )

​ 在Preview里面可以像看到json一样去调试

这就是jsonp,依然是Ajax

jsonp的逻辑是

在发送请求的时候,带上一个callback字符串(就是json数据外面包裹的字符串),该字符串自动发送给服务器

服务器返回数据的时候,会带上该callback字符串,在抓包中看到的就是这样的效果:

在Python中,还原一下该效果

首先, 在flask中,必须接收到前端返回的callback,然后在返回数据的时候,需要用前端返回的callback字符串,将数据包裹

@app.route("/process_jsonp", methods=["GET"])
def process_jsonp():# 获取回调字符串cb = request.args.get("cb")print(cb)data = {"name": "alex","age": 18}import json# 用回调字符串将真实要返回的数据包裹起来# 如果不包裹起來。前端ajax中的success将无法获取到数据return cb + "("+json.dumps(data)+")"

前端在发送ajax的时候. 需要指定 dataType为jsonp,以及自由配置回调函数的参数名

$(function(){$.ajax({url: "/process_jsonp",method:"get",// 典型:京东dataType: "jsonp", // 它的执行逻辑是 请求服务上的一个js,然后会自动执行该js,将js函数内的东西,丢给successjsonp:"cb",        // 传递给服务器的时候. 自动带上cb=xxxxxx  服务器端接收cb即可success: function(data){ // 此时data可以直接收取到数据console.log(data);}});
});

抓包效果:

服务器处理cb时的效果:

抓包中. 看到的服务器返回的数据

success中接收到的数据效果

  • 以后见到这种网站,如何处理?

首先,固定好callback的值。如上述案例. 我们就可以直接给出一个固定的cb值. 如果原网站就是固定的值. 此步骤可以忽略

http://127.0.0.1:5000/process_jsonp?cb=haha&_=1654767783595

然后,得到返回值后,用正则或者字符串操作,即可处理

import json
s = 'haha({"name": "alex", "age": 18})'   # 得到这样一个字符串. 处理成json很容易的
s = s.strip("haha(").strip(")")
print(s)dic = json.loads(s)
print(dic)
# 现在请思考. 为什么要让你把callback的值固定?

二. axios

由于jquery有严重的地狱回调逻辑,再加上jquery的性能逐年跟不上市场节奏,很多前端工程师采用axios来发送ajax

相比jQuery,axios更加灵活,且容易使用

更加美丽的是:axios是用promise做的,所以更加贴合大前端的项目需求

<script src="/static/axios.min.js"></script>
<script>window.onload = function(){axios.post("/movies", {"page": 10086}).then(function(resp){console.log(resp.data);})}
</script>// axios 默认发送json
axios.post("/movies", {"page": 10086})  // url, json数据.then(function(resp){              // 回调函数,处理返回的数据console.log(resp.data);})

axios为了更加适应大前端,它默认发送和接收的数据就是json

所以在浏览器抓包时:

直接就是request payload,这对于前端工程师而言,爽爆了。

三. axios拦截器

在前端,能看到有些网站会对每次请求都添加加密信息,或者每次返回数据的时候,都有解密逻辑

那此时,思考:不可能每次请求都要程序员,去手动写加密逻辑. 例如:

window.onload = function(){// 一堆加密数据axios.post("/movies", 加密数据的json数据).then(function(resp){明文 = 解密(resp.data);console.log(明文);})// 加密数据axios.post("/movies", {"page": 10086}).then(function(resp){明文 = 解密(resp.data);console.log(明文);})
}

这样很麻烦,axios想到过类似的问题,它提供了拦截器,一次性处理好这种问题

axios.interceptors.request.use(function(config){  // 拦截所有请求console.log("我是拦截器. 我可以对数据进行加密");console.log(config)return config;
}, function(error){return Promise.reject(error);
});axios.interceptors.response.use(function(response){  // 拦截所有响应console.log("我是响应回来之后拦截器. 我可以对数据进行解密")return response.data;  
}, function(error){return Promise.reject(error);
});

这样. 对于业务层的代码而言就简单很多了

window.onload = function(){// 加密的逻辑拦截器帮我完成了axios.post("/movies", {"page": 10086}).then(function(data){// 解密的逻辑拦截器帮我完成了console.log(data);})// 加密的逻辑拦截器帮我完成了axios.post("/movies", {"page": 10086}).then(function(data){// 解密的逻辑拦截器帮我完成了console.log(data);})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/709016.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET 中 Channel 类简单使用

Channel 是干什么的 The System.Threading.Channels namespace provides a set of synchronization data structures for passing data between producers and consumers asynchronously. The library targets .NET Standard and works on all .NET implementations. Channels …

第五周-云计算运维作业

1. 总结openssh服务安全加固和总结openssh免密认证原理,及免认证实现过程。 1.仅使用SSHv2 协议 2.关闭或者延迟压缩 Compression no 3.限制身份验证最大尝试次数 MaxAuthTries 3 4.禁用root账户登录 PermitRootLogin no 5.显示最后一次登录的日期和时间 PrintLastLog yes #用…

深入掌握service

深入掌握Service Service是Kubernetes实现微服务架构的核心概念,通过创建Service,可以为一组具有相同功能的容器应用提供一个统一的入口地址,并且将请求负载分发到后端的各个容器应用上。 Service定义 Service用于为一组提供服务的Pod抽象一个稳定的网络访问地址,是Kuberne…

uniapp-webview获取h5页面加载错误信息及自定义错误页面(捕获uniapp中webview加载error)

问题描述uniapp中需要加载H5页面,使用了webview,但是在某些情况下,页面加载出现错误,但是官方文档里给出的捕获错误信息的回调函数,只适用部分平台,某些平台无法获取@error异常信息,这种情况如何处理呢? 解决uniapp web-view组件的@load @error事件无效,事件不触发的问…

物联网在智慧园区的八大应用

物联网在智慧园区领域有许多应用。以下是一些常见的应用场景: 智能安防系统: 通过物联网技术,可以实现智能监控、入侵检测、视频监控、智能门禁等安防功能,提高园区的安全性和管理效率。 能源管理: 物联网可以用于实时监测和控制园区内的能源消耗,包括电力、水、气等,通…

tensorflow与python版本对应关系

下完之后才发现tensorflow1.12.0需要3.6的版本……

听说你是高手?说说你的 JVM调优方法论 吧?(美团面试,问的贼细)

文章很长,且持续更新,建议收藏起来,慢慢读!疯狂创客圈总目录 博客园版 为您奉上珍贵的学习资源 : 免费赠送 :《尼恩Java面试宝典》 持续更新+ 史上最全 + 面试必备 2000页+ 面试必备 + 大厂必备 +涨薪必备 免费赠送 :《尼恩技术圣经+高并发系列PDF》 ,帮你 实现技术自由,…

一个页面从输入URL到加载显示完成,这个过程发生了什么?

目录一、解析URL1、流程2、URL格式:3、示例二、浏览器封装HTTP请求报文1、流程2、HTTP请求报文例子3、封装三、DNS解析1、缓存判断1.1、浏览器缓存1.2、操作系统缓存1.3、路由器缓存2、递归查询至ISP DNS服务器3、迭代查询过程4、保存结果至各级缓存四、建立TCP连接(三次握手…

vscode 无法调试 golang testify suite 中的单个 test 的解决办法

目录问题描述网上的讨论最终的解决办法 问题描述 对于如下这样简单的测试文件: package main// Basic imports import ("testing""github.com/stretchr/testify/assert""github.com/stretchr/testify/suite" )var assertObj *assert.Assertions/…

【Linux】Deepin安装Anaconda后手动配置环境变量

配置环境变量 如果安装完毕后,重新打开终端,输入conda表示没找到这个命令 说明没有配置环境变量 那么我们首先第一件事,就是找到我们的conda安装到哪里了例如我的是安装到主目录的(默认在这的,安装的时候我没有修改安装路径) 然后进入这个文件夹,进入bin,在bin下运行终端…

Redis 缓存常见问题处理

缓存穿透 缓存穿透是指客户端的请求数据在缓存和数据库中都不存在,这样缓存永远不会生效,这些请求都会到达数据库,从而导致数据库负载过高。 常见解决方案有两种:缓存空对象:实现简单、方便维护,是解决缓存穿透的首选方法,但会造成额外内存消耗,或短期的数据不一致 布隆…