要玩json首先就需要知道一般都数据是怎么处理的：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

        function createXHR(){

            var xhr = null;

            if(window.XMLHttpRequest){

                xhr = new XMLHttpRequest();

            }else if(window.ActiveXObject){

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            return xhr;

        }

        function test1(){

            var xhr = createXHR();

            xhr.open('GET','8.php',true);

            xhr.onreadystatechange = function(){

                if(this.readyState == 4){

                    document.getElementById('lists').innerHTML = this.responseText;

                }

            }

            xhr.send(null);

        }

    </script>

</head>

<body>

    <input type="button" value="更新歌曲" onclick="test1();">

    <div id="lists"></div>

</body>

</html>

<?php

    header("Content-Type:text/html;charset=utf-8");

    foreach( array('夜夜十八摸','人狗情未了主题曲','左手右手慢动作','妹妹坐船头') as $v ){

        echo '<li>'.$v.'</li>';

    }

我们居然知道普通数据是怎么处理的了，那么json数据其实也是很简单的，不过是设计得比较巧妙，看上去好像很有规律，巧就巧在可以让javascript当对象使用而已。。。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        ul{ list-style:none; }

    </style>

    <script>

        function createXHR(){

            var xhr = null;

            if(window.XMLHttpRequest){

                xhr = new XMLHttpRequest();

            }else if(window.ActiveXObject){

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            return xhr;

        }

        function test1(){

            var xhr = createXHR();

            xhr.open('GET','8.php',true);

            xhr.onreadystatechange = function(){

                if(this.readyState == 4){

                    //alert(this.responseText);

                    var mp3 = eval('('+ this.responseText +')');

                    document.getElementById('title').innerHTML = mp3.title;

                    document.getElementById('desc').innerHTML = mp3.desc;

                }

            }

            xhr.send(null);

        }

    </script>

</head>

<body>

    <input type="button" value="更新歌曲" onclick="test1();">

    <ul>

        <li>

            <p id="title"></p>

            <p id="desc"></p>

        </li>

    </ul>

</body>

</html>

<?php

    $mp3 = array('title'=>'夜夜十八摸','desc'=>'男人夜夜都是泪');

    echo json_encode($mp3);

AJAX-----07XMLHttpRequest对象的处理返回的JSON类型数据的更多相关文章

  1. AJAX-----06XMLHttpRequest对象的处理返回的XML类型数据

    我们首先要确保XML文件是否正常执行 如果访问时候报类似  Parse error: syntax error, unexpected 'version' (T_STRING  这样的错误,我们则需要 ...

  2. Struts2+Jquery实现ajax并返回json类型数据

    来源于:http://my.oschina.net/simpleton/blog/139212 摘要 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的 ...

  3. 转载：Struts2+Jquery实现ajax并返回json类型数据

    摘要: 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的数据,并转换为json类型模式数据 3.配置struts.xml文件 4.页面脚本接受并处理数 ...

  4. springMvc 使用ajax上传文件，返回获取的文件数据 附Struts2文件上传

    总结一下 springMvc使用ajax文件上传 首先说明一下,以下代码所解决的问题 :前端通过input file 标签获取文件,通过ajax与后端交互,后端获取文件,读取excel文件内容,返回e ...

  5. javascript解析从服务器返回的json格式数据

    在javascript中我们可以将服务器返回的json格式数据转换成json格式进行使用,如下: 1.服务器返回的json格式数据: 通过response.responseText获得: " ...

  6. json进阶(一)js读取解析JSON类型数据

    js读取解析JSON类型数据 一.什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式,同 ...

  7. C#操作json类型数据

    将对象序列化为 JavaScript 对象表示法 (JSON),并将 JSON 数据反序列化为对象. 此类不能继承. // msdn 例子: namespace SL_DataContractJson ...

  8. MySQL JSON 类型数据操作

    1.Java 中动态扩展字段,会导致数据库表被锁,在MySQL 5.7.8版本之前,因为MySQL不能直接操作JSON类型数据,可以将一个字段设定成varchar类型,里面存放JSON格式数据,这样在 ...

  9. js读取解析JSON类型数据【申明：来源于网络】

    js读取解析JSON类型数据[申明:来源于网络] 地址:http://blog.csdn.net/sunhuaqiang1/article/details/47026841

随机推荐

  1. Bootstrap_Datatable Ajax请求两次问题的解决

    最近一个项目中使用JQuery Datatable,用起来比较方便,但在测试过程中,发现当条件改变时,有时查询结果中的数据不正确. 使用FireBug跟踪时,发现在使用Ajax请求时,点击一次搜索按钮 ...

  2. Flex 页面空白或Error ＃2032

    日前用flex.arcgis做了一个地图显示的页面,本机调试没题目,公布后放到用户办事器上(win2003,ie6)ie6显示页面空白,换搜狗浏览器显示Error #2032,只显示进度条,客户端用i ...

  3. Thymeleaf学习内容

    Thymeleaf Page Layouts Spring MVC and Thymeleaf: how to access data from templates thymeleaf-layout- ...

  4. filter,orderBy等过滤器

    filter用法比较灵活(也增加了较高的复杂度),单独列出. 基本的用法: <input type="text" class="search" ng-mo ...

  5. Js实现MD5加密

    在页面中引用md5.js文件,调用方法为 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&qu ...

  6. 给自定义cell赋值代码

    // //  ViewController.m //  11 - 投资管理 - 李洪强 // //  Created by vic fan on 16/4/8. //  Copyright © 201 ...

  7. Linux_用户/用户组

    一.用户添加 1.  账号添加 [root@hadoop09-linux tmp]# useradd eRrsr 这时/etc/passwd文件中会追加该用户项,并且在/home文件夹下自动生成该属于 ...

  8. JAVA List<> 合并去重

    List<A>和List<B>,A/B中均没有重复的,现在保证A/B合并为C,且C中没有重复的. 参考http://blog.csdn.net/secondjanuary/ar ...

  9. 汇编寄存器(内存访问)基础知识之三---mov指令

     1 内存中字的存储 一个字型数据占2个内存单元,内存里面一个内存单元一个字节(8位),高地址单位放高8位,低地址单元放低8位. 注意:0号是地址单元,1是高地址单元(上是低地址,下面是高地址) (1 ...

  10. super()和this()的区别

    1)调用super()必须写在子类构造方法的第一行,否则编译不通过.每个子类构造方法的第一条语句,都是隐含地调用super(),如果父类没有这种形式的构造函数,那么在编译的时候就会报错. 2)supe ...