前端后端通信初步嘗試(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是主要對象
XMLHttpRequest對象的主要方法有：

• abort() 取消當前請求
• open() 創建新的請求
• setRequestHeader() 單獨制定請求的某個HTTP頭
• send() 發送請求並接收回應
• getAllResponseHeaders() 獲取響應的所有HTTP頭
• getRespnseHeader() 獲取特定的響應HTTP頭

XMLHttpRequest對象的主要屬性有：

• 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創建的一個本地服務URL地址
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.readyState為完成(4)時，才應當進行操作。
另外，http狀態碼(xmlhttp.status)也經常參與狀態跟蹤，xmlhttp.status == 200 為成功，其余為各種錯誤。
關於xmlhttp.status的其他狀態碼可參考這里

事件處理函數一個簡單例子

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;