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的数据格式用法的更多相关文章

  1. ajax ---- json 和 xml 区别

    2.XML和JSON优缺点 (1).XML的优缺点<1>.XML的优点 A.格式统一,符合标准: B.容易与其他系统进行远程交互,数据共享比较方便.<2>.XML的缺点 A.X ...

  2. Ajax调用返回json,xml数据类型(0517--pm)

    一.返回Json型数据: 1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. Go语言中的数据格式(json、xml 、msgpack、protobuf)

    在分布式的系统中,因为涉及到数据的传输,所以一定会进行数据的交换,此时就要定义数据交换的格式,例如二进制.Json.Xml等等.本篇文章就是总结一下常用的几种数据格式. 一.Json格式 如果想使用J ...

  4. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  5. json,xml,html三种数据格式

    json.xml.html xml解析如下: 1.DOM:基于XML文档树结构的解析 解析器读入整个文档,然后构建一个驻留内存的树结构,然后代码就可以使用 DOM 接口来操作这个树结构.优点:整个文档 ...

  6. Beego 输出数据格式JSON、XML、JSONP

    JSON.XML.JSONP beego 当初设计的时候就考虑了 API 功能的设计,而我们在设计 API 的时候经常是输出 JSON 或者 XML 数据,那么 beego 提供了这样的方式直接输出: ...

  7. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  8. (转)Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址, ...

  9. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数:  ...

随机推荐

  1. [JS&Jquery]实现页面表格中相同内容的行或列合并

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak<script type=&qu ...

  2. gitlab中修改项目名称客户端修改方法

    如果gitlab项目名称已经修改,对于本地已经克隆下来的仓库,可以使用如下命令进行修改: git remote set-url origin 新的项目路径

  3. java 实验6 图形用户界面设计试验(2)

    共两大题 窗体实现(略去测试类即 实例化自定义窗体) 小结: 1. JRadioButton 单选按钮 ButtonGroup 按钮集合(加入单选按钮) 清空选项需让ButtonGroup调用clea ...

  4. 微信小程序转发商品的详情页 + 转发功能(传参)

    1.微信小程序转发传参,利用的还是onShareAppMessageapi 2.利用的还有json转换 JSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据 函数 描述JSO ...

  5. CTF中常见的 PHP 弱类型漏洞总结

    作者:ZERO    所属团队:Arctic Shell 参考资料: http://archimesan.me/2017/12/21/php%E5%BC%B1%E7%B1%BB%E5%9E%8B%E6 ...

  6. 解决 sublime text 3 there are no packages available for installation 错误

    重装win7 系统后,使用sublime text 3 出现下面的错误提示: 经过摸索,解决方案如下: 第一种方法: 是因为 ipv6 的问题,导致无法访问 sublime 官网,解决方法: 在 ho ...

  7. python 第一天学习(画个正方体)

    import turtleturtle.goto(200,0)turtle.goto(200,200)turtle.goto(0,200)turtle.goto(0,0)turtle.penup()t ...

  8. java_I/O字符流

    I/O流(Stream) INPUT:输入流,从文件里读OUPUT:输出流,写内容到文件 IO流分为:字符流和字节流 字符流:处理纯文本文件. 字节流:处理可以所有文件. 字符输出流测试: @Test ...

  9. 1.2 Percona XtraDB Cluster Limitations

    摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...

  10. 49.RocketMQ 双主搭建(本文非EamonSec原创)

    声明:本文非EamonSec原创,copy自网上下载的某个个文件 1.RocketMQ介绍 1.1. 简介 RocketMQ 是一款分布式.队列模型的消息中间件,具有以下特点: 能够保证严格的消息顺序 ...