<?php
header("content-type:text/html;charset=utf-8");
echo '{"name":"小明","age":"12","sex":"男"}';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="bt1">点击获取json数据</button>
<script type="text/javascript">
window.onload=function(){
var bt1=document.getElementById("bt1");
bt1.onclick=function(){
//创建ajax对象，写兼容
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
};
//设置发送数据的地址和方法
xhr.open("POST","json.php");
//设置我们的请求头信息,post方法才写请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送数据
xhr.send();
//绑定onreadystatechange事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
var data=xhr.responseText;
//json字符串转换成为json对象 , data=eval("("+data+")");evel不存在兼容性问题，但是会有安全漏洞。
data=JSON.parse(data);
var str="";
str+="姓名:"+data.name+"<br>";
str+="年龄:"+data.age+"<br>";
str+="性别:"+data.sex;
document.body.innerHTML=str;
};
};
};
};
</script>
</body>
</html>
