前端后端通信初步尝试(javascript - flask)

2021-12-15 21:23:38

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

码农公寓