原生ajax处理json格式数据的实例代码
程序员文章站
2022-04-15 16:25:51
原生ajax处理json格式数据代码实例:
由于jquery的出现,原生ajax使用频率也越来越少,这当然是因为jquery的便利性多导致的。
但是对于原生ajax实现...
原生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数据的请求效果,此代码做了精简。