前端後端通訊初步嘗試(javascript - flask)

坦先生的AI資料室發表於2022-01-06
前端後端JavaScriptFlask

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

相關文章