04--JS04--进阶：jsonp、promise、axios、xml.open

JavaScript04：拓展进阶

一. jsonp

# 0 前提：浏览器同源策略  限制跨域
浏览器的同源策略，浏览器的基本安全策略 

不允许去不同的url地址获取数据，即域名、端口、协议必须相同
# 请求访问实质是可以的，只是返回的数据被浏览器拦截，不接受而已



# 1 访问服务器的目的
1.加载图片
2.加载css样式
3.加载JavaScript代码
# 上述三种情况，浏览器是不做跨域限制的， cdn加速就基于这个做出来的

4.获取数据  # 会被限制跨域



# 2 jsonp原理
为了解决浏览器跨域问题，jQuery提供了jsonp请求

核心是利用浏览器不限制，加载JS代码的特性
把正常的Ajax请求，伪装成一个JS代码的加载
针对jsonp请求，服务器返回的就不是普通的json数据了
而是返回JS代码(代码是函数调用的形式)，浏览器一加载该JS代码，就把数据提取出来了



# 3 jsonp格式
在网页端，如果见到了服务器返回的数据是: 
   xxxxxxxxxxdjsfkldasjfkldasjklfjadsklfjasdlkj( {json数据} )

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

   # 这就是jsonp，依然是Ajax请求
   这个数据就是JS代码，就是函数调用的形式，xxxx函数(参数)



# 4 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函数内的东西，丢给success
        
        jsonp:"cb",        // 指定jsonp callback字符串的名称  传递给服务器的时候，会自动带上cb=xxxxxx  服务器端接收cb即可
                           // 不指定，jQuery默认为 callback=xxxx
        
        success: function(data){ // 此时data可以直接收取到数据
            console.log(data);
        }
    });
});

抓包效果:

服务器处理cb时的效果:

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

success中接收到的数据效果

1.1 处理jsonp

eg： 京东的jsonp

import requests
import json
import re

url = 'https://api.m.jd.com/?h5st=20240521145348311%3Bgm9g9m9y6it5nzg3%3Bb5216%3Btk03w335519b218nHkBCWI02NV1W7LRF3FKRLRD7I8llRhH0fYX97Es3kVJm7iFF8SchDM4eHDab70LjdQ7iIV-8xve8%3Bb528c020f7beadb0937be1457efeea1d6ca8baab5af9263f7f805b025b158af9%3B4.7%3B1716274428311%3BTKmWvNErj_dMOwloFYUUjixDWFuqOmgTfhGHNCl77jXL02dvyK8yjaB77FndZMga3_zGxNW5ToZwemW3lVmophGTixlY5Q3iJ6IEEe43b-8n6qHK-TLZuCbxiwcSFYOeBpH43Gvw7iMa9vhWEVsSYRnpUdmY1YiqD4WR4TSiXGwyHRDEjCCv6YcetHKuamAN-tMvAwScsP4kKNXMwDjK33y2IGgbgsAfa2fV3NG9kLVKbTrkcgaaP5sOLg17qAArrj5Gt46lZt-I04Cz-3MzWk2-CdGmYOeJ1j5Ok_tadIckFg4CY53VYs6qiz_Kv1PhWs5RggE7nDk8PeheJO0dl8zjLad9Prk3hGJ0DQIeqffFGvzEemLTD52YgeDqWQHLXbk3&appid=www-jd-com&body=%7B%22page%22%3A6%2C%22pagesize%22%3A25%2C%22area%22%3A%2222_1930_0_0%22%2C%22source%22%3A%22pc-home%22%7D&clientVersion=1.0.0&client=pc&functionId=pc_home_feed&t=1716274428308&uuid=76161171.170589621565883669607.1705896215.1715672930.1716274404.6&loginType=3&x-api-eid-token=jdd03GGYIH52VQ7AW4SEK6MWU3Y3PWQOO2IPLENOKBZ4FRP7MFRKLBPKKQCN5LBJI2K53VJJPL2376GQNLKBGVPNRRMWN4MAAAAMPOYJVHWIAAAAADBB4UH4EVCAYVIX&callback=jsonpMore2Goods&_=1716274428312'


headers = {
   "User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
    "Referer":"https://www.jd.com/"
}

response = requests.get(url, headers=headers)
# 得到这样一个类似的字符串: 'haha({"name": "alex", "age": 18})'，处理成json很容易的




### 方式一：正则匹配
jsonp_re = re.compile('\((?P<data>.*)\)', re.S)
data = jsonp_re.search(response.text).group('data')


### 方式二：根据url参数callback=jsonpMore2Goods，直接看得到callback字符串的值，直接进行替换处理
data = response.text.replace("jsonpMore2Goods", "", 1).strip("()")


### 方式三：字符串截取
data = response.text.strip("jsonpMore2Goods(").strip(")")


### 方式四：甚至可以直接将 url参数callback，赋值为空，直接得到data
data = response.text.strip("()")  # 有些需要去掉括号，有些不用


data = json.loads(data)
print(data)

二. ES6中的promise

https://blog.csdn.net/qq_53669554/article/details/131598219

具体执行过程和推理过程. 请看视频. 这里很饶腾.

### 死亡回调：
本次请求，必须建立在上一次请求成功的基础之上

前端有很多请求，会一层层套娃进去，eg: 验证 验证码 --> 登录 --> 数据
    
    
### 1 ES6的promise 
是为了解决这些死亡回调的，Promise对象 表示异步操作，最终的完成(或失败)以及其结果值

一个Promise是一个代理，它代表一个在创建promise时，不一定已知的 值
它允许你将处理程序，与 异步操作的最终成功值 或 失败原因 关联起来
使得异步方法可以像同步方法一样返回值
通过 Promise 的then方法，串联的处理程序将被调用


设计一个函数，专门为了发送请求的，保证请求有结果   # promise v.保证、承诺
把原本 一层一层的嵌套 调用，变成了链式的调用


### 2 promise的状态  3个状态

pending    : 等待状态  
    调用promise时，一开始就呈现出等待状态，遇到resolve或者reject之前，都处于这个状态，且可以改变
    但如果确定了状态(fulfilled/reject)，则结果将永远不变，不能再次修改

fulfilled  : 成功状态
    在执行了resolve后，promise则会从pedding变成fulfilled 
    后续会进入.then 的回调函数中，在回调函数的第一个参数函数中可以获取到值

rejected  : 失败状态
    在执行了reject后 或 异步操作依次时，promise状态会变成rejected
    rejected函数传递的参数，可以在.then的第二个参数函数中获取得到，或者是在.catch获取到
    但如果是程序上的错误，得通过.catch函数去拿到失败消息，在.then中是获取不了的



### 3 promise的主要方法
# 1 promise的then方法
then方法是异步执行的，是等promise中的异步操作执行完成 再执行的 

# 1.1 then方法的参数
该回调函数有两个参数(函数)
一个是用于处理Promise 解决时(resolve) 的回调函数
一个是用于处理Promise 拒绝时(rejected)的回调函数  // 可选

# 1.2 then方法的返回值
无返回时 或者 return的是个普通数据，默认 返回的值是一个promise对象

要进行下一次的嵌套请求，也可以返回新的promise对象
就可以直接.then，在链式第一个promise对象后面


# 2 promise的catch方法
用于注册在Promise对象拒绝时(rejected)的回调函数，同时也可以用来捕获代码异常或者出错

.then中产生reject的状态或者异常能在.catch 或者下一个.then中捕获  需要分场合使用：一般异常用.catch，拒绝状态用.then

一般最好用.catch 在最后去捕获异常，能捕获到上面最先报错的信息


# eg:
var p = new Promise((resolve, reject) => {
  // resolve("拒绝");
  console.log("----打印：");   
  throw new Error("抛出错误"); // 若前面已经成功执行resolve，这一句就不能改变promise状态，因为状态已经决定了
});

# catch获取异常
p.catch((error) => {
  console.log(error);  // "拒绝"
});
 
# .then的第二个参数 获取异常   不建议这种
p.then(
  (res) => {},
  (rej) => {
    console.log("----打印：", rej);  // ----打印： 拒绝
  }
);

// eg：常用的promise

function send(url){
    return new Promise(function(resolve, reject){   // resolve v.解决 处理  reject v.拒绝、否决
        console.log("我要发送ajax了", url)
        
        // 用定时器代表异步操作，一段时间后才有结果值
        setTimeout(function(){
            console.log("我发送ajax回来了")
            // 成功了, 要去处理返回值
            resolve("数据", url);      // reslove 传递的参数，在后一个的 .then 第一个参数(回调函数) 能直接获取到
        }, 3000);                     // 注意 传递的参数，该回调函数的形参 要对应上
    });
}


send("www.baidu.com").then(function(data){
    console.log("我要处理数据了啊", data);    // data: "数据"    url没有获取到，要在该回调函数形参上，定义了，才能获取
    return send("www.google.com");         // 返回了新的promise对象(send)
}).then(function(data, url){               // data: "数据"    url: "www.google.com"
    console.log("我又来处理数据了", data);
})                                         // 中间可以链式调用很多层...
.catch(function(data){
    console.log('前面一层层的请求失败时，都走这里 处理 reject的')
});

三. axios

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

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

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

axios 和 jQuery ，发送ajax ，底层都是对原生JS的 XMLHttpRequest对象的封装

<script src="/static/axios.min.js"></script>
<script>
    window.onload = function(){
        axios.post("/movies", {"page": 10086}).then(function(resp){
            console.log(resp.data);  // axios请求 返回的是一个包含其他参数的响应对象
        })
    }
</script>


// axios 默认发送json
axios
    .get('/index', {})   // 发送get请求
    .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之间，有一个中间件)，进行批量处理，一次性处理好这种问题

// 故重点：大多数的JS逆向 数据的加解密入口，都在axios拦截器中！！！

axios.interceptors.request.use(function(config){  // 拦截所有请求   interceptors  n.拦截器
    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);
    })
}

五 补充

1.重写XMLHttpRequest.open

# 前提
1.axios和jQuery发送ajax请求，底层都是对原生JS的 XMLHttpRequest对象的封装


2.XMLHttpRequest对象 发送请求时，大致是分两步走，分别是 
先xhr.open(url, ...)，与服务器的url地址，建立一个通道
再xhr.send(数据, ...)，真正发送真的Ajax请求



# 情形：  eg:http://www.fangdi.com.cn/old_house/old_house.html
发送请求时，一开始url是正常的，然后再接着执行一行代码，url就莫名其妙加上了 一段参数 MmEwMD: 4mB6...
你也找不到 该参数 咋添加上去的
    
大概率，就是 在XMLHttpRequest对象.open(url, ...)时，动了手脚，重写了open方法
XMLHttpRequest.prototype.open = function(){...}



# JS逆向瑞树常用这种，在url上加上参数    防爬措施

控制台(输入)：XMLHttpRequest.prototype.open  一点进去

function _$7g() {
            _$1F();
            arguments[1] = _$0H(arguments[1]);
            return _$pL[_$c5[32]](this, arguments);
}

2.local storage、session storage、cookie

# 浏览器上的 Application ---> Storage中 cookie、Local storage、Session storage三者的区别


### 相同点：
三者都是在开发中 浏览器，临时存储客户端会话信息或者数据的方法


### 不同点：

# 一.存储的时间有效期不同

1.cookie的有效期是可以设置的  # 默认 关闭浏览器后失效

2.sessionStorage的有效期是仅保持在当前页面  # 关闭当前会话页或者浏览器后就会失效

3.localStorage的有效期是在不进行手动删除的情况下是一直有效的  # 一直存在


# 二.存储的大小不同
1.cookie的存储是4kb左右，存储量较小，一般页面最多存储20条左右信息

2.localStorage和sessionStorage的存储容量是5Mb (官方介绍，可能和浏览器有部分差异性)


# 三.与服务端的通信
1.cookie会参与到与服务端的通信中，一般会携带在http请求的头部中，例如一些关键密匙验证等

2.localStorage和sessionStorage是单纯的前端存储，不参与与服务端的通信



### 操作方法
# 存  sessionStorage一样
localStorage.setItem('数据名', '数据值');

# 取
let data = localStorage.getItem('数据名');


# cookie的存 取
document.cookie="username=John Doe";

var x = document.cookie;