web 11
Obtaining the JSON:
1.首先,我们将把要检索的JSON的URL存储在变量中。
2.要创建请求,我们需要使用new关键字从XMLHttpRequest构造函数创建一个新的请求对象实例。
3.现在我们需要使用open ( )方法(XMLHttpRequest.open():初始化请求。此方法将从JavaScript代码中使用;要从本机代码初始化请求,请改用OpenRequest ( )。)打开一个新的请求。添加以下行:
这至少需要两个参数——还有其他可选参数。对于这个简单的例子,我们只需要两个强制性的例子:
发出网络请求时使用的HTTP方法。在这种情况下,GET很好,因为我们只是检索一些简单的数据。
向其发出请求的URL——这是我们之前存储的JSON文件的URL。
4 .接下来,添加以下两行——在这里,我们将responsetType设置为JSON,这样XHR就知道服务器将返回JSON,并且这应该在幕后转换为JavaScript对象。
5 .本节的最后一部分涉及等待服务器返回响应,然后处理它。
代码如下:
<script>
2 var header = document.querySelector('header');
3 var section = document.querySelector('section');
4 var requestURL = 'https://raw.githubusercontent.com/Bulalalala-Ly/package/master/yinshi-json/1.json';
5 var request = new XMLHttpRequest();
6 request.open('GET', requestURL);
7 request.responseType = 'text';
8 request.send();
9 request.onload = function() {
10 var ownText = request.response;
11 var own = JSON.parse(ownText);
12 populateHeader(own);
13 showHeroes(own);
14 }
15 function populateHeader(jsonObj) {
16 var myH1 = document.createElement('h1');
17 myH1.textContent = jsonObj['Name'];
18 header.appendChild(myH1);
19 var myPara = document.createElement('p');
20 myPara.textContent = '导演 : ' + jsonObj['Director'] + ' / 首播时间: ' + jsonObj['formed'];
21 header.appendChild(myPara);
22 }
23 function showHeroes(jsonObj) {
24 var heroes = jsonObj['members'];
25
26 for (var i = 0; i < heroes.length; i++) {
27 var myArticle = document.createElement('article');
28 var myH2 = document.createElement('h2');
29 var myPara1 = document.createElement('p');
30 var myPara2 = document.createElement('p');
31 var myPara3 = document.createElement('p');
32 var myList = document.createElement('ul');
33
34 myH2.textContent = heroes[i].name;
35 myPara1.textContent = '简介 : ' + heroes[i].introduction;
36 myPara2.textContent = '出生日期: ' + heroes[i].birth;
37 myPara3.textContent = '代表作品 :';
38
39 var superPowers = heroes[i].masterworks;
40 for (var j = 0; j < superPowers.length; j++) {
41 var listItem = document.createElement('li');
42 listItem.textContent = superPowers[j];
43 myList.appendChild(listItem);
44 }
45
46 myArticle.appendChild(myH2);
47 myArticle.appendChild(myPara1);
48 myArticle.appendChild(myPara2);
49 myArticle.appendChild(myPara3);
50 myArticle.appendChild(myList);
51
52 section.appendChild(myArticle);
53 }
54 }
55 </script>
a JSON file base on own website:
代码如下:
{
"Name" : "剧名",
"Director" : "导演名",
"formed" : 播出年份,
"introduction" : "简介",
"active" : true,
"members" : [
{
"name" : "演员名",
"birth" : "出生年月",
"introduction" : "个人简介",
"masterworks" : [
"“代表作品名”",
"“代表作品名”",
"“代表作品名”"
]
},
{
"name" : "演员名",
"birth" : "出生年月",
"introduction" : "个人简介",
"masterworks" : [
"“代表作品名”",
"“代表作品名”",
"“代表作品名”"
]
},
{
"name" : "演员名",
"birth" : "出生年月",
"introduction" : "个人简介",
"masterworks" : [
"“代表作品名”",
"“代表作品名”",
"“代表作品名”"
]
}
]
}
web 11的更多相关文章
- D3_book 11.2 stack
<!-- book :interactive data visualization for the web 11.2 stack 一个堆叠图的例子 --> <!DOCTYPE htm ...
- LinuxMysql命令操作数据库
键入命令mysql -uroot -p密码查看所有表:mysql> show databases;进入表use multidomain_db;删除表:DROP table colour 执行sq ...
- 前端工程筹建NodeJs+gulp+bower
1.安装nodejs nodejs 官网下载安装文件 安装完成之后,在命令窗口执行,(显示nodejs版本) 和(显示npm版本)可以使用这两个命令查看是否安装成功: node -v npm -v 2 ...
- cache应用(asp.net 2.0 SQL数据缓存依赖 [SqlCacheDependency ] )
Asp.net 2.0 提供了一个新的数据缓存功能,就是利用sql server2005 的异步通知功能来实现缓存 1.首先在sqlserver2005 中创建一个test的数据库. 在SQL Ser ...
- 整合spring roo,maven,mybatis,spring-flex,blazeds,mysql
1. 下载spring roo,设置环境变量ROO_HOME,和path,classpath. 使用CMD命令行找到工作区间,新建工程目录转到工程目录:mkdir ten-minutes $ ...
- 简单bat语法
一.简单批处理内部命令简介 1.Echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置. 语法 echo [{on off}] [message] ...
- 前端工程搭建NodeJs+gulp+bower
需要node.npm的事先安装!! 1.nodejs安装程序会在环境变量中添加两个变量: 系统环境变量中:path 增加C:\Program Files\nodejs\ 因为在该目下存在node.ex ...
- [置顶] ANT build.xml文件详解
Ant的优点 跨平台性.Ant是用Java语言编写的,所示具有很好的跨平台性. 操作简单.Ant是由一个内置任务和可选任务组成的. Ant运行时需要一个XML文件(构建文件). Ant通过调用targ ...
- Asp.Net Core WebApi学习笔记(四)-- Middleware
Asp.Net Core WebApi学习笔记(四)-- Middleware 本文记录了Asp.Net管道模型和Asp.Net Core的Middleware模型的对比,并在上一篇的基础上增加Mid ...
随机推荐
- dba_segements 没有所有的表的信息
这是oracle11g新增的功能,假设一个一般的用户user新建了一张表user_table,这时切换到sys用户查看dba_segments 查看user_table的信息,发现dba_segmen ...
- 【转】pyhton之Reportlab模块——生成pdf文件
[转]pyhton之Reportlab模块 reportlab模块是用python语言生成pdf文件的模块 安装:pip install reportlab 模块默认不支持中文,如果使用中文需要注册 ...
- SQL server查询语句
作者:邓聪聪 mysql部分语句的查询,持续更新 系统函数 函数名 描述 举例 convert() 数据类型转换 selece convert(varchar(5),12345) 返回:字符串1234 ...
- 前端笔记知识点整合之JavaScript(二)关于运算符&初识条件判断语句
运算符 数学运算符的正统,number和number的数学运算,结果是number.出于面试的考虑,有一些奇奇怪怪的数学运算: 数学运算中:只有纯字符串.布尔值.null能够进行隐式转换. //隐 ...
- PHP常用方法整理
最近开始写PHP项目,各种常用的方法简单整理一下,以备后用. 1. Xml转Json json_decode(json_encode(simplexml_load_string($xml, 'Sim ...
- C++入门篇六
struct和class的访问权限:结构体,类 struct和class 是相同的,唯一的而不同,就是默认权限,struct是public,class默认是private class Animal { ...
- STM32F0使用LL库实现PWM输出
在本次项目中,限于空间要求我们选用了STM32F030F4作为控制芯片.这款MCU不但封装紧凑,而且自带的Flash空间也非常有限,所以我们选择了LL库实现.本文我们将说明如何通过LL库实现PWM信号 ...
- tomcat启动后产生的日志
产生的日志 相当于 定时选取webapps里面搜索有没有超时的session,然后将超时的session关掉. 每一个webapp 都是独立的 一个application对应一个context,se ...
- python复习基本知识
print(x or y) """x or y ; x 为 true ,则返回x ,否则返回flase“”“” and 则相反 优先级比较:not > and &g ...
- bzoj 2599
还是点对之间的问题,果断上点分治 同样,把一条路径拆分成经过根节点的两条路径,对不经过根节点的路径递归处理 然后,我们逐个枚举根节点的子树,计算出子树中某一点到根节点的距离,然后在之前已经处理过的点中 ...