要玩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. 20145330第五周《Java学习笔记》

    20145330第五周<Java学习笔记> 这一周又是紧张的一周. 语法与继承架构 Java中所有错误都会打包为对象可以尝试try.catch代表错误的对象后做一些处理. 使用try.ca ...

  2. 如何打印出lua里table的内容

    不像开发as3时用fb有强大的断点调试功能,一般lua开发不用什么高级的ide,貌似也没有适合的,就直接用sublime.exvim等文本编辑器,直接编译运行看结果.所以不能很方便的知道变量值,特别是 ...

  3. Java Web include指令和动作的区别

  4. 伪类link,hover,active,visited,focus的区别

    例一: /*css*/a:link{  color: blue;}a:visited{  color: green;}a:hover{  color: red;}a:focus{ color:blac ...

  5. Thinkphp框架感悟（一）

    一.assign() /** * 分析: * 此处是Controller类里面的assign方法,我们一般写的控制器所调用的assign方法就是调的这个. * 而这个方法就干了三件事:1.获取传过来的 ...

  6. SQL 语句调用这个存储过程，生成顺序编码

    一直很讨厌存储过程,没想到今天帮了我大忙啊,或许会因为今天让我慢慢喜欢上存储过程吧,不多说了,切入正题 在使用数据库的时候,难免要在使用过程中进行删除的操作,如果是使用int类型的字段,令其自增长,这 ...

  7. centos 安装haproxy 1.6.3

    yum install libtermcap-devel ncurses-devel libevent-devel readline-devel gcc gcc-c++ pcre pcre-devel ...

  8. cocos2d-x-3.1.1 创建项目

    cocos new 项目名  -p 包名 -l  语言 -d 路径 cmd 输入以下命令 cocos new HelloLua -p com.wcc.hellolua -l lua -d E:\coc ...

  9. IO 磁盘总结

    IO 磁盘 1.读取 首先引用一个using System.IO;引用空间其次 string ste= File.ReadAllText("E:\\bt.txt",Encoding ...

  10. Android课程---布局管理器之相对布局（二）

    这次示例代码是相对布局中兄弟组件之间,设置按钮的位置,难度:*****,一定要注意有同方向和反方向之分: 1.同方向 1)layout_alignLeft 同方向左对齐 2)layout_alignR ...