美文网首页
4.Ajax的数据格式:JSON

4.Ajax的数据格式:JSON

作者: Ringo_ | 来源:发表于2019-08-27 18:24 被阅读0次

    JSON(JavaScript Object Notation)是一种简单的数据格式,比XML轻巧。JSON是JavaScript的原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
    JSON的规则很简单:对象是一个无序的 “名称/值”对 集合。一个对象以“{”开始,以“}”结束。每个“名称”后跟一个“:”,“名称/值”对之间使用“,”分隔。
    JSON是一种文本字符串,它被存储在responseText属性中。
    为了读取存储在responseText属性中的JSON数据,需要根据JavaScript的eval语句。
    函数eval会把一个字符串当做它的参数,然后这个字符串就会被当做JavaScript代码来执行。因为JSON的字符串就是由JavaScript代码构成的,所以它本身就是可执行的。
    JSON提供了json.js包,使用parseJSON()方法将字符串解析成js对象。

    优点:

    -灵巧
    -不需要发送含有特定内容类型的首部信息

    缺点:

    -语法严禁
    -代码不易读
    -eval函数存在风险

    三种数据格式的对比:

    -若应用程序不需要与其他应用程序共享数据的时候,使用HTML片段来返回数据是最简单的
    -如果数据需要重用,JSON是好的选择,在性能和文件大小方面有优势
    -当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的通用语言

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript">
                window.onload = function(){
                    //http://t.weather.sojson.com/api/weather/city/101030100免费天气接口
                    var request = new XMLHttpRequest();
                    
                    var method = "GET";
                    var url = "http://t.weather.sojson.com/api/weather/city/101030100";
                    
                    request.open(method, url);
                    request.send(null);
                    
                    request.onreadystatechange = function(){
                        if(request.readyState == 4) {
                            if(request.status == 200) {
                                
                                var result = request.responseText;
                                var wobject = eval("("+ result +")");
                                
                                var cityname = wobject.time;
                                var updatetime = wobject.cityInfo.city;
                                var wendu = wobject.data.wendu;
                                
                                document.getElementById("cityname").innerHTML = cityname;
                                document.getElementById("updatetime").innerHTML = updatetime;
                                document.getElementById("wendu").innerHTML = wendu;
                            }
                        }
                    }
                }
            </script>
        </head>
        <body>
            <h2 id="cityname"></h2>
            <p id="updatetime"></p>
            <p id="wendu"></p>
        </body>
    </html>
    

    这个例子是请求一个网络上免费的天气接口,将城市、时间、温度显示在网页中。但是在这里出现了跨域问题:No 'Access-Control-Allow-Origin' header is present on the requested resource,时间问题,我用了最简单粗暴的方法:给浏览器安装allow-control-allow-origi插件,允许浏览器进行跨域。但考虑到在开发中不能使用户自己安装插件,所以这个问题还需要继续研究。

    插件下载地址

    相关文章

      网友评论

          本文标题:4.Ajax的数据格式:JSON

          本文链接:https://www.haomeiwen.com/subject/yvgeectx.html