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

(0)

相关推荐

  • JQuery的ajax获取数据后的处理总结(html,xml,json)

    1.html处理比较简单,直接输出即可.一般用$("jb51div").innerHTML等即可 2.json格式数据调用 复制代码 代码如下: $.ajax({ url : "/trundle/RawContentAction.getAjaxContent.act", data : "param1=22", dataType : "json",//这里的dataType就是返回回来的数据格式了html,xml,json ca

  • php+ajax+json 详解及实例代码

    php+ajax+json 实例代码 html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <scri

  • jQuery使用ajax方法解析返回的json数据功能示例

    本文实例讲述了jQuery使用ajax方法解析返回的json数据功能.分享给大家供大家参考,具体如下: 最近在用jQuery的ajax方法传递接收json数据时发现一个问题,那就是返回的data数据,有时候可以直接作为json数据使用,可有时候又不行.查了些资料,解释如下: $.ajax({ url: ajaxurl, type: "POST", success: function(data){ //假设返回的json数据里有status及info2个属性 //有时候可以直接ajaxo

  • javascript解析ajax返回的xml和json格式数据实例详解

    本文实例讲述了javascript解析ajax返回的xml和json格式数据.分享给大家供大家参考,具体如下: 写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,单是不同浏览器创建方式不同 (2).请求路径 (3).使用open方法绑定发送请求 (4).使用send() 方法发送请求 (5).获取服务器返回的字符串

  • Ajax的jsonp方式跨域获取数据的简单实例

    jsonp的调用,今天碰到了,正好整理了一下. <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b

  • Spring MVC 中 AJAX请求并返回JSON的示例

    一.以ModelAndView的方式返回 先看下JavaScript代码: /** * 保存-同步(版本控制库) */ function saveSynchronizedVcHorse(obj) { var ss = $("#SynchronizedSelection div"); var cacheSelectAry = new Array() for(var i = 0; i < ss.length; i ++) { //alert(ss.eq(i).html()); //a

  • Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: $.ajax({ url: "/business/findpersons.json", dataType: "json", type:"GET", success: function(doc) { var objs=eval(doc); for (var i = 0; i < objs.length; i++){ var personid=objs[i].personId; var na

  • jQuery基于ajax操作json数据简单示例

    本文实例讲述了jQuery基于ajax操作json数据的方法.分享给大家供大家参考,具体如下: jQuery Ajax 实例演示 jQuery Ajax 的三种格式,在与后台进行数据交互的时候可以是json格式也可以是xml格式,本人建议将数据转化成json格式. Xml与json的比较 1.可读性 JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,很难分出胜负. 2.可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的. 3.

  • ajax与json 获取数据并在前台使用简单实例

    用ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 if (dataType == "SearchCustomer") { int ID; if (Int32.TryParse(CustomerID, out ID)) { string s = GridComputer.GridCustomer.getCustomer(1, 1, ID); if (s == null) { context.Response.ContentType = "text/plain&

  • 用ajax传递json到前台中文出现问号乱码问题的解决办法

    我使用的Springmvc,在controller层传输一个json到前台,后台显示没问题,中文正常显示而到了前台 中文就变成了问号. 后来发现,因为在controller中返回json用了@ResponseBody,而spring源码中@ResponseBody 的实现类发现其默认的编码是 iso-8859-1,而项目用的编码为utf-8,所以传中文会出现乱码. 这里我使用了注解来解决: @RequestMapping(value="/echarts.do", produces =

随机推荐