原生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 相关文章推荐
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Python制作数据导入导出工具
2015/07/31 Python
Python用模块pytz来转换时区
2016/08/19 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
Python datetime模块使用方法小结
2020/06/18 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
介绍一下gcc特性
2015/10/31 面试题
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
合作协议书怎么写
2014/04/18 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
元旦晚会开场白
2015/05/29 职场文书
Python机器学习之逻辑回归
2021/05/11 Python