数据类型(返回数据的处理)

服务器返回给咱们的真正数据
XML、HTML、JSON
- JSON的写法
- Eval解析JSON的时候需要注意的地方
- JSON.parse() : 字符串解析成对象

json_encode:

$arr1 = array('leo','momo','zhangsen');
echo json_encode($arr1);

得到如下：

["leo","momo","zhangsen"]

$arr2 = array('username'=>'leo','age'=>32);
echo json_encode($arr2);

得到如下：

{"username":"leo","age":32}

IE7及以下浏览器不支持JSON对象
↓↓↓
json2.js 下载

stringify():把一个对象转换成字符串

  var arr = [1,2,3]; 
  alert(arr); //1,2,3
  alert( JSON.stringify(arr) ); //[1,2,3]
  alert( typeof JSON.stringify(arr) ); //string
  var j = {left:100}; 
  alert( JSON.stringify(j) );  //{"left":100}

parse():把字符串转成对应的对象

  var s1 = '[100,200,300]';
  var a1 = JSON.parse(s1);
  alert(a1); //100,200,300
  alert( a1[1] ); //200

  var s2 = '{left:100}';
  var a2 = JSON.parse(s2); //报错,如下图
  alert(a2.left);

13-parse01.gif

//严格意义上的JSON要键要加双引号
  var s3 = '{"left":100}';
  var a3 = JSON.parse(s3);
  alert(a3.left); //100

回到ajax--获取数据的处理：

根据后端返回的值做不同的处理

实例：从某个后端接口(getNews.php)去取数据，把取出来的数据根据不同的特性进行处理

getNews.php:

<?php
header('content-type:text/html;charset=utf-8');
error_reporting(0);

$news = array(
  array('title'=>'德国女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2017-5-11'),
  array('title'=>'中日驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2017-5-11'),
  array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2017-5-11'),
  array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2017-5-11'),
  array('title'=>'习近平：嫦娥三号是货真价实的中国创造','date'=>'2017-5-11'),
  array('title'=>'中国长达13年游戏机禁令正式解除 外企可进入','date'=>'2017-5-11'),
  array('title'=>'70种证件伴中国人一生:领养老金要办生存证明','date'=>'2017-5-11'),
  array('title'=>'德国女总理默克尔滑雪时摔倒 骨盆断裂','date'=>'2017-5-11'),
  array('title'=>'中日驻英外交官撰文互称对方国家为"伏地魔"','date'=>'2017-5-11'),
  array('title'=>'安倍:望与中国领导人会面 中方:你关闭了大门','date'=>'2017-5-11'),
  array('title'=>'揭秘台湾驻港间谍网运作 湖北宜昌副市长被查','date'=>'2017-5-11'),
);

echo json_encode($news);

14.ajax-获取数据的处理.html

<body>
    <input type="button" value="按钮" id="btn" />
    <ul id="ul1"></ul>
</body>

<script>
window.onload = function() {
    
    var oBtn = document.getElementById('btn');
    
    oBtn.onclick = function() {
        
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        xhr.open('get','getNews.php?',true);
        xhr.send();
        
        xhr.onreadystatechange = function() {
            
            if ( xhr.readyState == 4 && xhr.status == 200) {
                // alert(typeof xhr.responseText); //*string*
                // alert( xhr.responseText ); 
                
                var data = JSON.parse( xhr.responseText );
                // console.log(data[0]);
                var oUl = document.getElementById('ul1');

                var html = '';
                for(var i=0; i<data.length;i++){
                    html += '<li><a href="">'+data[i].title+
'</a> [<span>'+data[i].date+'</span>]</li>'
                }

                oUl.innerHTML = html;
                
            }
            
        }
                
    }
}
</script>

效果图如下：

14-ajax获取数据.gif

函数封装：

ajax.js:

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    if (method == 'get' && data) {
        url += '?' + data;
    }
    
    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    
    xhr.onreadystatechange = function() {
        
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);
            } else {
                alert('出错了,Err：' + xhr.status);
            }
        }
        
    }
}

ajax.html

<body>
    <input type="button" value="按钮" id="btn" />
    <ul id="ul1"></ul>
</body>

<script>
window.onload = function() {
    
    var oBtn = document.getElementById('btn');
    
    
    oBtn.onclick = function() {
        
        /*ajax({
            url :   'getNews.php',
            success : function(data) {
                //...
            }
        });*/
        
        ajax('get','getNews.php','',function(data) {
            var data = JSON.parse( data );
                
            var oUl = document.getElementById('ul1');
            var html = '';
            for (var i=0; i<data.length; i++) {
                html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
            }
            oUl.innerHTML = html;
        });
        
        setInterval(function() {
            ajax('get','getNews.php','',function(data) {
                var data = JSON.parse( data );
                    
                var oUl = document.getElementById('ul1');
                var html = '';
                for (var i=0; i<data.length; i++) {
                    html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
                }
                oUl.innerHTML = html;
            });
        }, 1000);
        
    }
}
</script>