ajax success 中json获取 ajax读取json数据

1，了解json, xml数据格式：

xml数据格式是利用标签对数据就行组装，标签必须成对出现，且必须以<?xml version="1.0" encoding="utf-8" ?>开头 但是因为标签必须成对出现导致文件体积大，标签数量太多，实在是影响传输效率，因此使用频率不高，下面是xml数据格式的例子

<?xml version="1.0" encoding="utf-8"?>张三30男李四25男王五27女

json数据格式他类似于js对象的组装方式，具有体积小，传输快的特点，这里我们拿常见的数据格式对象数组的形式来举例

[　　{　　　　"title":"Js学习",　　　　"author":["张三","李四"]　　},　　{　　　　"title":"ajax学习",　　　　"author":["王五","赵六"]　　}]

2，Ajax如何对这俩种数据进行解析

• 首先弄清楚ajax使用步骤(4步,get,还是post 检测数据是什么，数据格式是什么，这要看后端人员给我们的接口文档，文档内会有详细的说明在，这里我也嫖了一份简单的接口文档供大家学习了解)

get方法：

var xhr = null;             if (window.XMLHttpRequest) {              xhr = new XMLHttpRequest();             } else {            xhr = new ActiveXObject("Microsoft.XMLHTTP");              } //1，创建对象 并对IE6做兼容性处理             xhr.open("get", 'check.php?uname=' + uname, true); //2，准备发送，true代表异步             //模拟地址栏请求，得到check.php页面的数据             xhr.send(null); //3，开始发送             xhr.onreadystatechange = function() {//4，回调函数                    if (xhr.readyState == 4) { //xhr状态正常                        if (xhr.status == 200) { //服务器状态正常                            var result = xhr.responseText;                            console.log(result);                        }                    }                };

post方法 ：

var xhr = null;             if (window.XMLHttpRequest) {              xhr = new XMLHttpRequest();             } else {            xhr = new ActiveXObject("Microsoft.XMLHTTP");              } //1，创建对象 并对IE6做兼容性处理             xhr.open("post", 'check.php', true); //2，准备发送，true代表异步             //模拟地址栏请求，得到check.php页面的数据    xhr.setRequestHeader("content-Type", 'application/x-www-form-urlencoded');              var param = 'uname=' + uname;    //注意uname一点都不能动，这是接口文档定义好的，服务器根据这个来判别用户输入是否合法             xhr.send(param); //3，开始发送             xhr.onreadystatechange = function() {//4，回调函数                    if (xhr.readyState == 4) { //xhr状态正常                        if (xhr.status == 200) { //服务器状态正常                            var result = xhr.responseText;                            console.log(result);                        }                    }                };

3,Ajax对xml, json数据解析

对xml数据解析渲染

//getBooks.php<?php header("Content-Type:text/xml;");//这里设置响应头信息，保证浏览器可以把相应内容识别为xml文件类型     $arr = array();    $arr[0] = array("name"=>"三国演义","author"=>"罗贯中","desc"=>"一个杀伐纷争的年代");    $arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108条好汉的故事");    $arr[2] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"佛教与道教斗争");    $arr[3] = array("name"=>"红楼梦","author"=>"曹雪芹","desc"=>"一个封建王朝的缩影"); ?><?xml version="1.0" encoding="utf-8" ?>    <?php foreach ($arr as $key => $value) {    ?>    <?php echo $value['name'] ?>        <?php echo $value['author'] ?>        <?php echo $value['desc'] ?>    <?php }     ?>

 

这样就将xml格式的数据渲染到页面上了

• 对json数据解析渲染

//getStudent.php<?php $arr = array();    $arr[0] = array("name"=>"张三","age"=>"19","sex"=>"男");    $arr[1] = array("name"=>"李四","age"=>"23","sex"=>"男");    $arr[2] = array("name"=>"王五","age"=>"30","sex"=>"女");     echo json_encode($arr); ?>