原生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 相关文章推荐
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
用webAPI实现图片放大镜效果
Nov 23 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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php 如何获取数组第一个值
2013/08/06 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
JQuery中each()的使用方法说明
2010/08/19 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Python WSGI的深入理解
2018/08/01 Python
python 图像平移和旋转的实例
2019/01/10 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
一名女生的自荐信
2013/12/08 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
商超业务员岗位职责
2014/03/12 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
管理人员岗位职责
2015/02/14 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python