原生js实现ajax和将数组以列表形式显示出来

来源：互联网发布：网络犯罪的例子编辑：程序博客网时间：2024/05/17 08:14
<!DOCTYPE html><html><head>    <meta charset="utf-8"/>  <script type="text/javascript">function go(arrs){    //将一个字符串解析后放入ul标签中var node=document.getElementById('list').firstChild;node.appendData('\n');for(var j=0;j<arrs.length;j++){    node.appendData('<li>'+arrs[j]+'</li>');        }}var  xmlhttp;function load(){    //点击事件触发跳转       alert("load");       var id = document.getElementById("id").value;       alert(id);window.location.href='success.html?type=add&value='+id;     }function creatajaxHttp() {   //创建ajax对象    try {        // Firefox, Opera 8.0+, Safari        xmlhttp = new XMLHttpRequest();        } catch (e) {            // Internet Explorer            try {                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");            } catch (e) {            try {                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");            } catch (e) {                alert("您的浏览器不支持AJAX！");                return false;            }        }    }}function getDetailListAjax(){  //发起ajax请求     creatajaxHttp();     xmlhttp.onreadystatechange =  callback;     xmlhttp.open("GET","regist.html?type=detaillist",true);     xmlhttp.send();}function innerlist(arrs){   //将数组以列表li形式放入ul中  并添加style   var list = '';   var arr = new Array();   for (j=0 ; j <arrs.length;j++){arr = arrs[j].split('  '); alert(arr[3]);        if (arr[3]=='0'){         list += '<li style='+'"'+'color:green'+'"'+'>'+arrs[j]+'</li>';}else{          list += '<li style='+'"'+'color:red'+'"'+'>'+arrs[j]+'</li>';}         document.getElementById("list").innerHTML=list;    }}function callback(){  //发起ajax完成后的回调函数if (xmlhttp.readyState == 4) {      if (xmlhttp.status == 200) {        var arrs = new Array();arrs = xmlhttp.responseText.split('\n');innerlist(arrs);  }  }} </script></head><body>    <div class="header">        <h1>Login</h1>    </div>    <div class="container">        <div class="item">                <input type="text" id="id"  placeholder="please input id" name="id" /><br/>                <input type="button" onclick="load();"  value="Login"/>        </div>         <input type="button"  onclick="getDetailListAjax();"  value="显示所有信息"/>    </div>     <div id="list">        </div></body></html>
1 0