ajax请求的学习

1.数据文件的内容格式如下：

 

{ "rows":[
   {"LoginName":"1","name":"name1","ID":"1","CP":"CP","DM":"DM"},
   {"LoginName":"2","name":"name1","ID":"2","CP":"CP","DM":"DM"},
   {"LoginName":"3","name":"name1","ID":"3","CP":"CP","DM":"DM"},
   {"LoginName":"4","name":"name1","ID":"4","CP":"CP","DM":"DM"},
   {"LoginName":"5","name":"name1","ID":"5","CP":"CP","DM":"DM"},
   {"LoginName":"6","name":"name1","ID":"6","CP":"CP","DM":"DM"},
   {"LoginName":"7","name":"name1","ID":"7","CP":"CP","DM":"DM"},
   {"LoginName":"8","name":"name1","ID":"8","CP":"CP","DM":"DM"},
   {"LoginName":"9","name":"name1","ID":"9","CP":"CP","DM":"DM"},
   {"LoginName":"10","name":"name1","ID":"10","CP":"CP","DM":"DM"},
   {"LoginName":"11","name":"name1","ID":"11","CP":"CP","DM":"DM"},
   {"LoginName":"12","name":"name1","ID":"12","CP":"CP","DM":"DM"},
   {"LoginName":"13","name":"name1","ID":"13","CP":"CP","DM":"DM"},
   {"LoginName":"14","name":"name1","ID":"14","CP":"CP","DM":"DM"},
   {"LoginName":"15","name":"name1","ID":"15","CP":"CP","DM":"DM"}
   ]
}

2.初始化并请求Ajax的函数
 function loadDataFromTXT() {

  if (window.XMLHttpRequest) {
   xmlHttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {

   try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e) {

   }
  }
  xmlHttp.onreadystatechange = function() {

   if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    //document.getElementById("myDiv").innerHTML = xmlHttp.responseText;

//根据数据格式生成对象对列表
    var userlist = eval('(' + xmlHttp.responseText + ')');
    //createTable(userlist);

//将对象列表的数据的放到表格中去
    dataList(userlist);

   }
  }
  xmlHttp.open("GET", "test.txt", true);
  xmlHttp.send();
 }

3.将数据放到div去显示

function dataList(userlist) {

  var str1 = "<table id=\"datalist\"><tr style=\"background-color: #c6dbf3\"><th><input type=\"checkbox\" value=\"selected\" name=\"selected\"></th><th>账号</th><th>名称</th><th>工号</th><th>所需单位</th><th>部门</th><th>---++</th></tr>";
  var count = userlist.rows.length;

  var str2 = "";
  for ( var i = 0; i < count; i++) {
   str2 += "<tr class=\"mousecss\" id=\"str"+i+"\"><td><input type=\"checkbox\" value=\"selected\" name=\"selected\" value=\""+i+"\"></td><td>"
     + userlist.rows[i].LoginName
     + "</td><td>"
     + userlist.rows[i].name
     + "</td><td>"
     + userlist.rows[i].ID
     + "</td><td>"
     + userlist.rows[i].CP
     + "</td><td>"
     + userlist.rows[i].DM
     + "</td><td><a onclick=\"deleterow('str"
     + i
     + "')\">-</a><a onclick=\"addrow('str"
     + i
     + "')\">+</a></td></tr>";
  }
  var str3 = "</table>";
  var str = str1 + str2 + str3;
  
  alert(str);
  var div = document.getElementById('data');
  
  div.innerHTML = str;
  //$("data").innerHTML = str;
 }

4.最终的显示格式

1name11CPDM-+2name12CPDM-+3name13CPDM-+4name14CPDM-+5name15CPDM-+6name16CPDM-+7name17CPDM-+8name18CPDM-+9name19CPDM-+10name110CPDM-+11name111CPDM-+12name112CPDM-+13name113CPDM-+14name114CPDM-+15name115CPDM-+