首先建立json.txt文件

{

"programmers": [

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },

{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },

{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }

],

"authors": [

{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },

{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },

{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }

],

"musicians": [

{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },

{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }

]

}

通过异步调用，来读取json数据

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<script type="text/javascript">

var xmlHttp;

function createXMLHttpRequest()

{

    if(window.ActiveXObject)

    {

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

    }

    else if(window.XMLHttpRequest)

    {

        xmlHttp = new XMLHttpRequest();

    }

}

function startRequest()

{

    createXMLHttpRequest();

    try

    {

        xmlHttp.onreadystatechange = handleStateChange;

        xmlHttp.open("GET", "Json.txt", true);

        xmlHttp.send(null);

    }

    catch(exception)

    {

        alert("xmlHttp Fail");

    }

}

function handleStateChange()

{

    if(xmlHttp.readyState == 4)

    {

        if (xmlHttp.status == 200 || xmlHttp.status == 0)

        {

            var result = xmlHttp.responseText;

            var json = eval("(" + result + ")");

            alert(json.programmers[0].firstName);//读取json数据

            //alert(json.sex);

        }

    }

}

</script>

</head>

<body>

    <div>

        <input type="button" value="AjaxTest" onclick="startRequest();" />

    </div>

</body>

</html>

ajax读取json数据的更多相关文章

  1. js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）

    js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...

  2. ajax(读取json数据)

    ajax知识点: 语法:$.ajax(路由,请求方式,返回的数据类型,数据参数,回调函数) url: "路由", type:"",默认get请求(get或pos ...

  3. js读取json数据（php传值给js）

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  4. 通过JQuery的$.ajax()把 json 数据 post 给 PHP

    通过JQuery的$.ajax()把 json 数据 post 给 PHP时的几种情况: 无法在PHP中通过$_POST 以及 $_REQUEST 获取json数据,即 $json = $_POST[ ...

  5. 关于跨域读取json数据我的理解

    这两天在做关于读取json数据的插件,想用getJSON读取数据: $.getJSON(http://www.xxxx.com/Titles.js, function (data) { console ...

  6. JS-利用ajax获取json数据，并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  7. json数据的格式，JavaScript、jQuery读取json数据

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...

  8. ajax 发送json数据时为什么需要设置contentType: "application/json”

    1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别? contentType: "application/j ...

  9. ajax发送json数据时为什么需要设置contentType: "application/json”

    1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别?contentType: "application/js ...

随机推荐

  1. GSM、3G、LTE、4G

    3GPP(The 3rd Generation Partnership Project)3GPP的目标是实现由2G网络到3G网络的平滑过渡,保证未来技术的后向兼容性,支持轻松建网及系统间的漫游和兼容性 ...

  2. iOS开发--iOS及Mac开源项目和学习资料

    文/零距离仰望星空(简书作者)原文链接:http://www.jianshu.com/p/f6cdbc8192ba著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文出处:codecl ...

  3. Spring之在客户端访问RESTful业务

    Spring之在客户端访问RESTful业务 RestTemplate 是客户端访问RESTful业务的核心类.在概念上与Spring其他的模板类相似,比如JdbcTemplate和JmsTempla ...

  4. Linux系统管道命令符

    管道命令符“|”的作用是将前一个命令的标准输出作为后一个命令的标准输入,格式为“命令A | 命令B” 以下实例中,通过grep命令搜索关键字“/sbin/nologin”在/etc/passwd中查找 ...

  5. Database Corruption ->> Fix Database In Suspect State

    昨天在工作中遇到一个情况,就是Development环境中的某台服务器上的某个数据库进入了Suspect状态.以前看书倒是知道说这个状态,不过实际工作当中从来没有遇到过.那么一些背景情况是这样的. 环 ...

  6. 转：Maven介绍(创建工程项目以及下载所需要的jar包)

    http://blog.csdn.net/guanghua2009/article/details/6644111 目前我还不太会用maven,慢慢学吧 目前就是用来下载自己要的jar包,先根据这篇转 ...

  7. WebMvcConfigurerAdapter

    spring Boot 默认的处理方式就已经足够了,默认情况下Spring Boot 使用WebMvcAutoConfiguration中配置的各种属性. 建议使用Spring Boot 默认处理方式 ...

  8. Android 获取最近应用的缩略图

    最近有项需求是获取应用的缩略,用于在动画时显示.因此就对此块知识简要了解了一下. 在android中获取视频文件的缩略图有三种方法: 1.从媒体库中查询 新视频增加后需要SDCard重新扫描才能给新增 ...

  9. flex 4 写皮肤

    皮肤容器:s:SparkSkin 主机组件:  [HostComponent("spark.components.Panel")] 绘制: <s:Group left=&qu ...

  10. 《OD学Oozie》20160807Oozie

    一.引入 MapReduce Job Hive 脚本任务 同一个业务:先后.定时调度 工作流: 定义工作流程 activity jbpm oozie: 大数据工作流定义与调度框架 专门定义与调度Map ...