实现的效果：

点击“点击”按钮，可以通过Ajax从服务器调过来相应的文档文件，而不需重新加载页面。

通过json可以将调过来的文档（String）转换为相应的json对象，从而对文档中数据进行操作。

具体的js代码：

xmlhttp.onreadystatechange = function(){

                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

                    var x = xmlhttp.responseText;

                    document.getElementById("app").innerHTML = x;

                    console.log(typeof x);

                    var xx = JSON.parse(x);

                    document.getElementById("app1").innerHTML = xx;

                    console.log(typeof xx);

                    var txt = " ";

                    txt += '<br /> ' + xx.id + '<br />' + xx.name + '<br />' ;

                    for(i in xx.age){

                        txt += xx.age[i] + "<br />";

                    }

                    document.getElementById("app2").innerHTML = txt;

                }

            }

分别实现：

服务器响应，获取1.txt文件

将1.txt文件（字符串类型）转换为JSON对象类型

使用json语法将转换后的json对象中的数据取出。（字符串类型的是不能取出来里面数据的，需转换为json才可以，否则显示为undefined）

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <button onclick="func()">点击</button>

    <a href="../文档/1.txt">文档</a>

    <div id="app">我是原内容</div>

    <div id="app1"></div>

    <div id="app2"></div>

    <script>

        var xmlhttp ;

        function func(){

            if(window.XMLHttpRequest){

                xmlhttp = new XMLHttpRequest();

            }

            else{

                xmlhttp = new ActiveXObject();

            }

            xmlhttp.open("get","../文档/1.txt",true);

            xmlhttp.send();

            xmlhttp.onreadystatechange = function(){

                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

                    var x = xmlhttp.responseText;

                    document.getElementById("app").innerHTML = x;

                    console.log(typeof x);

                    var xx = JSON.parse(x);

                    document.getElementById("app1").innerHTML = xx;

                    console.log(typeof xx);

                    var txt = " ";

                    txt += '<br /> ' + xx.id + '<br />' + xx.name + '<br />' ;

                    for(i in xx.age){

                        txt += xx.age[i] + "<br />";

                    }

                    document.getElementById("app2").innerHTML = txt;

                }

            }

        }

    </script>

</body>

</html>

欢迎留言讨论。

Ajax与JSON共同使用的小实例的更多相关文章

  1. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  2. Ajax传递json数据简介和一个需要注意的小问题

    Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...

  3. 快速掌握Ajax-Ajax基础实例（Ajax返回Json在Java中的实现）

    (转)实例二:Ajax返回Json在Java中的实现 转自http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html#2995114 ...

  4. JQuery处理json与ajax返回JSON实例

    一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...

  5. [Javascript,JSON] JQuery处理json与ajax返回JSON实例

    转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...

  6. （转）JQuery处理json与ajax返回JSON实例

    son数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过 ...

  7. JavaScript小实例：拖拽应用（二）

    经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看: ...

  8. Jquery Ajax 和json用法

    向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. 可以通过下面的标记把 jQuery 添加到网页中: <head& ...

  9. Ajax与json

    Ajax Ajax简介 Ajax技术,从用户发送请求到获取响应,当用户界面在整个过程中不会受到干扰,而且我们可以在必要的时候只刷新页面的一小部分,而不用刷新整个页面,即"无刷新"技 ...

随机推荐

  1. JavaScript（二）数据类型（一）

    计算机程序的运行需要对值进行操作,在编程语言中值的类型被称作数据类型,编程语言最基本的特性就是能够支持多种数据类型.当程序需要将值保存起来以备将来使用时,便将其赋值给一个变量.变量是一个值的符号名称, ...

  2. Svn在工作中的实践感悟

    Svn是一款管理项目代码的版本控制系统,是基于集中式的版本控制系统.在工作中,由于实际开发工作的需要,部门是使用Svn来管理日常的项目开发任务.使用这么长时间了,来谈谈对Svn的感悟. 首先,说下工作 ...

  3. swoole多端口监听

    今天测试swoole写webserver实现多端口监听.记录下爬过的坑:关于tcp协议监听触发不到receive!!!!! 首先上服务端代码 class Http { /** * 服务实例 * @va ...

  4. LeetCode算法题-Set Mismatch（Java实现）

    这是悦乐书的第279次更新,第295篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第147题(顺位题号是645).集合S最初包含从1到n的数字. 但不幸的是,由于数据错误 ...

  5. Java程序设计与数据结构导论--读后感

    与我前面所读的<Java7基础教程>相比,此书不适合自学,更适合作为教材使用. 虽然此书完整覆盖了Java的知识点和数据结构的基础问题,并且对每个部分都做了基本说明.但是因为没有深入展开, ...

  6. 【Linux基础】grep命令

    1.简介 grep是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来. 命令格式:grep [option] pattern file 2.常用参数与举例: -e :  使用P ...

  7. Flink Pre-defined Timestamp Extractors / Watermark Emitters（预定义的时间戳提取/水位线发射器）

    https://ci.apache.org/projects/flink/flink-docs-release-1.6/dev/event_timestamp_extractors.html 根据官网 ...

  8. CentOS 6.5 minimal 安装配置VMware tools

    1.登录到系统,切换到root账户 2.配置网络 minimal版本默认不启动网络,所以要自己配置. 配置过程很简单,编辑配置文件 vi /etc/sysconfig/network-script/i ...

  9. Jenkins pipeline：pipeline 使用之语法详解

    一.引言 Jenkins 2.0的到来,pipline进入了视野,jenkins2.0的核心特性. 也是最适合持续交付的feature. 简单的来说,就是把Jenkins1.0版本中,Project中 ...

  10. ubuntu下安装飞鸽传书

    1.从官网下载Linux版本飞鸽传书(http://www.ipmsg.org.cn/) 2.解压后执行 ./QIpmsg 若报错 libstdc++.so.6: version `CXXABI_AR ...