在某项目中,需要使用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;