Ajax--解析JSON数据与解析XML数据
一.Ajax解析JSON数据
nav.json(json数据)
[
{
"link":"http://www.jd.com",
"src":"images/nav_1.png",
"text":"京东超市"
},
{
"link":"http://www.taobao.com",
"src":"images/nav_2.png",
"text":"全球购"
},
{
"link":"http://www.mi.com",
"src":"images/nav_3.png",
"text":"服装城"
},
{
"link":"http://www.163.com",
"src":"images/nav_4.png",
"text":"京东生鲜"
} ]
nav_json.php (服务器)
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 16:52
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
$jsonStr = file_get_contents('nav.json');
echo $jsonStr;
原生JavaScript进行Ajax的JSON解析：
nav_json_HTML_JSON.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
border: 1px solid #ddd;
}
.nav li {
float: left;
width: 200px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">无刷新请求</button>
<div class="nav">
<ul id="navIn">
<!--<li>
<a href="chaoshi.html">
<img src="data:images/nav_1.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_2.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_3.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_4.png" alt="">
<p>京东超市</p>
</a>
</li>-->
</ul>
</div>
</body>
</html>
<script>
/**
// 1.创建AJAX对象
// 2.链接服务器
// 3.发送请求
// 4.接受响应结果
* */ // 需求：点击按钮，获取数据并无刷新的添加到页面里
var btn = document.getElementById('btn');
var navIn = document.getElementById('navIn');
btn.onclick = function () {
// 1.创建小黄人
var xhr = new XMLHttpRequest();
// 2.小黄人去哪里
xhr.open('get','05nav_json.php',true);
// 3.小黄人出发了
xhr.send();
// 4.小黄人返回结果处理
xhr.onreadystatechange = function () {
if(xhr.status==200 && xhr.readyState == 4){
// 获取页面的响应文本
var res = xhr.responseText;
// 只能解析合法的JSON数据
res = JSON.parse(res);
console.log(res);
// 把数据拼接成节点并添加到页面
var htmlStr = '';
for (var i = 0; i < res.length; i++) {
htmlStr += " <li>" +
"<a href="+res[i].link+">" +
"<img src="+res[i].src+" alt=''> " +
"<p>"+res[i].text+"</p>" +
"</a><" +
"/li>"
}
navIn.innerHTML = htmlStr;
}
}
}
</script>
原生JavaScript进行Ajax的XML解析：
nav.xml
<?xml version="1.0" encoding="UTF-8" ?>
<array>
<item>
<link>http://www.jd.com</link>
<src>images/nav_1.png</src>
<text>京东超市</text>
</item>
<item>
<link>http://www.taobao.com</link>
<src>images/nav_2.png</src>
<text>全球购</text>
</item>
<item>
<link>http://www.mi.com</link>
<src>images/nav_3.png</src>
<text>服装城</text>
</item>
<item>
<link>http://www.163.com</link>
<src>images/nav_4.png</src>
<text>京东生鲜</text>
</item>
</array>
nav_XML.php
<?php
header('Content-Type:application/xml;charset=utf-8;'); $xmlStr = file_get_contents('nav.xml');
echo $xmlStr;
?>
nav_XML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav {
border: 1px solid #ddd;
overflow: hidden;
}
.nav li{
float: left;
width: 100px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">无刷新请求</button>
<div class="nav">
<ul id="navIn"> </ul>
</div>
</body>
</html>
<script>
/**
* 1. 创建AJAX对象
* 2. 连接服务器
* 3. 发送请求
* 4. 接收响应结果
*/
// 需求：点击按钮，获取数据并无刷新的添加到页面里 var btn = document.getElementById('btn');
var navIn = document.getElementById('navIn'); btn.onclick = function () { // 1.创建小黄人
var xhr = new XMLHttpRequest();
// 2.小黄人去哪里
xhr.open('get','nav_XML.php',true);
// 3.小黄人出发了
xhr.send();
// 4.小黄人返回结果处理
xhr.onreadystatechange = function () {
if( xhr.status == 200 && xhr.readyState == 4 ){
/* 获取页面的响应文本 */
var res = xhr.responseXML;
// res = JSON.parse(res);
console.log(res.children[0].children);
var item = res.children[0].children;
/* 把数据拼接成节点，并添加到页面 */
var htmlStr = '';
for (var i = 0; i < item.length; i++) {
htmlStr += '<li>\n' +
' <a href="'+item[i].querySelector('link').innerHTML+'">\n' +
' <img src="'+item[i].querySelector('src').innerHTML+'" alt="">\n' +
' <p>'+item[i].querySelector('text').innerHTML+'</p>\n' +
' </a>\n' +
'</li>';
}
// console.log(htmlStr);
navIn.innerHTML = htmlStr;
}
} } </script>
Ajax--解析JSON数据与解析XML数据的更多相关文章
- 如何使用Google APIs和Google应用系统集成(7)----在里面JSON兑换XML数据处理，JSON数据包括违规XML数据规范：XML节点名称不支持号码Java解
笔者电话Google Calendar APIs的GetColors方法,其中(有关详细信息Google Calendar API已经Google API看到我的博文介绍的其余部分,目前,我们只取Go ...
- 【Flex】读取本地JSON，然后JSON数据转成XML数据
package utils { import flash.xml.XMLDocument; import flash.xml.XMLNode; import mx.rpc.xml.SimpleXMLE ...
- php解析json数组（循环输出数据）的实例
以快递100接口为例 返回的JSON数据 {"message":"ok","nu":"350116805826",&qu ...
- Jquery解析Json字符串,并且动态生成数据表格Table
//ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...
- AJAX制作JSON格式的实时更新数据的方法
之前有写过这样的文章,但是出现了几个问题,第一,如果每秒都像数据库发送请求势必会造成服务器的压力过大,第二,如果使用JS的话,是不可以取得系统时间的,因为JS运行在客户端,所以只能取得客户端时间, 如 ...
- json数据相对于xml数据.
JSON is a valid subset of JavaScript, Python, and YAML JSON parsing is generally faster than XML par ...
- c#: 解析json， 转成xml， 简单方便
没看到.net framework中有这样的功能, 懒得到处找了, 索性花点时间自己写一个 /* * Created by SharpDevelop. * Date: 2013/6/24 * User ...
- C# JObject解析Json(多方法解析Json 二)
下载Newtonsoft.Json,添加引用 记得using Newtonsoft.Json.Linq; //用JObject解析 string json = "{\"offlin ...
- C#解析Json(多方法解析Json 一)
解析:{'id':'4028d80858053bed0158053ef7a50001','sl':0.0,'sfyfz':'0','zwjyzsbh':'1000001600000018'} 1.新建 ...
- 把txt格式数据制作成xml数据
txt格式数据: 代码: s1=""" <object> <name>{0}</name> <pose>Unspecifi ...
随机推荐
- 左神算法书籍《程序员代码面试指南》——1_01设计一个有getMin功能的栈
[题目] 实现一个特殊的栈,在实现栈的基本功能的基础上,再实现返回栈中最小元素的操作. [要求] 1.pop.push.getMin操作的时间复杂度都是O(1).2.设计的栈类型可以使用现成的栈结构. ...
- topology进程结束会不会关闭数据库连接
测试环境:redhat,oracle 11.2.0.3.0 测试目标:当java进程关闭之后,进程的数据库连接会不会被释放,何时被释放 实验证明:在运行topology前,执行 select coun ...
- 自建免费的代理ip池
00x01--- 前言 因为爬虫被禁ip这样的反扒真的很凶,但自从建了一个代理ip池以后,反反扒就可以跟的上节奏.当然你也可以上网上各种代理平台自己付费.这些平台当然很方便提供api调用,还不用自己验 ...
- java基础之System类
System类概述System 类包含一些有用的类字段和方法.它不能被实例化. 成员方法 public static void gc()运行垃圾回收器 public static void exit( ...
- sql server2008安装时提示重启计算机失败怎么办
安装SQL Server 2008时,经常会遇到这样一个问题,软件提示“重启计算机失败”,如果忽略的话,会给后面的安装带来很大的麻烦,这里如何解决呢? 工具/原料 注册表 解决方法 在键盘上按 ...
- python内置类型详细解释
文章编写借鉴于内置类型 - Python 3.7.3 文档,主要用于自己学习和记录 python主要内置类型包括数字.序列.映射.类.实例和异常 有些多项集类是可变的.它们用于添加.移除或重排其成员的 ...
- CodeChef:Chef and Problems（分块）
CodeChef:Chef and Problems 题目大意 有一个长度为n的序列$a_1,a_2,……,a_n$,每次给出一个区间[l,r],求在区间内两个相等的数的最远距离($max(j-i,满 ...
- Luogu P2101 命运石之门的选择(分治+搜索)
P2101 命运石之门的选择 题意 题目描述 在某一条不知名世界线的冈伦今天突然接到了一条\(dmail\),上面说世界线将会发生巨大变动,未来的他无论如何都无法扭转这种变动回到原来的世界线.而世界线 ...
- Linux下使用SSH命令行传输文件到远程服务器
目标:CentOS 7 调整 home分区 扩大 root分区 总体过程: 把/home内容备份,然后将/home文件系统所在的逻辑卷删除,扩大/root文件系统,新建/home ,恢复/home内容 ...
- Java8的HashMap笔记摘要
问题例子: HashMap 是不是有序的? 不是有序的. 有没有有序的Map实现类呢? 有 TreeMap 和 LinkedHashMap. TreeMap 和 LinkedHashMap 是如何保 ...