原生ajax处理json格式数据的实例代码
更新时间：2016年12月25日 17:39:39 投稿：mdxy-dxy
这篇文章主要介绍了原生ajax处理json格式数据的实例代码,需要的朋友可以参考下
原生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数据的请求效果，此代码做了精简。
相关文章
这篇文章主要介绍了echarts学习之legend点击事件解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了JavaScript将XML转成JSON的方法,实例分析了javascript操作XML文件及格式转化的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
本文给大家介绍JavaScript蒙板(model)功能的简单实现代码，创建一个蒙板, 设置蒙板的堆叠顺序保证能将其它元素盖住，感兴趣的朋友可以参考下实现代码2016-08-08
js实现addClass,removeClass,hasClass的函数代码
js实现addClass,removeClass,hasClass的函数代码，需要的朋友可以参考下。2011-07-07
javascript中html字符串转化为jquery dom对象的方法
最近项目需求要开发百度地图相关的一个应用，需要从硬编码的html字符串中提取自己想要的元素以及属性信息，由于在js中或者jq中操作元素节点以及属性都是使用dom对象或者jq对象。下面介绍javascript中html字符串转化为jquery dom对象的方法，需要的朋友可以参考下2015-08-08
在 JavaScript 中,有多种方法可以保留小数点后两位,本文给大家分享比较常用的方法,文末给大家介绍了实现数据格式化保留两位小数的多种方法,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了微信小程序缓存时效性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
在IE下：float属性会影响offsetTop的取值...2006-12-12
实现一个五子棋游戏, 简要分析其原理, 页面并没有很花哨, 原理搞懂了, 后面的就是很轻松的事了,本文给大家介绍了如何用纯JS实现一个五子棋游戏,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下2023-12-12
ionic中的$ionicPlatform.ready事件中的通用设置
$ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件，相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理2017-06-06
最新评论