码迷,mamicode.com
首页 > Web开发 > 详细

原生ajax请求json数据

时间:2017-06-06 18:55:11      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:cli   send   字符串   activex   urlencode   func   ica   html   change   

<!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 xml=new XMLHttpRequest();
            }else{
                var xml=new ActiveXObject("Microsoft.XMLHTTP");
            };

            //设置发送数据的地址和方法
            xml.open("POST","json.php");

            //设置我们的请求头信息,post方法才写请求头
            xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //发送数据
            xml.send();
            
            //绑定onreadystatechange事件
            xml.onreadystatechange=function(){
                if(xml.readyState==4 && xml.status==200){
                    var data=xml.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>

  

原生ajax请求json数据

标签:cli   send   字符串   activex   urlencode   func   ica   html   change   

原文地址:http://www.cnblogs.com/xiaobaibubai/p/6952522.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!