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

2022/1/6 11:03:30

本文主要是介绍前端后端通信初步尝试(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()方法

  1. 初始化,对象已建立,但未调用send()方法
  2. 已发送,表示send()方法已调用,但当前状态未知及HTTP头未知
  3. 数据传送中,已接收部分数据,但是还没有完全好。
  4. 完成,可以通过responseBody和responseText获取完整的响应数据。
    一般,需要等xmlhttp.readyState4时,才应当进行操作。
    http状态码(xmlhttp.status)也经常参与状态跟踪,xmlhttp.status
    200为成功,其余为各种错误。

事件处理函数一个简单例子

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)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程