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函数: ...
随机推荐
- 使用RazorGenerator和预编译MVC引擎将Razor视图编译成DLL
Web开发中常常会有跨页面.跨站点.跨项目组的复用模块(界面),最常见的就是如下方所示的Web页面上用于显示登录或用户名的头部模块, 使用ASP.NET MVC开发中,常见的做法是写成部分视图,本文的 ...
- 一个CXF集成SPRING的WEBSERVICE完整实例
1 首先准备以下JAR包 activation.jar commons-logging-1.1.1.jar cxf-2.5.6.jar jaxb-api-2.2.1.jar jaxb-impl-2.1 ...
- Android ScrollView 子控件不占满的问题
经常碰到很笨的 ScrollView的子控件无法占满 ScrollView 的空间的问题. 其实只需要加一行,android:fillViewport="true" 但不加上这行就 ...
- 在Gogland里对GO程序进行单元测试！
单元测试在程序开发中具有很重要的作用! 1,可以保证程序代码的健壮,能够最小范围测试程序代码,从而保证程序的正确性! 2,可以通过单元测试代码快速了解当前的程序. 我在先前的几个软件公司工作时候,都对 ...
- “java.lang.NullPointerException”异常分析
1.父类定义的某个属性,没有被子类使用,或者在子类中,又重新定义一次. 2.因为调用了一个object的方法,且此object的reference为null:比如说:String a=null; // ...
- 【Oracle 12c】CUUG OCP认证071考试原题解析（30）
30.choose the best answer Examine the commands used to create DEPARTMENT_DETAILS and COURSE_DETAILS: ...
- “全栈2019”Java异常第二十二章：try-with-resources语句详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- Python FLask Web 学习笔记：jinjia2的使用方法1
# coding:utf-8 from jinja2 import Template x = """ <p>大爷的孙子</p> <ul> ...
- 初探APT 攻击
作者:joe 所属团队:Arctic Shell 本文编写参考: https://www.freebuf.com/vuls/175280.html https://www.freebuf. ...
- PHP一句话木马Webshell变形免杀总结
0×00 前言 大部分Webshell查杀工具都是基于关键字特征的,通常他们会维护一个关键字列表,以此遍历指定扩展名的文件来进行扫描,所以可能最先想到的是各种字符串变形,下面总结了一些小的方法,各种不 ...