前端后端通信初步尝试(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.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;