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);
    }

最后编辑于：2017.11.25 15:53:00