<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>原生javascript和ajax的操作</title>
    <script type="text/javascript">
        function createXHR(){
            if(typeof XMLHttpRequest!="undefined"){
                return new XMLHttpRequest();//非IE浏览器获取xhr对象的方法
            }else if(typeof ActiveXObject!="undefined"){
                if(typeof arguments.callee.activeXString!="string"){
                    var version=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
                    for(var i=0;i<version.length;i++){
                        try{
                            var xhr=new ActiveXObject(version[i]);
                            arguments.callee.activeXString=version[i];
                            return xhr;//IE浏览器获取xhr对象的方法
                        }catch(ex){
                            //break;
                        }
                    }
                }
                return new ActiveXObject(arguments.callee.activeXString);
            }else{
                throw new Error("no xhr!!");
            }
        }

var xhr=new createXHR();
        function readyFun(){
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){//判断数据是否已经请求完毕，返回4表示数据已经全部返回
                    if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                        //操作json数据的方法1：
                        //var data=eval("("+xhr.responseText+")");//xhr.responseText的值为json数据的所有数据（这里是字符串，需要eval将数据进行转化为对象进行json字段的操作,这步非常关键!!!!）
                        
                        //操作json数据的方法2；
                        var data=JSON.parse(xhr.responseText);//获取服务器上的json数据，转化为javascript数值对json数据的字段进行操作

var html="";
                        for(var i=0;i<data.pic.length;i++){
                            html+="<img src="+data.pic[i]+" alt='pic'>";
                        }
                        var picList=document.getElementById("picList");
                        var div=document.createElement("div");
                        div.innerHTML=html;
                        picList.appendChild(div);
                    }else{
                        alert("Request was unsuccessfull:"+xhr.status);
                    }
                }
            };
            xhr.open("get","waterfall.json",false);
            xhr.send(null);
        }
    </script>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        img{border: 0 none;display: block;}
        #picList img{float: left;}
    </style>
</head>
<body οnlοad="readyFun();">
<div id="picList"></div>
</body>
</html>

注意几点：这个数据waterfall.json是临时模拟json数据，自己可以按照json格式模拟，我这里只是通过它来理解原生javascript下ajax和json的综合应用，在原生javascript下的ajax怎么去获取json数据等等；

转载于:https://www.cnblogs.com/Timac/archive/2012/11/12/2766273.html

ajax和json的综合应用相关推荐

  1. 07【Listener、Ajax、Json】

    文章目录 07[Listener.Ajax.Json] 一.监听器 1.1 监听器的类别 1.1.1 监听域对象 1.1.2 监听属性 1.3.3 监听session对象状态 1.2 监听案例 1.2 ...

  2. AngularJS学习笔记（3）——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  3. ajax请求json和xml数据及对json和xml格式数据的解析

    ajax请求json和xml数据及对json和xml格式数据的解析 一.ajax请求json数据并解析 ajax的写法: json数据解析: 请求json经常出现的跨域报错: 二.ajax请求xml数 ...

  4. api ajax解析json数据库,api ajax解析json数据库

    api ajax解析json数据库 内容精选 换一换 华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务 ...

  5. boke例子： freermarker：在使用ajax传递json数据的时候多出冒号

    boke例子: freermarker:在使用ajax传递json数据的时候多出冒号 json数据是用JSON.stringify()格式化的数据,然后用ajax传递,发现数据多出一个冒号:, 后来度 ...

  6. id jquery 拼接_jquery拼接ajax的json和字符串的方法

    整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,本文主要介绍了jquery拼接ajax 的json和字符串拼接的方法,这里整理了详细的代码,有需要的小伙伴可以参考下. jQ ...

  7. jQuery、ajax添加Json数据

    需求说明: 简单的演示ajax提交json数据. 代码说明: ajax在传输数据的时候基本格式大都是固定的,只需要修改传输类型即可.下面介绍基本的参数提交. 步骤一:建立一个html或者jsp页面,引 ...

  8. Jquery中使用ajax传json参数并从SpringBoot后台Controller返回消息

    场景 前端通过ajax提交json格式的数据,后台接受到实现具体的业务后 返回给前端消息提示. 实现 html页面代码 <button id="printBtn" class ...

  9. Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

最新文章

  1. python用海伦公式求面积_用带参数的宏定义，通过海伦公式求三角形的面积
  2. 数组显示php,显示图像数组 - PHP
  3. centos安装包选择--liveCD、liveDVD、bin-DVD、netinstall和minimal
  4. 开机后能解锁吗_黔隆科技刷机教程360奇酷Q5PLUS(1509A00)忘记密码刷机解锁降级救砖解屏幕锁账户锁教程...
  5. java中的Atomic类
  6. SQLite的局限性
  7. 前端技术-调试工具（上）
  8. keil5用jlink不到芯片_洛达芯片检测
  9. LeetCode 1765. 地图中的最高点（BFS）
  10. Ubuntu 安装调整工具移动 Launcher 启动器位置
  11. Oracle 配置监听和本地网络服务
  12. python-format格式化专题介绍1909
  13. Python画图实战之画K线图【附带自动下载股票数据】
  14. Android自带硬解码解码类型说明MediaCodec使用必看
  15. js base64编码_使用psd.js将PSD转成SVG -- 基础篇（文字amp;图片）
  16. 安卓手机实现wifi中继、WiFi信号增强
  17. H5倍速播放视频播放器（2x/1.5x/0.5x播放）
  18. win7系统如何添加环境变量
  19. 二、电容屏原理（1）
  20. SQL学习之使用order by 按照指定顺序排序或自定义顺序排序

热门文章

  1. GIT常用快捷键配置
  2. 虚拟机服务器被攻击,Linux服务器被攻击用来挖矿了
  3. 蔬菜名称大全500种_市场上常见47种室外健身器材型号及名称大全
  4. python sklearn svm 权重_sklearn svm基本使用
  5. ug快捷键命令大全_UG命令大全及快捷键的用法用处说明
  6. 一篇总结得超全的前端进阶文章！入门、技巧、方法、书籍、网站...一步到位！
  7. 下列哪个适合做链栈_外贸企业如何做Google推广？自然排名和付费广告哪个更适合你？...
  8. linux如何查看jupyter日志_在Linux服务器上运行Jupyter notebook server教程
  9. css 修改文字基准线_css外部样式表怎么写
  10. mysql导入xml 工具下载_XmlToOracle(XML导入Oracle工具)下载_XmlToOracle(XML导入Oracle工具) 版本： V2.0官方版_魅蓝下载...