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. Archive for required library:xxxxx/spring-beans-3.2.4.RELEASE.jar in project XXXXX cannot be read or is not a valid ZIP file

    今天在导入maven项目的时候在problems视图中报错: Archive for required library:xxxxx/spring-beans-3.2.4.RELEASE.jar in ...

  2. vue之nextTick全面解析

    vue的第一篇文章,介绍一下简单的nextTick方法的实现原理 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框 ...

  3. ASP.NET Gridview数据库绑定支持增删改，记得要完整实现

    1.错误情况 /WebSite3"应用程序中的服务器错误. 指定的参数已超出有效值的范围. 参数名: index 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息, ...

  4. 互联网金融P2P主业务场景自动化测试

            互联网金融P2P行业,近三年来发展迅速,如火如荼.         据不完全统计,全国有3000+的企业.  “互联网+”企业,几乎每天都会碰到一些奇奇怪怪的bug,作为在互联网企业工 ...

  5. bzoj 4765 普通计算姬（树状数组 + 分块）

    http://www.lydsy.com/JudgeOnline/problem.php?id=4765 很nice的一道题啊(可能是因为卡了n久终于做出来了 题意就是给你一棵带点权的有根树,sum( ...

  6. Web攻防系列教程之跨站脚本攻击和防范技巧详解

    摘要:XSS跨站脚本攻击一直都被认为是客户端Web安全中最主流的攻击方式.因为Web环境的复杂性以及XSS跨站脚本攻击的多变性,使得该类型攻击很 难彻底解决.那么,XSS跨站脚本攻击具体攻击行为是什么 ...

  7. springboot 1.5.2 thymeleaf 添加templates 静态资源访问路径

    从velocity 模板切换到thymeleaf 后, 默认模板位置为templates , 有时候静态资源方在该目录下会出现访问404错误 解决办法: application.properties ...

  8. 跨域请求，jsonp

    其实跨域请求,只需要在请求的url后面加上callback=?即可. 提供以下两种获取跨域的ajax的写法,都是基于jQuery.都已经成功使用,兼容做到ie7,(ie6未测试);案例地址来自豆瓣开放 ...

  9. Nmap绕过防火墙&脚本的使用

    Nmap是用于端口扫描,服务检测,甚至是漏洞扫描等多种功能的强大工具.Nmap从入门到高级覆盖了许多基础的概念和命令,在这篇文章的第二部分,我将提及Nmap一些高级的技术. 防火墙和入侵检测系统(ID ...

  10. JDBC复习

    -----------------------------------------JDBC复习----------------------------------------- 1.JDBC (Jav ...