json和xml以及ajax的数据格式用法
JSON的两个方法：
1.将字符串转换为JSON格式：parse().
2.将原生JavaScript值转换为JSON字符串：stringify();
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>json数据</title>
</head>
<body>
</body>
<scripttype="text/javascript">
// json数据里面可以包含json数据
var json ={
"id":8,
"name":"小明",
"age":18,
"scroce":[99,35,12,45],
"message":{
marry:"no",
son:"yes",
}
}
// 字符串的json格式
var string ="{'id':8,'name':'小明'}";
// 如果使用JSON.parse(string);//会报错
var str ='{"id":8,"name":"小明"}';// json转换数据的字符串必须是（单引套双引）
// 注意：键值key要用双引号引起来（单引套双引）
// 例如：
var person='{"name" : "aaa","age" : 11}';
// 1.parse()方法把字符串转成JSON格式
var json = JSON.parse(str);
var json =eval(str);//这种方法既不安全，可能会执行一些恶意代码。
// 2.stringify()方法第一个参数是一个数组，第二个参数是一个函数，第三个参数则表示是否在JSON字符串中保留缩进。
var str= JSON.stringify(json,function,num);//转换成JSON字符串
// PHP中的转化方法：
// json_encode()就是将PHP数组转换成Json。
// json_decode()就是将Json转换成PHP数组。
// json格式
var person='{"name":"小明","age":11,"sex":"男"}';
// 字符串
var string1 ="{'name':'小明','age':11,'sex':'男'}"
var string2 ='{"name":"小明","age":11,"sex":"男"}';
// 1.实现将字符串转化成JSON格式
JSON.parse(string1);//报错
JSON.parse(string2);//Object {name: "小明", age: 11, sex: "男"};
// 2.实现将JSON格式数据转化成字符串
console.log(JSON.stringify(person));//"{\"name\":\"小明\",\"age\":11,\"sex\":\"男\"}";
// 3.三个参数
// 第一个参数：json格式数据
// 第二个数据：对这个json数据进行处理的函数
// 第三个参数：缩进
var string3 = JSON.parse(person,function(k,v){
// console.log(k,v);//{"name":"小明","age":11,"sex":"男"}
// k,v对应的是person里面的键值对值
// 匹配处理
switch(k){
case"name":
return"姓名"+v;
break;
case"age":
return"年龄"+v;
break;
case"sex":
return"性别"+v;
break;
default:
return v;
}
},2);
console.log(string3);// Object {name: "姓名小明", age: "年龄11", sex: "性别男"};
</script>
</html>
XML的数据格式：
1.XML 被设计用来传输和存储数据。
2.HTML 被设计用来显示数据。
3.XML和JSON都使用结构化方法来标记数据.
4.什么是 XML？
XML 指可扩展标记语言（EXtensible Markup Language）
XML 是一种标记语言，很类似 HTML
XML 的设计宗旨是传输数据，而非显示数据
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准
下面会举个例子：
获取xml文件里的数据
// 城市
// (省级)广东省->(市级)广州、..........
关于AJAX：
1.AJAX是什么？
AJAX ： 异步 JavaScript and XML
通俗的讲，AJAX就是JS通过一个网址去加载数据，这个过程通常是用户不可见的。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX加载过来的数据，哪些是JS能直接处理的？（
HTML CSS JS TEXT PNG）
2.
AJAX的优势：
1.异步加载数据，无需切换页面
2.更佳的用户体验：局部刷新、及时验证、操作步骤简化等
3.节省流量
4.JS控制数据的加载，更加灵活多用
3. 那么AJAX如何使用？
XMLHttpRequest()可扩展超文本传输请求
3.1 创建一个对象
所有现代浏览器均支持 XMLHttpRequest 对象
（IE5 和 IE6 使用 ActiveXObject("Microsoft.XMLHTTP");
3.2 open(method,url,bol)
method 参数是用于请求的 HTTP 方法。GET、POST
POST：用"POST"方式发送数据,可以大到4MB
用POST需要设置编码格式
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
GET：用"GET"方式发送数据,只能256KB
url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个
URL 与包含脚本的文本具有相同的主机名和端口。
bol 如果这个参数是 false，请求是同步的
如果这个参数是 true 或省略，请求是异步的
3.3 send(data)发送请求
3.4 onreadystatechange事件 服务器响应
readyState与status:
readyState有五种状态：
0 (未初始化)：
(XMLHttpRequest)对象已经创建，但还没有调用open()方法；
1 (载入)：
已经调用open() 方法，但尚未发送请求；
2 (载入完成)：
请求已经发送完成；
3 (交互)：
可以接收到部分响应数据；
4 (完成)
：已经接收到了全部数据，并且连接已经关闭。
如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。关于status，由于它的状态有几十种，我只列出平时常用的几种：
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误
3.5 获取数据
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。
案例：
在页面布局
<h1>省份</h1>
<ul>
<li>城市1</li>
<li>城市2</li>
<li>城市3</li>
<li>城市4</li>
</ul>
添加一个button按钮：<button>加载XML数据</button>
当点击按钮的时候，把？？.xml里面的数据加载到页面中
html：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>ajax_get</title>
</head>
<body>
<h1>省份</h1>
<ul>
<li>城市1</li>
<li>城市2</li>
<li>城市3</li>
<li>城市4</li>
</ul>
<button>加载XML数据</button>
</body>
<scripttype="text/javascript">
// 获取按钮
var btn = document.querySelector("button");
var h1 = document.querySelector("h1");
var lis = document.querySelectorAll("li");
// 1.创建对象
var xmlhttp ;//自定义对象
// 考虑兼容性写法IE5/6
// 判断浏览器是否支持XMLHttpRequest();
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
// js中添加绑定事件addEventListener();
// 添加点击事件
btn.onclick =function(){
// 使用open(data)设置请求参数
// open(method,url,bol);
xmlhttp.open("GET","2-city.xml",true);
// 使用send发送请求
xmlhttp.send();
}
// 响应服务器
// 给xmlhttp对象添加onreadystatechange事件
xmlhttp.onreadystatechange =function(){
// 两类，1.readyState与status
// 要判断服务器有没有异常
/*console.log("readyState",xmlhttp.readyState);
console.log("status",xmlhttp.status);*/
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
// 接受服务器端的数据
// xml,返回XML数据格式
// responseText 获得字符串形式的响应数据。
// responseXML 获得 XML 形式的响应数据。
var dataXML = xmlhttp.responseXML;
console.log(dataXML);
/*-------------处理数据怎么处理--------------*/
// 获取XML文档里面name标签的内容
var name = dataXML.getElementsByTagName("name")[0].innerHTML;
console.log(name);
h1.innerText = name;
// 替换城市内容
var citys = dataXML.getElementsByTagName("city");
document.querySelector("ul").innerHTML ="";
for(var i=0;i<citys.length;i++){
var li = document.createElement("li");
li.innerText = citys[i].innerHTML;
document.querySelector("ul").appendChild(li);
}
}
}
</script>
</html>
xml：
<?xml version="1.0" encoding="UTF-8"?>
<province>
<name>广东省</name>
<citys>
<city>广州</city>
<city>深圳</city>
<city>东莞</city>
<city>惠州</city>
<city>湛江</city>
<city>佛山</city>
</citys>
</province>
效果：
AJAX获取txt文件数据：
html:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
<label>
姓名：<span>XXX</span>
</label>
<label>
年龄：<span>XXX</span>
</label>
<button>获取数据</button>
</body>
<scripttype="text/javascript">
var btn = document.querySelector("button");
var span = document.querySelectorAll("span");
var xmlhttp ;
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
btn.onclick =function(){
// 使用open(data)设置请求参数
// open(method,url,bol);
xmlhttp.open("GET","get.txt",true);
// 使用send发送请求
xmlhttp.send();
}
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
// 获取字符串
var data = xmlhttp.responseText;
// 把字符串转换成json格式object对象
var str1 = JSON.parse(data);
// console.log(str1);
// console.log(dataXML);
var name = str1.name;
var age = str1.age;
// console.log(name);
span[0].innerText = name;
span[1].innerText = age;
}
}
</script>
</html>
txt:
{"name":"小明","age":18}
效果：
AJAX获取PHP文件数据：
$_GET获取方式：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- <form action="" method=""> -->
<!-- <label> -->
姓名：<inputtype="text"name="user">
<!-- </label> -->
<!-- <label> -->
年龄：<inputtype="text"name="age">
<!-- </label> -->
<inputtype="button"value="输入">
<!-- </form> -->
<divstyle="border:1px solid red;padding:30px">
<h2>你的信息：</h2>
<p>XXX</p>
<p>XXX</p>
</div>
</body>
<scripttype="text/javascript">
var btn = document.querySelector("input[type=button]");
var input = document.querySelectorAll("input[type=text]");
var p = document.querySelectorAll("p");
var xmlhttp ;
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
btn.onclick =function(){
var value1 = input[0].value;
var value2 = input[1].value;
// 使用open(data)设置请求参数
// open(method,url,bol);
// get获取类型：获取字符在url后面加上"xxx.php?name" +value1+ "&age=" +value2
xmlhttp.open("GET","5-ajax-get-php.php?name="+value1+"&age="+value2,true);
// 使用send发送请求
xmlhttp.send();
}
// 接收服务器响应的数据
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
var data = xmlhttp.responseText;// 获取的是字符串
console.log(data);
var str = JSON.parse(data);
p[0].innerText = str.name;
p[1].innerText = str.age;
}
}
</script>
</html>
PHP：
<?php
// 接受前端数据
$name = $_GET['name'];
$age = $_GET['age'];
/*
-------------------连接数据库，sql语句，执行----------------------
*/
// 可以用echo输出
echo '{"name":"姓名:'.$name.'","age":"年龄:'.$age.'"}';
// 需要特别注意单引号套双引号在套单引号，.$name.和.$age.用单引号套，因为PHP用点（.）连接字符；
/*'{"name":"姓名:' .$name. '","age":"年龄:' .$age. '"}'*/
?>
效果：
AJAX获取PHP文件数据：
$_POST获取方式：
跟$GET获取方式基本一致
只是post需要设置编码格式：
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
是
用s
end发送请求：
xmlhttp.send("name=" +value1+ "&age=" +value2);
HTML:
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>Document</title>
</head>
<body>
<!-- <form action="" method=""> -->
<!-- <label> -->
姓名：<inputtype="text"name="user">
<!-- </label> -->
<!-- <label> -->
年龄：<inputtype="text"name="age">
<!-- </label> -->
<inputtype="button"value="输入">
<!-- </form> -->
<divstyle="border:10px solid red;padding:30px">
<h2>你的信息：</h2>
<p>XXX</p>
<p>XXX</p>
</div>
</body>
<scripttype="text/javascript">
var btn = document.querySelector("input[type=button]");
var input = document.querySelectorAll("input[type=text]");
var p = document.querySelectorAll("p");
var xmlhttp ;
if(XMLHttpRequest){
// 非IE5/6
xmlhttp =newXMLHttpRequest();
}else{
// IE5/6
xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
}
btn.onclick =function(){
var value1 = input[0].value;
var value2 = input[1].value;
// 使用open(data)设置请求参数
// open(method,url,bol);
xmlhttp.open("POST","6-ajax-get-php.php",true);
// 设置编码格式
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
// 使用send发送请求
xmlhttp.send("name="+value1+"&age="+value2);
}
xmlhttp.onreadystatechange =function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
var data = xmlhttp.responseText;
console.log(data);
var str = JSON.parse(data);
p[0].innerText = str.name;
p[1].innerText = str.age;
}
}
</script>
</html>
PHP：
<?php
// 接受前端数据
$name = $_POST['name'];
$age = $_POST['age'];
/*
-----连接数据库，sql语句，执行-----
*/
// 可以用echo输出
echo '{"name":"姓名:'.$name.'","age":"年龄:'.$age.'"}';
/*'{"name":"姓名:' .$name. '","age":"年龄:' .$age. '"}'*/
?>
效果：
json和xml以及ajax的数据格式用法的更多相关文章
- ajax ---- json 和 xml 区别
2.XML和JSON优缺点 (1).XML的优缺点<1>.XML的优点 A.格式统一,符合标准: B.容易与其他系统进行远程交互,数据共享比较方便.<2>.XML的缺点 A.X ...
- Ajax调用返回json，xml数据类型(0517--pm)
一.返回Json型数据: 1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- Go语言中的数据格式（json、xml 、msgpack、protobuf）
在分布式的系统中,因为涉及到数据的传输,所以一定会进行数据的交换,此时就要定义数据交换的格式,例如二进制.Json.Xml等等.本篇文章就是总结一下常用的几种数据格式. 一.Json格式 如果想使用J ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- json，xml，html三种数据格式
json.xml.html xml解析如下: 1.DOM:基于XML文档树结构的解析 解析器读入整个文档,然后构建一个驻留内存的树结构,然后代码就可以使用 DOM 接口来操作这个树结构.优点:整个文档 ...
- Beego 输出数据格式JSON、XML、JSONP
JSON.XML.JSONP beego 当初设计的时候就考虑了 API 功能的设计,而我们在设计 API 的时候经常是输出 JSON 或者 XML 数据,那么 beego 提供了这样的方式直接输出: ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- （转）Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址, ...
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
随机推荐
- indows 2008 r2/做了SPS2007---2013后，发现添加原来域中的域组添加不上
根据上次的网络包的分析, 我们在AD中找到了wtc-beijing-it的组, 不过在SharePoint日志中我们没有发现搜索成功的记录. - SearchResultEntry: CN=WTC-B ...
- python 单线程实现并发
单线程下支持并发(服务端): from gevent import spawn,monkey;monkey.patch_all() from socket import * def server(ip ...
- openvswitch dpdk
作者:张华 发表于:2016-04-07版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 硬件要 ...
- Mysql 优化与测试
由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 : --> 点击这里 以下的测试数据根据环境的不同所耗费的时间有所不同,例如我在腾讯云上的测试 ...
- LOJ#2070. 「SDOI2016」平凡的骰子（计算几何）
题面 传送门 做一道题学一堆东西不管什么时候都是美好的体验呢-- 前置芝士 混合积 对于三个三维向量\(a,b,c\),定义它们的混合积为\((a\times b)\cdot c\),其中$\time ...
- Python面向对象(定义类和创建对象)
day24 http://www.cnblogs.com/wupeiqi/p/4493506.html Python:函数式+面向对象,函数式编程可以做所有事,但是不一定合适. 小明,10岁,男,上山 ...
- angular核心原理解析1：angular自启动过程
angularJS的源代码整体上来说是一个自执行函数,在angularJS加载完成后,就会自动执行了. angular源代码中: angular = window.angular || (window ...
- 推荐 9 个样式化组件的 React UI 库
简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...
- C语言多线程编程二
一. 线程通信----事件: 1.一对一模式: #include <stdio.h> #include <stdlib.h> #include <Windows.h> ...
- day 10 课后作业
# -*- coding: utf-8 -*-# @Time : 2019/1/2 16:35# @Author : Endless-cloud# @Site : # @File : 课后作业.py# ...