【JavaScript37】原生Ajax请求
首先，我们用Flask创建一个后台服务器
- pip install flask
- myserver.py文件
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/ajax", methods=["GET", "POST"])
def func4():
print("接受到ajax请求了")
return "hello"
@app.route('/login')
def func5():
return render_template('login.html')
if __name__ == '__main__':
app.run()
发送get请求与接收参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
这是我练习的界面
<hr>
<!-- ajax -->
<button id="ppp">我是按钮</button>
<script>
document.querySelector('#ppp').addEventListener('click',function () {
// 注意, get请求的参数, 必须在url上传送
var url = '/ajax?uname=xwl';
fs_ajax(url)
});
function fs_ajax(url) {
var xhr = new XMLHttpRequest();
xhr.open('get',url); //get请求
// 接受返回值的方案, 每次readyState状态变化. 都会执行该函数
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){ // 数据传输完毕
if (xhr.status === 200){ // 本次请求没问题. 服务器正常返回的数据
// 接受返回长参数
console.log("服务器返回了", xhr.responseText);
}
}
};
// 必须调用send()才把请求发出去
xhr.send()
}
</script>
</body>
</html>
发送POST请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
这是我练习的界面
<hr>
<button id="bbb">我是按钮</button>
<script>
document.querySelector("#bbb").addEventListener("click", function(){
var url = "/ajax";
fa_ajax(url);
});
function fa_ajax(url){
// js发请求. 正常逻辑是发ajax请求
var xhr = new XMLHttpRequest();
// 发请求
// 先open, xhr.open(请求方式, url地址)
// 注意, get请求的参数, 必须在url上传送
// xhr.open("get", "/ajax?uname=123"); // 这个请求没发出去.
xhr.open("post", url); // 2个参数
// 注意. 如果是post请求. 那么请求头中必须添加以下内容, 才会是form data的方式提交数据
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 如果不添加请求头. 那么这里的Content-Type是纯文本
// 一种特殊的请求头
xhr.setRequestHeader("Content-Type", "application/json");
// 接受返回值的方案, 每次readyState状态变化. 都会执行该函数
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){ // 数据传输完毕
if (xhr.status === 200){ // 本次请求没问题. 服务器正常返回的数据
// 接受返回长参数
console.log("服务器返回了", xhr.responseText);
}
}
};
// 必须调用send()才会把请求发出去
// 如果是post请求. 参数. 必须通过send()发出去
// xhr.send("uname=123&upsw=456"); // 这个才是发请求.....
// 如果是json格式的请求体
let data = {
uname: 123,
upsw: 456
};
xhr.send(JSON.stringify(data));
}
</script>
</body>
</html>
- 服务器端接收参数
@app.route("/ajax", methods=["GET", "POST"])
def func4():
# 这种只能接受Form Data的参数
uname = request.form.get('uname')
print(uname)
# 这种是接受json格式参数
# uname = request.json.get("uname")
# print(uname)
return "hello"
接口获取时，对于json格式注意点
resp = requests.post(url, json=data) # 此时. 发送的数据是以json格式发送出去的
# 内部会多两个操作
# 1. 把data转化成json字符串, json.dumps(data)
# 2. 把请求头中的ContentType设置成application/json
#
# 上述方案的缺陷: json格式的字符串中会有空格. 服务器能检测到.
#
# 下面的逻辑必须记住.....
# # 最好的解决方案
import json
resp = requests.post(url, data=json.dumps(data, separators=(',', ':')), headers={
"Content-Type": "application/json" # 不加这句话. 服务器接受不到数据
})
网站为了反爬，会对数据进行加密
- 一般会对open进行hook，但也有可能对send进行hook
//可以对open进行hook. hook的目的是可以对url进行加密
var _qiaofu_open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(){ // 以后你再open. 调用的就是我这个函数了
var url = arguments[1];
// 加密的代码
console.log("通过url进行加密, 假设计算了一个md5");
let md5 = "hahahahahahahah";
url = url + "?md5="+md5;
arguments[1] = url;
_qiaofu_open.apply(this, arguments);
};
// 当你抓包里. 绞尽脑汁. 找不到对url的加密的地方的时候.
// 尝试去console里输入XMLHttpRequest.prototype.open如果打印的不是ƒ open() { [native code] }
// 直接进去下断点即可....
