通过ajax获得json并解析

一、在开始前做一些说明

虽然json方式和xml方式可以达到相同的效果，但是在现在json使用更多一些，因为大多数的语言都有对应的json的接口，并且json比xml更简单一点。介绍一些json的函数。

JSON.parse(字符串)可以把JSON字符串转化为对象
JSON.stringify(对象)可以把对象转化为JSON字符串

var JSONo1='{"uname":"李明","age":"20","gender":"male"}';    //必须是字符串，且里面的内容必须用双引号（单引号不行）
            console.log(JSONo1);                    //字符串
            console.log(JSON.parse(JSONo1));        //这个是一个对象
            console.log(JSON.stringify(JSON.parse(JSONo1)));     //字符串
            var JSONo2='["soccer","basketball"]';
            console.log(JSONo2);                    //字符串
            console.log(JSON.parse(JSONo2));        //数组
            console.log(JSON.stringify(JSON.parse(JSONo2)));    //字符串
var JSONo3='{"uname":"李明","age":"20","gender":"male","hobbies":["soccer","basketball","baseball"]}';
            console.log(JSONo3);                    //字符串
            console.log(JSON.parse(JSONo3));        //对象
            console.log(JSON.stringify(JSON.parse(JSONo3)));//字符串
            var JSONo4='["soccer","basketball",{"uname":"李明","age":"20","gender":"male"}]';
            console.log(JSONo4);                //字符串
            console.log(JSON.parse(JSONo4));    //数组
            console.log(JSON.stringify(JSON.parse(JSONo4)));//字符串
            var dom=$("<div>你好</div>")        //把字符串转为jQuery对象

二、具体实现

json文件

{ 
  "uname":"李明",
  "age":"20",
  "gender":"male",
  "hobbies":["soccer","basketball","baseball"]
}

php文件

<?php
    header('Content-type:application/json','charset=utf-8');    //告诉浏览器传回来的数据是json类型
    $json=file_get_contents('./aaa.json');        //读取json文件
    echo $json;                                    //输出字符串

html文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <button>点我</button>
        <script>
            var btn=document.querySelector('button');
            btn.addEventListener('click',function () { 
                var xhr=new XMLHttpRequest();        //创建异步对象
                xhr.open('get','test03.php');
                xhr.send(null);
                xhr.addEventListener('readystatechange',function () { 
                    if (xhr.status==200&&xhr.readyState==4){ 
                        var o=JSON.parse(xhr.responseText);        //转化为对象
                        console.log(o.uname);        //使用对象的方法去得到结果
                        console.log(o['age']);
                        console.log(o.gender);
                        console.log(o.hobbies);
                    }
                })
            });
        </script>
    </body>
</html>