一、AJAX原理
1.创建XMLHttpRequest/ActiveObject对象
2.注册回调参数
3.配置请求参数
4.发送请求
5.创建回调
1.1 、XMLHttpRequest对象
用于在后台与服务器交换数据
1.2、XMLHttpRequest的几种状态
0.对象没有完成初始化
1.对象开始发送请求
2.对象请求发送完成
3.对象开始读取服务器响应
4.对象读取服务器响应结束
二、AJAX的js实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ajax js 的实现</title>
</head>
<body>
<p>ajax js 的实现</p>
<script>
// 1. 创建XMLHttpRequest对象
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} else {
alert('浏览器不支持')
}
// 2. 注册回调函数
if (xmlhttp !== null) {
xmlhttp.onreadystatechange = callback;
}
// 3. 配置请求参数
var url = 'http://127.0.0.1:5000/ajax/js'
// 4. 发送请求
xmlhttp.open('POST', url, true);
// 发送请求
xmlhttp.send(null);
// 5. 回调处理
function callback() {
if(xmlhttp.readyState === 4) {
// http状态码
console.log(xmlhttp.status)
}
}
// 跨域错误 同源策略:协议 地址 端口
</script>
</body>
</html>
三、AJAX的jquery实现
.ajax函数参数
- url----请求地址
- method ---- 请求类型
- data ---- 请求参数
- dataType ---- 返回的数据类型(xml/html/json等)
- headers ---- 请求头信息
- success --- 请求成功后的回调
- error ---- 发生错误后的回调(状态码补位2XX)
- complete --- 请求完成后的回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>jquery 中使用 ajax</p>
<a href="javascript:;">点击提交</a>
<script>
$(document).ready(function() {
$('a').click(function () {
$.ajax({
//请求地址
url: 'http://127.0.0.1:5000/ajax/js',
//请求类型
method: 'GET',
//请求参数
data: {
username: 'zhangsan',
password: '123123'
},
/**
success: function (res) {
console.log(res)
alert('成功了')
},
error: function () {
alert('出错了')
},
**/
complete: function() {
alert('请求完成了')
}
})
})
})
</script>
</body>
</html>
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/ajax')
def index():
return render_template('ajaxjs.html')
@app.route('/ajax/js', methods=['GET', 'POST'])
def ajax_js():
print(request.values)
return 'js ajax', 200
@app.route('/ajax/jq')
def ajax_jq():
return render_template('ajaxjq.html')
四、AJAX快捷函数
- .post --- post请求
- .get() ---- get请求
- .getJSON() --- get请求json数据
4.1 AJAX全局设置
ajaxSetup()全局设置使用场景
1.请求响应拦截,如:http状态码为401跳转到登录界面
2.添加全局参数,如:error:function(event,statusText){}
3. 添加请求头信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax 快捷函数的使用</title>
<script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>ajax 快捷函数的使用</p>
<a href="javascript:;">点击提交</a>
<script>
$(function () {
$.ajaxSetup({
headers: {
'appfrom': 'h5'
},
error: function (event) {
console.log(event.status);
if(event.status === 401) {
alert('请登录')
} else {
alert('发生了错误')
}
}
})
$('a').click(function () {
// $.post('http://127.0.0.1:5000/ajax/js', {
// $.get('http://127.0.0.1:5000/ajax/js', {
$.getJSON('http://127.0.0.1:5000/ajax/js', {
'username': 'zhangsan',
'password': '123123'
}, function (res) {
res = JSON.parse(res)
console.log(res);
console.log(res.username);
alert('请求成功')
})
})
})
</script>
</body>
</html>