原生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读取ASP设定的COOKIE
Nov 24 Javascript
javascript new一个对象的实质
Jan 07 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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 UTF8 文件的签名问题
2009/10/30 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
纯php生成随机密码
2015/10/30 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
使用Python编写vim插件的简单示例
2015/04/17 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
演讲稿开场白
2014/01/13 职场文书
食品安全工作实施方案
2014/03/26 职场文书
2015元旦标语横幅
2014/12/09 职场文书
体育个人工作总结
2015/02/09 职场文书
党委工作总结2015
2015/04/27 职场文书
刑事法律意见书
2015/06/04 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
python字典的元素访问实例详解
2021/07/21 Python
MySQL时区造成时差问题
2022/04/13 MySQL