前端后端通信初步尝试(javascript - flask)
在某项目中,需要使用python flask做后端功能开发,web提供功能入口。
此时需要使用Ajax通信。
由于以前从未接触过网络传输,记录了一些基础知识。
资料参考《HTML5+CSS3+JavaScript从入门到精通》第19章。
Ajax
Ajax(Asynchronous Javascript And XML, 异步JavaScript和XML)又称Web数据交互方式,是利用JS脚本和XML数据实现客户端和服务器端之间快捷通信的技方法,包括:
- 基于标准化的HTML和CSS
- 通过DOM实现动态显示和交互
- 通过XML或JSON来进行数据交换和处理
- 使用XMLHttpRequest实现异步数据交换
- 使用JS脚本控制数据交换的前后行为
基础
XMLHttpRequest是主要对象,其主要方法有:
- abort() 取消当前请求
- open() 创建新的请求
- setRequestHeader() 单独制定请求的某个HTTP头
- send() 发送请求并接收回应
- getAllResponseHeaders() 获取响应的所有HTTP头
- getRespnseHeader() 获取特定的响应HTTP头
常见请求类型有:GET和POST
主要属性有: - readyState 当前请求的状态
- onreadystatechange 当readyState 改变时的时间处理句柄(回调函数)
- responseBody 响应正文
- responseStream 以ADO Stream对象形式返回的响应信息
- responseText 将响应信息作为字符串返回
- responseXML 将响应信息格式化为XML document对象并返回
- status 返回当前请求的http状态码
- statusText 返回当前请求的响应行状态
一次通信的范式是:
1、实例化一个XMLHttpRequest对象
2、调用XMLHttpRequest对象的open()方法打开服务器端的某个URL地址
3、注册onreadystatechange事件处理函数,准备接受响应数据,并进行处理
4、调用XMLHttpRequest对象的send()方法发送请求。
创建XMLHttpRequest对象
function createXMLHTTPObject()
{
var XMLhttpFactories = [//兼容不同浏览器和版本的创建函数数组
function() {return new XMLHttpRequest()},
function() {return new ActiveXObject("Msxml2.XMLHTTP")},
function() {return new ActiveXObject("Msxml3.XMLHTTP")},
function() {return new ActiveXObject("Microsoft.XMLHTTP")},
];
var xmlhttp = false;
for (var i = 0; i < XMLhttpFactories.length; i++)
{
try
{
xmlhttp = XMLhttpFactories[i]();
break; //如果成功,则终止循环
}
catch (e)
{
continue; //如果异常,则继续使用下一个创建函数
}
}
return xmlhttp;
}
打开服务器端的某个URL地址
本项目是通过flask设置了URL地址,比较轻便
XMLHttpRequest对象open的时候,只需要
xmlhttp = createXMLHTTPObject();
request_type = "GET"; //常见的有GET和POST
request_url = "http://127.0.0.1:5000/test/"; //flask创建的一个本地服务器
asynchronous_type = false; //True为异步,false为同步
xmlhttp.open(request_type, request_url, asynchronous_type);
个人理解,GET模式只需发送地址,在send()时没有其他的参数,而POST模式在send()时还需要打包其他的参数
注册onreadystatechange事件处理函数
在写事件处理函数前,需要对跟踪状态有一定了解。
跟踪状态
当一个请求发送后,XMLHttpRequest对象通过readyState属性实时跟踪异步交互状态,当该属性变化时,将处罚readystatechange事件,调用绑定该事件的回调函数。
readyState有5种状态:
0. 未初始化,对象已建立,但未调用open()方法
- 初始化,对象已建立,但未调用send()方法
- 已发送,表示send()方法已调用,但当前状态未知及HTTP头未知
- 数据传送中,已接收部分数据,但是还没有完全好。
- 完成,可以通过responseBody和responseText获取完整的响应数据。
一般,需要等xmlhttp.readyState4时,才应当进行操作。
http状态码(xmlhttp.status)也经常参与状态跟踪,xmlhttp.status200为成功,其余为各种错误。
事件处理函数一个简单例子
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==0)
// 请求已返回,但http状态为0,表示未连接到服务器
{
show_message('后台服务未开启', 2000);
}
if (xmlhttp.readyState==4 && xmlhttp.status==200)
// 请求已返回,且服务器返回状态为OK
{
//DO SOMETHING
}
}
XMLHttpRequest对象发送请求
GET请求
xmlhttp = createXMLHTTPObject();
xmlhttp.open("GET", "http://127.0.0.1:5000/test/", flase);
xmlhttp.send(null);
result = xmlhttp.responseText;
POST请求
POST请求需要send一份数据,本项目用的是JSON,相对比较简单
xmlhttp = createXMLHTTPObject();
xmlhttp.open("POST", "http://127.0.0.1:5000/test/", flase);
// 如果传递json格式的数据,需要设置发送数据类型为json
_xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
var request_data = {};
request_data["tmp_dir"] = decrypt_tmp_dir; // 变量1
request_data["type"] = op_mode; // 变量2
xmlhttp.send(JSON.stringify(request_data)); // json格式
result = xmlhttp.responseText;
除了json外,还有串行(application/x-www-form-urlencoded),xml (text/xml),
XMLHttpRequest对象接收响应
响应格式有
- respeonseBody 以unsigned byte格式返回
- responseStream 以ADO Stream对象返回
- responseText 以字符串格式返回,json可以直接以该模式得到,再通过eval()得到对象。
- responseXML 以XML文档格式返回
对于本项目来说,直接使用 responseText即可。
rst = xmlhttp.responseText;
前端后端通信初步尝试(javascript - flask)的更多相关文章
- Springboot第三篇:与前端fetch通信(关于前端传输json数据上传文件等等前后端的处理)
关于前端接口传递的方法,推荐按以下使用: 若要在服务器上创建资源,推荐使用POST方法 若要检索某个资源,推荐使用GET方法 若要更新资源,推荐使用PUT方法 若要删除某个资源,推荐使用DELETE方 ...
- 前端笔记知识点整合之JavaScript(三)关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
- Springboot第二篇:与前端fetch通信(附springboot解决跨域方法)
说到与前端通信,明白人都知道这章肯定会写两部分的东西啦. 关于后台 ①首先回顾前文,上一章环境搭建如图: ②我们在maven.example.controller下添加一个文件,并附上如图代码: ③: ...
- 从前端到全栈:JavaScript逆袭之路
JavaScript如何做到上天入地无所不能?JavaScript真的能一统江湖吗? 背景 近年来,前端技术日新月异,前端已经不仅仅是网页,更多的开始由狭义向广义发展. 先后涌现出了具备后端能力的no ...
- 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- 前端开发:面向对象与javascript中的面向对象实现(一)
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
- Python爬虫学习:二、爬虫的初步尝试
我使用的编辑器是IDLE,版本为Python2.7.11,Windows平台. 本文是博主原创随笔,转载时请注明出处Maple2cat|Python爬虫学习:二.爬虫的初步尝试 1.尝试抓取指定网页 ...
- 前端回顾:2016年 JavaScript 之星
JavasScript社区在创新的道路上开足了马力,曾经流行过的也许一个月之后就过时了.2016已经结束了.你可能会想你是否错过一些重要的东西?不用担心,让我们来回顾2016年前端有哪些主流.通过比较 ...
随机推荐
- 在调用系统相册时,UIIMagePickerController使用中偷换StatusBar颜色的问题
在调用系统相册时,UIIMagePickerController使用中偷换StatusBar颜色的问题 此时解决办法是 #pragma mark - UIImagePickerController D ...
- hash 模式与 history 模式小记
hash 模式 这里的 hash 就是指 url 后的 # 号以及后面的字符.比如说 "www.baidu.com/#hashhash" ,其中 "#hashhash&q ...
- excel数据导入mySql数据库
1.将excel数据保存好 2.打开数据库,在表上点击右键,选择导入向导 3.点击下图中红色部门,点击下一步 4.选择excel文件的位置,下方的表空间内,会出现excel中的sheet页,选择要导入 ...
- WPF 引用第三方库的控件在设计器加上设计时数据和属性
本文告诉大家如何在 VisualStudio 2022 的 XAML 设计器中,在设计时给第三方控件加上设计用的属性和数据的方法 此功能要求使用不低于 VisualStudio 2019 的 16.8 ...
- .net 5 开发跨平台客户端程序
介绍下.net 跨平台开发服务端程序的过程, .net 5发布已经有段时间了,.net 5根据微软官方的说法将来只有一个.net版本,也就是不在有core之分.从.net5开始整合.net frame ...
- JavaScript对象之面向对象
在js中创建对象的两种方式 1.new一个Objecteg: var flower = new Object(); flower.stuname = "呵呵"; flower.ag ...
- vc mfc listctrl使用虚拟列表 虚拟列表用法
note 虚拟列表可有效加载大量数据 需要处理listctrl的 LVN_GETDISPINFO 消息 使用虚拟列表 不能 使用 insert的方法插入数据,而是告诉listctrl 当前要显示多少行 ...
- fedora之自动寻找命令并提示安装PackageKit-command-not-found
fedora 1.比如,我要用clang 命令编译代码,但是没有该指令.比如: clang main.cxx -o main 2.那么,输入未知命令,希望fedora会自动寻找相对应的包,再并提示安装 ...
- 细聊.NET6 ConfigurationManager的实现
前言 友情提示:建议阅读本文之前先了解下.Net Core配置体系相关,也可以参考本人之前的文章<.Net Core Configuration源码探究>然后对.Net Core的Conf ...
- 【LeetCode】256. Paint House 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 动态规划 日期 题目地址:https://leetco ...