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

2019-11-19 18:16:31

字体：大中小

来源：转载

供稿：网友

原生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数据的请求效果，此代码做了精简。

上一篇：Bootstrap的modal拖动效果

下一篇：JS异步文件分片断点上传的实现思路