index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style>
#btn{
width: 120px;
background-color: #ff4500;
color: #ffffff;
line-height: 30px;
cursor: pointer;
text-align: center;
margin-bottom: 10px;
}
#aStrList{
border:1px solid #d0d0d0;
padding: 20px;
}
#aStrList p{
display: block;
height: 30px;
overflow: hidden;
border-bottom: 1px solid #ff4500;
}
#aStrList p span{
float: left;
width: 100px;
line-height: 30px;
}
</style>
</head>
<body>
<div id="btn">Ajax button</div>
<div id="aStrList">
<p>
<span>Lily</span>
<span>female</span>
<span>21</span>
</p>
</div>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn");
var olist = document.getElementById("aStrList"); oBtn.onclick = function(){
ajax("data.php?t="+new Date().getTime(),function(str){//success
var aStr = eval(str);
for(var i=0; i<aStr.length; i++){
var newItem = document.createElement("p");
for(var j=0; j<aStr[i].length; j++){
var newItemSpan = document.createElement("span");
newItemSpan.innerHTML += aStr[i][j];
newItem.appendChild(newItemSpan);
}
olist.appendChild(newItem);
}
},function(failedstr){//failed
olist.innerHTML = failedstr;
})
}
} //ajax
function ajax(url,fnSuccess,fnFailed){
//1.create ajax object
if(window.XMLHttpRequest){
var oAjax = new XMLHttpRequest;
}else{
var oAjax = new ActiveXobject("Microsoft.XMLHTTP");
} //2.connect webservice(method,file,asynchronous)
oAjax.open("GET",url,true); //3.send
oAjax.send(); //4.receive
oAjax.onreadystatechange = function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
fnSuccess(oAjax.responseText);
}else{
if(fnFailed){
fnFailed(oAjax.status);
}
}
}
}
} </script>
</body>
</html>
data.php
[
["Jame","male","23"],
["Lucy","female","18"],
["Jack","male","25"]
]