原生ajax处理json格式数据的实例代码


Posted in Javascript onDecember 25, 2016

原生ajax处理json格式数据代码实例:
由于jQuery的出现,原生ajax使用频率也越来越少,这当然是因为jQuery的便利性多导致的。
但是对于原生ajax实现原理的知晓也是非常重要的,下面就改造本板块的一个使用jquery ajax实现的代码。

代码实例如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>三水点靠木</title>
<script>
function loadXMLDoc() {
 var xmlhttp;
 if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
 }
 else {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange = function () {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
   var jsonStr = xmlhttp.responseText;
   var jsonObj = JSON.parse(jsonStr);
   var data = jsonObj.table;
   var odiv = document.getElementById("show");
   var str = "";
   for (var index = 0; index < data.length; index++) {
    str = str + data[index]["ID"]
    + "," + data[index]["username"]
    + "," + data[index]["address"]
    + "," + data[index]["age"]
    + "," + data[index]["score"]+"<br/>";
   }
   odiv.innerHTML = str;
  }
 }
 xmlhttp.open("GET", "demo/ajax/net/Handler.ashx", true);
 xmlhttp.send();
}
window.onload = function () {
 loadXMLDoc();
}
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>

以上代码演示了原生ajax对于json数据的请求效果,此代码做了精简。

Javascript 相关文章推荐
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 #Javascript
BootStrop前端框架入门教程详解
Dec 25 #Javascript
半个小时学json(json传递示例)
Dec 25 #Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 #Javascript
JS如何生成一个不重复的ID的函数
Dec 25 #Javascript
js Canvas实现的日历时钟案例分享
Dec 25 #Javascript
ES6概念 Symbol toString()方法
Dec 25 #Javascript
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
webpack打包多页面的方法
2018/11/30 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
vue使用websocket的方法实例分析
2019/06/22 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
2020/05/25 Javascript
Python自动扫雷实现方法
2015/07/25 Python
python opencv实现运动检测
2018/07/10 Python
详解Python中的type和object
2018/08/15 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python爬虫---requests库的用法详解
2020/09/28 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
2014自主招生自荐信策略
2014/01/27 职场文书
财产公证书样本
2014/04/04 职场文书
高中同学会活动方案
2014/08/14 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
python删除csv文件的行列
2021/04/06 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android