58、JavaScript JSON对象

json数据传输格式:字符串的一种格式

xml数据传输格式:使用标签和属性形式存储,传的数据种类和数据量多
 
前端传输 后端

数据结构 字符串(运输成本低,传输数据,无法传输结构) 数据结构
 
JSON对象:
 
前端方法:JSON.parse() json格式的字符串=>数据结构

JSON.stringfy() 数据结构=>json字符串
前后端交互流程:

1、 通过ajax获取数据;

2、 分析数据,转成对应的数据结构;

3、 处理数据;

$ajax.js :ajax函数封装

function queryString(obj){
   

    var str=''
    for(let key in obj){


        str+=key+'='+obj[key]+'&'
    }
    return str;
}
function $ajax({

method='get',url,data,success,error}){


    if(data){


        /* 字符串转对象 */
        data=queryString(data)
    }
    /* 1.创建ajax对象 */
    /* 兼容性处理 */
    var xhr=null
    try{


        xhr=new XMLHttpRequest();
    }catch(error){


        xhr=new ActiveXObject('Microsoft.XMLHTTP')
    }
    /* 2.调用open */
    method=method.toLowerCase();
    if(method=='get'&&data){


        url+='?'+data
    }
    xhr.open(method,url,true);
    /* 3.调用send */
    if(method=='get'){


        xhr.send()
    }else{


        /*post 请求头格式 */
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(data)
    }
    /* 4.等待请求数据响应 */
    xhr.onreadystatechange=function(){


        /* 判断响应数据是否请求完成 */
        if(xhr.readyState==4){


            if(xhr.status==200){


                /* 请求成功回调函数 */
                success(xhr.responseText)
            }else{


                /* 请求失败回调函数 */
                error(xhr.status)
            }
        }
    }
}


向后端请求数据:数组
 
向后端请求数据:对象
 
格式化json数据:[在线JSON校验格式化工具(Be JSON)](https://www.bejson.com/)

将结构不清晰的json结构,转成可读性好的json数据

格式化之前:
 
格式化之后:
 
注:前端获取后端数据时,只有后端利用json_encode将数据结构转换成字符串,前端才能获取到

示例:新闻列表