脚本宝典收集整理的这篇文章主要介绍了前端后端通信初步尝试(javascript - flask),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在某项目中,需要使用python flask做后端功能开发,web提供功能入口。 此时需要使用Ajax通信。 由于以前从未接触过网络传输,记录了一些基础知识。 资料参考《HTML5+CSS3+JavaScript从入门到精通》第19章。
Ajax(Asynchronous Javascript And XML, 异步JavaScript和XML)又称Web数据交互方式,是利用JS脚本和XML数据实现客户端和服务器端之间快捷通信的技方法,包括:
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;
}
本项目是通过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()时还需要打包其他的参数
在写事件处理函数前,需要对跟踪状态有一定了解。
当一个请求发送后,XMLHttpRequest对象通过readyState属性实时跟踪异步交互状态,当该属性变化时,将处罚readystatechange事件,调用绑定该事件的回调函数。 readyState有5种状态: 0. 未初始化,对象已建立,但未调用open()方法
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
}
}
xmlhttp = createXMLHTTPObject();
xmlhttp.open("GET", "http://127.0.0.1:5000/test/", flase);
xmlhttp.send(null);
result = xmlhttp.responseText;
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),
响应格式有
rst = xmlhttp.responseText;
以上是脚本宝典为你收集整理的前端后端通信初步尝试(javascript - flask)全部内容,希望文章能够帮你解决前端后端通信初步尝试(javascript - flask)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。