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 ...
随机推荐
- php面向对象成员方法(函数)练习
<?php header('content-type:text/html;charset=utf-8'); //成员方法的举例 /* ①添加sayHello 成员方法,输出 'hello' ②添 ...
- Maven实战08_仓库
何为Maven仓库 在Maven世界中.任何一个依赖.插件或者项目构建的输出,都可以称之为构件.例如依赖log4j-1.2.15.jar是一个构件,差价maven-compile-plugin-2.0 ...
- mysql内建命令快速手记 — 让手指跟上思考的速度（一）
在微信公众号上看到一篇文章说的很好,意思是说,大牛在尝试各种方案的时候可能并没有超神的预测和筛选能力 只是你通常测试一种情况时,大神已经测试了好几种方案了,讲的是"为什么大多数程序员不喜欢写 ...
- Python运算符，逻辑运算
运算符 计算机可以进行的运算有很多种,可不只加减乘除这么简单,运算按种类可分为算数运算.比较运算.逻辑运算.赋值运算.成员运算.身份运算.位运算,今天我们暂只学习算数运算.比较运算.逻辑运算.赋值运算 ...
- charles-截取移动端请求-设置代理
Charles 上的设置 1. 要截取 iPhone 上的网络请求,我们首先需要将 Charles 的代理功能打开.在 Charles 的菜单栏上选择 “Proxy”–>“Proxy Se ...
- wpf中数据绑定和INotifyPeropertyChanged的理解
原创:转载请注明出处. 先说数据绑定: XAML代码: <Window x:Class="数据绑定和INotifyPropertyChanged.Window1" Loade ...
- Spring Boot配置公共的线程池
内存资源很宝贵,线程池资源不宜过多的创建,同一个应用,尽量使用统一的线程池,并且相关参数需要设置适当,不造成资源的浪费,也不影响性能的提升. import java.util.concurrent.T ...
- HTML5定位功能，实现在百度地图上定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Luogu P2272 [ZJOI2007]最大半连通子图(Tarjan+dp)
P2272 [ZJOI2007]最大半连通子图 题意 题目描述 一个有向图\(G=(V,E)\)称为半连通的\((Semi-Connected)\),如果满足:\(\forall u,v\in V\) ...
- CSS 滤镜效果
本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN -- filter 了解下: { filter: blur(5px); ...