ajax和jaon一：ajax 1：请求状态码readyState 0-4 告诉我们浏览器和服务器进行到哪一步通常根据

一：ajax

1：请求状态码readyState

0-4 告诉我们浏览器和服务器进行到哪一步

         var xhr = new XMLHttpRequest();
         console.log('请求初始化', xhr.readyState);
         xhr.open('get', 'ajax.txt', true)
         xhr.send();
         console.log('服务器以建立', xhr.readyState);
         xhr.onreadystatechange = function () {
             if (xhr.readyState == 2) {
                 console.log('请求已接收', xhr.readyState)
             }
             if (xhr.readyState == 3) {
                 console.log('请求已处理', xhr.readyState)
             }
             if (xhr.readyState == 4) {
                 console.log('请求已完成', xhr.readyState)
             }
            //  获取响应状态码
             console.log(xhr.status);
         }

通常根据请求已完成的状态判断获取值
比如：

           //  使用xhr请求 tet内容 显示在页面上
         var xhr = new XMLHttpRequest();
         xhr.open('get', 'ajax.txt', true);
         xhr.send();
         xhr.onreadystatechange = function () {
        if(xhr.readyState==4){
        类型是字符串
            console.log(typeof xhr.responseText)
            document.write(xhr.responseText)
        }
    }

2：响应状态码

status 为200 表示请求成功 201也表示成功（缓存里获取的） 304 从http请求中的缓存拿来的数据 status 为400 not found 找不到地址（前端）表示地址错了找不到页面 403 表示没有权限
status 为500 表示服务端（后端）代码错误

注：因为通过ajax请求获取的是字符串，无法很好的展示数组等其他类型，所有可以通过json方式解决

二：JSON json是一种轻量型的数据交换格式用来文本格式存储和表式数据

 .json的文件名

语法规范：

json里面可以写[]也可以写{} 但是里面的东西必须用双引号数据用逗号分隔 {}保存对象【】保存数组注：对象里面可以写数组数组里面还可以包含对象可以是数字字符串逻辑值数组对象 null （逻辑值 flag；true或false）

三：获取json

ajax请求获取的是字符串，使用JSON.parse（）方式将字符串转换为对象类型获取

        <body>
<button onclick="getDate()">获取用户信息</button>
<div id="userInfo"></div>
<script>
    function getDate() {
        var userInfo = document.getElementById('userInfo')
        var xhr = new XMLHttpRequest();
        xhr.open('get', 'data.json', true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                /* console.log(typeof xhr.responseText) */
                /* console.log(JSON.parse(xhr.responseText)); */
                // ajax获取的是字符串 所有用JSON.parse（）转为对象获取
                var obj = JSON.parse(xhr.responseText);
                var str='<h1>姓名:'+obj.name+'</h1>'+
                         '<h1>年纪:'+obj.age+'</h1>'+
                         '<h1>城市:'+obj.city+'</h1>'+
                         '<h1>车子:</h1>'; 
                        //  flag==false循环不执行
                        // flag==true 执行循环 
                         if(obj.flag)  { 
                         for(var i=0;i<obj.arrList.length;i++){
                         str+='<h1>'+obj.arrList[i].car+'</h1>'
                         }
                        }
                        userInfo.innerHTML=str;                                  
        }
        }
    }

如果不使用逻辑符号作为判断，直接写循环就可以了

                        var str='<h1>姓名:'+obj.name+'</h1>'+
                         '<h1>年纪:'+obj.age+'</h1>'+
                         '<h1>城市:'+obj.city+'</h1>'+
                         '<h1>车子:</h1>'; 
                       for(var i=0;i<obj.arrList.length;i++){
                         str+='<h1>'+obj.arrList[i].car+'</h1>'
                         }
                        }
                        userInfo.innerHTML=str;

ajax和jaon