1. 接受服務器返回的數據并提取使用

JSON版本(返回JSON)

示例

要從后臺取得Genus的相關選項,首先,我們要知道如何對json的數據進行處理:因為json返回的是object,所以經過js里的json解析包就可以把它解析出來,

<script>
var t=new XMLHttpRequest;
    t.onreadystatechange=
    function(){4==this.readyState&&200==this.status&&(
        json_options[0] = JSON.parse(this.responseText),
        extract_info(json_options[0],0),
        test_loading[0] = true,)},
        t.open("GET",urls[0],!0),
        t.withCredentials=!0,
        t.send()
</script>

接著,就可以對這個數據進行提取并放進Genus的下拉菜單里:

function extract_info(object,i){
    for(x in object.results.bindings)
    {
      document.getElementById("Genus").options.add(new Option(object.results.bindings[x].genus.value,object.results.bindings[x].genus.value));
    }
}

當然,在提取的時候,要先看一看這json類型的數據的結構,才能寫出相關的提取語句。

CSV版本(返回CSV)

function searchfunction(){
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 & this.status == 200) 
    {     
        var csv = this.responseText; 
        csvTotable(csv);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

在《Pragmatic Ajax A Web 2.0 Primer 》中對readyState狀態的介紹,摘譯如下:
0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

HTTP狀態碼詳解
200: 請求已成功,請求所希望的響應頭或數據體將隨此響應返回。

404: 請求失敗,請求所希望得到的資源未被在服務器上發現。沒有信息能夠告訴用戶這個狀況到底是暫時的還是永久的。假如服務器知道情況的話,應當使用410狀態碼來告知舊資源因為某些內部的配置機制問題,已經永久的不可用,而且沒有任何可以跳轉的地址。404這個狀態碼被廣泛應用于當服務器不想揭示到底為何請求被拒絕或者沒有其他適合的響應可用的情況下。

500: 服務器遇到了一個未曾預料的狀況,導致了它無法完成對請求的處理。一般來說,這個問題都會在服務器的程序碼出錯時出現。

CSV, JSON, XML 對比

對于返回值csv
返回的值是csv file, 但是type卻是 string。所以我們就可以把它當做string來處理。CSV沒有固定的標準,只要在前后端達成了協議,都可以作為標準來實施。
通用:以空格(/n)表示換行,以,表示分隔。

所以,對返回的string進行切割就可以實現數據的分析和處理。

// tramsform the csv into the table
function csvTotable(arr) {
  document.getElementById("dvCsv").innerHTML="";
  var dvCSV = document.getElementById("dvCsv");
  var table = document.createElement("table");
  var rows = arr.split("\n");
  var header = rows[0].split(",");
  var tr = document.createElement("tr");
  for (var q = 0;q < header.length;q++){
    var th = document.createElement('th');
    th.innerHTML = header[q];
    tr.appendChild(th);
  }
  table.appendChild(tr);
  for (var i = 1; i < rows.length-1; i++) {
      var row = table.insertRow(-1);

//對數據進行切割分析
      var cells = rows[i].split(",");
      for (var j = 0; j < cells.length; j++) {
         var cell = row.insertCell(-1);
         cell.innerHTML = cells[j];
         cell.setAttribute('contentEditable', 'true');
      }
  }

  dvCSV.append(table);
}
}

XML httpRequest

本文中,均使用了異步請求,即發送了數據請求后,在運行其他進程的同時等待返回函數,一旦返回,就開始執行相關的線程。這樣如果這個數據請求出現了問題,那么網頁的其他功能都照常。
具體info關于異步和同步請求,請看這里

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 & this.status == 200) 
    {     
        var csv = this.responseText; 
        csvTotable(csv);
    }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。