ajax数据请求3（数组json格式）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>标题</title>

<meta name="keywords" content="">

<meta name="description" content="">

<style>

	*{margin:0; padding:0; list-style:none;}

</style>

</head>

<body>

<button id="btn">请求数据</button>

<ul id="list"></ul>

<script>

	var btn=document.getElementById('btn');

	var list=document.getElementById('list');

	btn.onclick=function (){

		// 1.创建XMLHttpRequest对象

		var xhr=null;

		if (window.XMLHttpRequest) {// 非IE5/6

			xhr=new XMLHttpRequest();//实例对象

		} else{// IE5/6

			xhr=new ActiveXObject('Microsoft.XMLHTTP');

		};

		// 2.打开与服务器的链接

		xhr.open('get','test3.json?_='+new Date().getTime(),true);//生成不一样的url解决缓存问题

		// 3.发送给服务器

		xhr.send(null);//get请求

		// 4.响应就绪

		xhr.onreadystatechange=function (){

			if (xhr.readyState==4) {//请求完成

				if (xhr.status==200) {//ok

					var json=JSON.parse(xhr.responseText);//解析成json对象

					for (var i = 0; i < json.length; i++) {

						list.innerHTML+='<li>姓名:'+json[i].name+'， 性别:'+json[i].sex+'， 年龄:'+json[i].age+'， 成绩:'+json[i].score+'</li>';

					};

				} else{

					alert(xhr.status);

				};

			};

		}

	}

</script>

</body>

</html>

josn对象：　　

[

	{"name":"老王","sex":"女","age":19,"score":66},

	{"name":"老刘","sex":"男","age":22,"score":72},

	{"name":"老李","sex":"女","age":24,"score":85},

	{"name":"老张","sex":"男","age":30,"score":96}

]

　　

ajax数据请求3（数组json格式）的更多相关文章

  1. ajax数据请求2（json格式）

    ajax数据请求2(json格式) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. ajax数据请求5（php格式）

    ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  3. ajax数据请求4（xml格式）

    ajax数据请求4(xml格式): <!doctype html> <html> <head> <meta charset="utf-8" ...

  4. jquery的ajax异步请求接收返回json数据

    http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...

  5. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

  6. JSON(五）——同步请求中使用JSON格式字符串进行交互（不太常见的用法）

    在同步请求中使用JSON格式进行数据交互的场景并不多,同步请求是浏览器直接与服务器进行数据交互的大多是用jsp的标签jstl和el表达式对请求中的数据进行数据的渲染.我也是在一次开发中要从其它服务器提 ...

  7. 微信小程序的ajax数据请求wx.request

    微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...

  8. Ajax --- 数据请求

    下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...

  9. AJAX数据请求

    ajax数据请求需要四个步骤:(请求文本内容) 1.创建XMLHttpRequest对象: 2.打开与服务起的链接: 3.发送给服务器: 4.响应就绪. <!DOCTYPE html> & ...

随机推荐

  1. 在Windows上安装MongoDB

    原文官方文档:https://docs.mongodb.org/v2.6/tutorial/install-mongodb-on-windows/ 基于版本:MongoDB 2.6 概览 通过这个示例 ...

  2. foreach底层机制

    简单例子 直接了解foreach底层有些困难,我们需要从更简单的例子着手.下面上一个简单例子: public class Simple { public static void main(String ...

  3. XSS攻击及预防

    跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者往Web页面里插 ...

  4. 【less和sass的区别，你了解多少？】

    在介绍less和sass的区别之前,我们先来了解一下他们的定义: 一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数 ...

  5. JBoss7安装、测试、配置和启动以及停止，部署

    转:http://www.hongyanliren.com/2014m01/3013.html 内容概要 JBoss系列三主要目的是演示如何部署应用到JBoss7/WildFly,如下图中描述了部署应 ...

  6. 开涛spring3(6.3) - AOP 之 6.3 基于Schema的AOP

    6.3  基于Schema的AOP 基于Schema的AOP从Spring2.0之后通过“aop”命名空间来定义切面.切入点及声明通知. 在Spring配置文件中,所以AOP相关定义必须放在<a ...

  7. R实现地理位置与经纬度相互转换

    本实例要实现目标通过输入城市名或者地名,然后找出其经度纬度值,以及通过可视化展现其线路流向以及周边地图展示 address_list数据: 山西省太原市小店区亲贤北街77号 贵州省贵阳市云岩区书香门第 ...

  8. React学习小结（三）

    一.React数据的传输 1.属性和状态是react中数据传递的载体 2.属性是声明以后不允许被修改的东西 3.属性只能在组件初始化的时候声明并传入组件内部,并且在组件内部通过this.props获取 ...

  9. 2017CUIT校赛-线上赛

    2017Pwnhub杯-CUIT校赛 这是CUIT第十三届校赛啦,也是我参加的第一次校赛. 在被虐到崩溃的过程中也学到了一些东西. 这次比赛是从5.27早上十点打到5.28晚上十点,共36小时,中间睡 ...

  10. Fisher Vector Encoding and Gaussian Mixture Model

    一.背景知识 1. Discriminant  Learning Algorithms(判别式方法) and Generative Learning Algorithms(生成式方法) 现在常见的模式 ...