FLask框架-AJAX（异步JavaScript与XML） – 潘登同学的flask学习笔记
文章目录
- FLask框架-AJAX（异步JavaScript与XML） -- 潘登同学的flask学习笔记
- AJAX技术
- AJAX使用
- AJAX中GET请求参数传递
- AJAX中POST请求传递参数
- AJAX获取状态码与处理结果
- AJAXc错误处理
- AJAX封装
- AJAX封装-处理响应
- 失败处理
- 处理返回数据
- AJAX封装设置默认值
- JQuery中AJAX的使用
- JQuery中get与post
AJAX技术
AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统网站中存在的问题
- 网速慢的情况下，页面加载时间长，用户只能等待
- 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
- 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间（分页跳转，只需要更新主要内容）
AJAX的应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单页离开焦点数据验证
- 搜索框提示文字下拉列表
- 级联显示
AJAX运行原理
AJAX使用
- 1.创建AJAX
XMLHttpRequest对象
let xhr = new XMLHttpRequest()- 2.设置AJAX请求地址以及请求方式,通过
XMLHttpRequest.open()方法用于指定 HTTP 请求的参数，或者说初始化XMLHttpRequest实例对象。它一共可以接受五个参数。
void open(
string method,
string url,
optional boolean async,
optional string user,
optional string password
);-
method：表示 HTTP 动词方法，比如GET、POST、PUT、DELETE、HEAD等。 -
url: 表示请求发送目标URL。 -
async: 布尔值，表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。该参数可选。由于同步AJAX 请求会造成浏览器失去响应，许多浏览器已经禁止在主线程使用，只允许 Worker里面使用。所以，这个参数轻易不应该设为 false 。 -
user：表示用于认证的用户名，默认为空字符串。该参数可选。 -
password：表示用于认证的密码，默认为空字符串。该参数可选。
xhr.open("GET",'http://httpbin.org/get')- 3.发送请求, XMLHttpRequest.send() 方法用于实际发出 HTTP 请求。它的参数是可选的，如果不带参数，就表示 HTTP 请求只包含头信息，也就是只有一个 URL，典型例子就是 GET 请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST 请求。
- 4.获取服务器端给客户端的响应数据
XMLHttpRequest对象可以对以下事件指定监听函数
-
XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数 -
XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数 -
XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了 abort() 方法）的监听函数 -
XMLHttpRequest.onerror：error 事件（请求失败）的监听函数 -
XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数 -
XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数 -
XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数 -
XMLHttpRequest.onreadystatechange: readystatechange事件(当 readyState 属性变化)的监听函数
// resopnseText是响应文本
xhr.onload = function(){console.log(xhr.resopnseText)}AJAX简单操作，实现动态加载页面
<body>
<h1>AJAX的基本使用</h1>
<div class='container'></div>
<script>
// 创建AJAX
let xhr = new XMLHttpRequest();
// 设置请求的参数
xhr.open("GET",'http://httpbin.org/get');
// 发生请求
xhr.send();
// 获取响应数据
xhr.onload = function(){
// 获取响应的文本内容
content = xhr.responseText;
// 输出到控制台
console.log(content);
// 获取div的对象
= document.querySelector(".container");
// 将数据填充到div中
.innerHTML = content;
}
</script>
</body>AJAX中GET请求参数传递
在get请求中，参数是拼接在url中的，所以此时可以获取到参数，拼接到url即可
<body>
<h1>AJAX中GET请求传参</h1>
<div class='container'></div>
<script>
// 创建AJAX
let xhr = new XMLHttpRequest();
// 设置url
let url = 'http://httpbin.org/get';
// 拼接请求参数
let args = '?uname=pd&pwd=123'
url += args
// 设置请求的参数
xhr.open("GET", url);
// 发生请求
xhr.send();
// 获取响应数据
xhr.onload = () => {
// 获取响应的文本内容
content = xhr.responseText;
// 获取div的对象
= document.querySelector(".container");
// 将数据填充到div中
.innerHTML = content;
}
</script>
</body>
<body>
<h1>AJAX中GET请求传参</h1>
<input type="text" name="" id="uname">
<input type="text" name="" id="pwd">
<input type="button" value="获取用户名和密码" onclick='submitform()'>
<script>
function submitform(){
uname = document.getElementById('uname').value
pwd = document.getElementById('pwd').value
let xhr = new XMLHttpRequest();
let url = 'http://httpbin.org/get';
let args = '?uname=' + uname + '&pwd=' + pwd;
url += args;
xhr.open("GET", url);
xhr.send();
xhr.onload = () => {
// 获取响应的文本内容
content = xhr.responseText;
console.log(content)
}
}
</script>
</body>AJAX中POST请求传递参数
AJAX使用post的请求基本一样。但在传参时，有些不同，参数应该放在body中，并通过XMLHttpRequest.setRequestHeader() 设置请求信息的格式
XMLHttpRequest.setRequestHeader() 方法用于设置浏览器发送的 HTTP 请求的头信息。该方法接受两个参数。第一个参数是字符串，表示头信息的字段名，第二个参数是字段值
注意:XMLHttpRequest.setRequestHeader() 该方法必须在 open() 之后、 send() 之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="" id="uname1"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name="" id="pwd1"></td>
</tr>
<tr>
<td><input type="button" value="传递数据-str" onclick='submitform_str()'></td>
<td><input type="button" value="传递数据-json"></td>
</tr>
</table>
<script>
function submitform_str(){
// 获取数据
uname1 = document.getElementById('uname1').value;
pwd1 = document.getElementById('pwd1').value;
// 拼接参数
let args = 'uname=' + uname1 + '&pwd=' + pwd1;
let xhr = new XMLHttpRequest();
xhr.open('POST','http://httpbin.org/post');
// 设置请求内容的类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') // 在open之后，send之前
xhr.send(args);
xhr.onload = () =>{
console.log(xhr.responseText);
}
}
</script>
function submitform_json(){
// 获取数据
uname1 = document.getElementById('uname1').value;
pwd1 = document.getElementById('pwd1').value;
let args = {'uname' : uname1,
'pwd' : pwd1};
args = JSON.stringify(args)
let xhr = new XMLHttpRequest();
xhr.open('POST','http://httpbin.org/post');
// 设置请求内容的类型
xhr.setRequestHeader('Content-Type','application/json')
xhr.send(args);
xhr.onload = () =>{
console.log(xhr.responseText);
}
}
注意 get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的
AJAX获取状态码与处理结果
我们需要判断服务器响应的数据是正确还是错误来解析数据，否则前面就会显示出错
AJAX状态码
在创建AJAX对象，配置AJAX对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数据就是AJAX状态码
XMLHttpRequest.readyState 返回一个整数，表示实例对象的当前状态。该属
性只读。它可能返回以下值。
- 0:表示 XMLHttpRequest 实例已经生成，但是实例的
open()方法还没有被调用。 - 1:表示
open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。 - 2:表示实例的
send()方法已经调用，并且服务器返回的头信息和状态码已经收到。 - 3:表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的
responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。 - 4:表示服务器返回的数据已经完全接收，或者本次接收已经失败。
HTTP状态码
XMLHttpRequest.status 属性返回一个整数，表示服务器回应的 HTTP 状态码。一般来说，如果通信成功的话，这个状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为 0 。该属性只读
在 XMLHttpRequest.onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时,再执行任务
function get_data() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://httpbin.org/get');
xhr.send();
xhr.onreadystatechange = () => {
// 当AJAX的状态码为4，并且http的状态码为200时
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log(xhr.responseText)
// 转换数据类型
data = JSON.parse(xhr.responseText)
console.log(data)
} else {
// 查看异常
console.log(xhr.status)
}
} else {
console.log(xhr.readyState)
}
}
}服务器端响应的数据格式
在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。
在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，一般都会被转换为对象字符串进行传输
JSON.parse() //将json字符串转换为json对象AJAXc错误处理
网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期的结果。可以判断服务器端返回的状态码，分别进行处理。 xhr.status获取http状态码
- 网络畅通，服务器端没有接收到请求，返回404状态。检查请求地址是否错误
- 网络畅通，服务器端能接收到请求，服务器端返回500状态码
- 网络中断，请求无法发送到服务器端
在AJAX中设置一个专门处理请求失败的监听函数 XMLHttpRequest.onerror ：error 事件（请求失败）的监听函数
AJAX封装
对POST与GET方法进行封装
function AJAX1(options) {
// options是一个JSON对象，
// options:
// type:请求的方式
// url:请求的地址
// data:请求的参数，类型的JSON
let xhr = new XMLHttpRequest();
// 处理请求的参数
let args = '?'
for (let key in options.data) {
args += key + '=' + options.data[key] + '&'
}
args = args.substr(0,args.length-1)
if (options.type.toUpperCase() == "GET") {
xhr.open(options.type, temp_url+args);
xhr.send();
} else if (options.type.toUpperCase() == "POST") {
args = args.substr(1,args.length)
xhr.open(options.type, options.url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(args);
}
xhr.onreadystatechange = () => {
// 当AJAX的状态码为4，并且http的状态码为200时
if (xhr.readyState == 4) {
if (xhr.status == 200) {
data = JSON.parse(xhr.responseText)
console.log(data)
} else {
// 查看异常
console.log(xhr.status)
}
} else {
console.log(xhr.readyState)
}
}
xhr.onerror = () => {
console.log('网络中断')
}
}运用封装好的AJAX
<input type="button" value="获取响应数据get" onclick='get_data()'>
<input type="button" value="发送请求数据post" onclick='post_data()'>
<script>
function get_data() {
AJAX1({
type: 'get',
url: 'https://httpbin.org/get',
data: {
uname: 'pd',
pwd: '123'
}
})
}
function post_data() {
AJAX1({
type: 'post',
url: 'https://httpbin.org/post',
data: {
uname: 'pd',
pwd: '123'
}
})
}
</script>
AJAX封装-处理响应
当AJAX发送了请求后，AJAX都应该回馈一个内容。这时就会分如下2个情况：
失败处理
可以通过onerror监听函数处理错误情况，
处理返回数据
请求成功能可以，通过onreadystatechange监听函数处理。以下是可以使用的属性
- XMLHttpRequest.response
-
XMLHttpRequest.response属性表示服务器返回的数据体（即 HTTP 回应的 body 部分）。它可能是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定。该属性只读 - 如果本次请求没有成功或者数据不完整，该属性等于
null。但是，如果responseType属性等于text或空字符串，在请求没有结束之前（readyState等于3的阶段），response属性包含服务器已经返回的部分数据。
- XMLHttpRequest.responseType
-
XMLHttpRequest.responseType属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉服务器返回指定类型的数据。如果responseType设为空字符串，就等同于默认值text。
- XMLHttpRequest.responseType 属性可以等于以下值。
- ”“（空字符串）：等同于
text，表示服务器返回文本数据。 - “arraybuffer”：ArrayBuffer 对象，表示服务器返回二进制数组。
- “blob”：Blob 对象，表示服务器返回二进制对象。
- “document”：Document 对象，表示服务器返回一个文档对象。
- “json”：JSON 对象。
- “text”：字符串。
上面几种类型之中， text 类型适合大多数情况，而且直接处理文本也比较方便。 document 类型适合返回 HTML / XML 文档的情况，这意味着，对于那些打开 CORS 的网站，可以直接用AJAX 抓取网页，然后不用解析 HTML 字符串，直接对抓取回来的数据进行 DOM 操作。 blob 类型适合读取二进制数据，比如图片文件
- XMLHttpRequest.responseText
-
XMLHttpRequest.responseText属性返回从服务器接收到的字符串，该属性为只读。只有HTTP 请求完成接收以后，该属性才会包含完整的数据
- XMLHttpRequest.responseXML
-
XMLHttpRequest.responseXML属性返回从服务器接收到的 HTML 或 XML 文档对象，该属性为只读。如果本次请求没有成功，或者收到的数据不能被解析为 XML 或 HTML，该属性等于null - 该属性生效的前提是 HTTP 回应的
Content-Type头信息等于text/xml或application/xml。这要求在发送请求前，XMLHttpRequest.responseType属性要设为document。如果 HTTP回应的Content-Type头信息不等于text/xml和application/xml，但是想从responseXML拿到数据（即把数据按照 DOM 格式解析），那么需要手动调用XMLHttpRequest.overrideMimeType()方法，强制进行 XML 解析。
- XMLHttpRequest.responseURL
-
XMLHttpRequest.responseURL属性是字符串，表示发送数据的服务器的网址
AJAX封装设置默认值
在使用AJAX时，往往需要传递多个参数。为了简化使用封装的AJAX方法，因此可以考虑给AJAX方法设置默认参数
// AJAX封装请求参数
function AJAX1(options) {
// options是一个JSON对象，
// options:
// type:请求的方式
// url:请求的地址
// data:请求的参数，类型的JSON
// success:请求成功以后如何处理
// error：请求失败以后如何处理
let defaults = {
type:'GET',
url:'',
success:()=>{},
error:()=>{}
}
// 合并属性 最终在第一个参数上default有完整的属性，但是第二个参数占主导地位
Object.assign(defaults,options)
let xhr = new XMLHttpRequest();
// 处理请求的参数
let args = '?'
for (let key in defaults.data) {
args += key + '=' + defaults.data[key] + '&'
}
args = args.substr(0,args.length-1)
if (defaults.type.toUpperCase() == "GET") {
xhr.open(defaults.type, temp_url+args);
xhr.send();
} else if (defaults.type.toUpperCase() == "POST") {
args = args.substr(1,args.length)
xhr.open(defaults.type, defaults.url);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(args);
}
// 接受响应
xhr.onreadystatechange = () => {
// 当AJAX的状态码为4，并且http的状态码为200时
if (xhr.readyState == 4) {
if (xhr.status == 200) {
defaults.success(xhr.responseText)
} else {
// 查看异常
defaults.error(xhr.status)
}
} else {
defaults.error(xhr.readyState)
}
}
xhr.onerror = () => {
defaults.error('1000:网络中断')
}
}
function get_data() {
AJAX1({
// type: 'get',
url: 'https://httpbin.org/get',
data: {
uname: 'pd',
pwd: '123'
},
success:(response)=>{
console.log(response)
},
error:(response)=>{
console.log('返回的状态码是:' + response)
}
})
}
function post_data() {
AJAX1({
type: 'post',
url: 'https://httpbin.org/post',
data: {
uname: 'pd',
pwd: '123'
},
success:(response)=>{
console.log(response)
},
error:(response)=>{
console.log('返回的状态码是:' + response)
}
})
}JQuery中AJAX的使用
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
需要引入文件,线上地址
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>调用方式，在前面加一个$符号
<body>
<h1>JQuery中使用AJAX</h1>
<input type="button" value="发送请求" onclick='post_data()'>
<input type="button" value="获取数据" onclick='get_data()'>
<script>
function post_data(){
$.ajax({
type:'post',
url:'https://httpbin.org/post',
data:{
uname:'pd',
pwd:'h12',
},
success:(response)=>{
console.log(response)
}
})
}
function get_data(){
$.ajax({
type:'get',
url:'https://httpbin.org/get',
// 也可以用拼接的写法
// data:'uname=pd&pwd=123',
data:{
uname:'pd',
pwd:'123',
},
success:(response)=>{
console.log(response)
}
})
}
</script>
</body>JQuery中AJAX的参数解释
jQuery.AJAX([settings])
– type
– url
– data
– contentType
– beforSend 发送请求前可修改 XMLHttpRequest对象的函数，如添加自定义 HTTP 头
– success
– error需求：后台要求一定是json数据格式，在contentType:'application/json', 设置即可
function post_json(){
$.ajax({
type:'post',
url:'https://httpbin.org/post',
data:{
uname:'pd',
pwd:'h12',
},
contentType:'application/json',
success:(response)=>{
console.log(response)
}
})
}beforeSend的使用:主要应用于发送请求前的处理
- 获取前 将div设置面加载…
- 提交表单前 验证数据
如果在函数中返回ture继续执行发送请求，如果返回flase取消发送
JQuery中get与post
JQuery为GET与POST设置的专门的方法
function get_data(){
$.get(
'https://httpbin.org/get',
{uname:'pd', pwd:'h12'},
function(response){
console.log(response);
}
)}
function post_data(){
$.post(
'https://httpbin.org/post',
// 也可以传递str参数
{uname:'pd', pwd:'h12'},
function(response){
console.log(response);
}
)}