json和xml以及ajax的数据格式用法

时间：2017-03-23 21:33:50 阅读：277 评论：0 收藏：0 [点我收藏+]

标签：xmlhttp image 查询浏览器佛山 nts 1.2 控制 selector

JSON的两个方法：

1.将字符串转换为JSON格式：parse().

2.将原生JavaScript值转换为JSON字符串：stringify();

 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8">
 5 <title>json数据</title>
 6 </head>
 7 <body>
 8 </body>
 9 <scripttype="text/javascript">
10 // json数据里面可以包含json数据
11 var json ={
12 "id":8,
13 "name":"小明",
14 "age":18,
15 "scroce":[99,35,12,45],
16 "message":{
17 marry:"no",
18 son:"yes",
19 }
20 }
21 // 字符串的json格式
22 var string ="{‘id‘:8,‘name‘:‘小明‘}";
23 // 如果使用JSON.parse(string);//会报错
24 var str =‘{"id":8,"name":"小明"}‘;// json转换数据的字符串必须是（单引套双引）
25 // 注意：键值key要用双引号引起来（单引套双引）
26 // 例如：
27 var person=‘{"name" : "aaa","age" : 11}‘;
28 // 1.parse()方法把字符串转成JSON格式
29 var json = JSON.parse(str);
30 var json =eval(str);//这种方法既不安全，可能会执行一些恶意代码。
31 // 2.stringify()方法第一个参数是一个数组，第二个参数是一个函数，第三个参数则表示是否在JSON字符串中保留缩进。
32 var str= JSON.stringify(json,function,num);//转换成JSON字符串
33 // PHP中的转化方法：
34 // json_encode()就是将PHP数组转换成Json。
35 // json_decode()就是将Json转换成PHP数组。
36 // json格式
37 var person=‘{"name":"小明","age":11,"sex":"男"}‘;
38 // 字符串
39 var string1 ="{‘name‘:‘小明‘,‘age‘:11,‘sex‘:‘男‘}"
40 var string2 =‘{"name":"小明","age":11,"sex":"男"}‘;
41 // 1.实现将字符串转化成JSON格式
42 JSON.parse(string1);//报错
43 JSON.parse(string2);//Object {name: "小明", age: 11, sex: "男"};
44 // 2.实现将JSON格式数据转化成字符串
45 console.log(JSON.stringify(person));//"{\"name\":\"小明\",\"age\":11,\"sex\":\"男\"}";
46 // 3.三个参数
47 // 第一个参数：json格式数据
48 // 第二个数据：对这个json数据进行处理的函数
49 // 第三个参数：缩进
50 var string3 = JSON.parse(person,function(k,v){
51 // console.log(k,v);//{"name":"小明","age":11,"sex":"男"}
52 // k,v对应的是person里面的键值对值
53 // 匹配处理
54 switch(k){
55 case"name":
56 return"姓名"+v;
57 break;
58 case"age":
59 return"年龄"+v;
60 break;
61 case"sex":
62 return"性别"+v;
63 break;
64 default:
65 return v;
66 }
67 },2);
68 console.log(string3);// Object {name: "姓名小明", age: "年龄11", sex: "性别男"};
69 </script>
70 </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）

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 形式的响应数据。

案例：

在页面布局

<ul>

</ul>

添加一个button按钮：<button>加载XML数据</button>

当点击按钮的时候，把？？.xml里面的数据加载到页面中

html：

 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8">
 5 <title>ajax_get</title>
 6 </head>
 7 <body>
 8 <h1>省份</h1>
 9 <ul>
10 <li>城市1</li>
11 <li>城市2</li>
12 <li>城市3</li>
13 <li>城市4</li>
14 </ul>
15 <button>加载XML数据</button>
16 </body>
17 <scripttype="text/javascript">
18 // 获取按钮
19 var btn = document.querySelector("button");
20 var h1 = document.querySelector("h1");
21 var lis = document.querySelectorAll("li");
22 // 1.创建对象
23 var xmlhttp ;//自定义对象
24 // 考虑兼容性写法IE5/6
25 // 判断浏览器是否支持XMLHttpRequest();
26 if(XMLHttpRequest){
27 // 非IE5/6
28 xmlhttp =newXMLHttpRequest();
29 }else{
30 // IE5/6
31 xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
32 }
33 // js中添加绑定事件addEventListener();
34 // 添加点击事件
35 btn.onclick =function(){
36 // 使用open(data)设置请求参数
37 // open(method,url,bol);
38 xmlhttp.open("GET","2-city.xml",true);
39 // 使用send发送请求
40 xmlhttp.send();
41 }
42 // 响应服务器
43 // 给xmlhttp对象添加onreadystatechange事件
44 xmlhttp.onreadystatechange =function(){
45 // 两类，1.readyState与status
46 // 要判断服务器有没有异常
47 /*console.log("readyState",xmlhttp.readyState);
48 console.log("status",xmlhttp.status);*/
49 if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
50 // 接受服务器端的数据
51 // xml,返回XML数据格式
52 // responseText    获得字符串形式的响应数据。
53 // responseXML    获得 XML 形式的响应数据。
54 var dataXML = xmlhttp.responseXML;
55 console.log(dataXML);
56 /*-------------处理数据怎么处理--------------*/
57 // 获取XML文档里面name标签的内容
58 var name = dataXML.getElementsByTagName("name")[0].innerHTML;
59 console.log(name);
60 h1.innerText = name;
61 // 替换城市内容
62 var citys = dataXML.getElementsByTagName("city");
63 document.querySelector("ul").innerHTML ="";
64 for(var i=0;i<citys.length;i++){
65 var li = document.createElement("li");
66 li.innerText = citys[i].innerHTML;
67 document.querySelector("ul").appendChild(li);
68 }
69 }
70 }
71 </script>
72 </html>

xml：

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <province>
 3 <name>广东省</name>
 4 <citys>
 5 <city>广州</city>
 6 <city>深圳</city>
 7 <city>东莞</city>
 8 <city>惠州</city>
 9 <city>湛江</city>
10 <city>佛山</city>
11 </citys>
12 </province>

效果：

AJAX获取txt文件数据：

html:

 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 6 </head>
 7 <body>
 8 <label>
 9 姓名：<span>XXX</span>
10 </label>
11 <label>
12 年龄：<span>XXX</span>
13 </label>
14 <button>获取数据</button>
15 </body>
16 <scripttype="text/javascript">
17 var btn = document.querySelector("button");
18 var span = document.querySelectorAll("span");
19 var xmlhttp ;
20 if(XMLHttpRequest){
21 // 非IE5/6
22 xmlhttp =newXMLHttpRequest();
23 }else{
24 // IE5/6
25 xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
26 }
27 btn.onclick =function(){
28 // 使用open(data)设置请求参数
29 // open(method,url,bol);
30 xmlhttp.open("GET","get.txt",true);
31 // 使用send发送请求
32 xmlhttp.send();
33 }
34 xmlhttp.onreadystatechange =function(){
35 if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
36 // 获取字符串
37 var data = xmlhttp.responseText;
38 // 把字符串转换成json格式object对象
39 var str1 = JSON.parse(data);
40 // console.log(str1);
41 // console.log(dataXML);
42 var name = str1.name;
43 var age = str1.age;
44 // console.log(name);
45 span[0].innerText = name;
46 span[1].innerText = age;
47 }
48 }
49 </script>
50 </html>

View Code

txt:

{"name":"小明","age":18}

效果：

AJAX获取PHP文件数据：

$_GET获取方式：

 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 6 </head>
 7 <body>
 8 <!-- <form action="" method=""> -->
 9 <!-- <label> -->
10 姓名：<inputtype="text"name="user">
11 <!-- </label> -->
12 <!-- <label> -->
13 年龄：<inputtype="text"name="age">
14 <!-- </label> -->
15 <inputtype="button"value="输入">
16 <!-- </form> -->
17 <divstyle="border:1px solid red;padding:30px">
18 <h2>你的信息：</h2>
19 <p>XXX</p>
20 <p>XXX</p>
21 </div>
22 </body>
23 <scripttype="text/javascript">
24 var btn = document.querySelector("input[type=button]");
25 var input = document.querySelectorAll("input[type=text]");
26 var p = document.querySelectorAll("p");
27 var xmlhttp ;
28 if(XMLHttpRequest){
29 // 非IE5/6
30 xmlhttp =newXMLHttpRequest();
31 }else{
32 // IE5/6
33 xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
34 }
35 btn.onclick =function(){
36 var value1 = input[0].value;
37 var value2 = input[1].value;
38 // 使用open(data)设置请求参数
39 // open(method,url,bol);
40 // get获取类型：获取字符在url后面加上"xxx.php?name" +value1+ "&age=" +value2
41 xmlhttp.open("GET","5-ajax-get-php.php?name="+value1+"&age="+value2,true);
42 // 使用send发送请求
43 xmlhttp.send();
44 }
45 // 接收服务器响应的数据
46 xmlhttp.onreadystatechange =function(){
47 if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
48 var data = xmlhttp.responseText;// 获取的是字符串
49 console.log(data);
50 var str = JSON.parse(data);
51 p[0].innerText = str.name;
52 p[1].innerText = str.age;
53 }
54 }
55 </script>
56 </html>

View Code

PHP：

 1 <?php
 2 // 接受前端数据
 3 $name = $_GET[‘name‘];
 4 $age = $_GET[‘age‘];
 5 /*
 6 -------------------连接数据库，sql语句，执行----------------------
 7 */
 8 // 可以用echo输出
 9 echo ‘{"name":"姓名:‘.$name.‘","age":"年龄:‘.$age.‘"}‘;
10 // 需要特别注意单引号套双引号在套单引号，.$name.和.$age.用单引号套，因为PHP用点（.）连接字符；
11 /*‘{"name":"姓名:‘ .$name. ‘","age":"年龄:‘ .$age. ‘"}‘*/
12 ?>

View Code

效果：

AJAX获取PHP文件数据：

$_POST获取方式：

跟$GET获取方式基本一致

只是post需要设置编码格式：

xmlhttp.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);

是

用s

end发送请求：

xmlhttp.send("name=" +value1+ "&age=" +value2);

HTML:

 1 <!DOCTYPE html>
 2 <htmllang="en">
 3 <head>
 4 <metacharset="UTF-8"/>
 5 <title>Document</title>
 6 </head>
 7 <body>
 8 <!-- <form action="" method=""> -->
 9 <!-- <label> -->
10 姓名：<inputtype="text"name="user">
11 <!-- </label> -->
12 <!-- <label> -->
13 年龄：<inputtype="text"name="age">
14 <!-- </label> -->
15 <inputtype="button"value="输入">
16 <!-- </form> -->
17 <divstyle="border:10px solid red;padding:30px">
18 <h2>你的信息：</h2>
19 <p>XXX</p>
20 <p>XXX</p>
21 </div>
22 </body>
23 <scripttype="text/javascript">
24 var btn = document.querySelector("input[type=button]");
25 var input = document.querySelectorAll("input[type=text]");
26 var p = document.querySelectorAll("p");
27 var xmlhttp ;
28 if(XMLHttpRequest){
29 // 非IE5/6
30 xmlhttp =newXMLHttpRequest();
31 }else{
32 // IE5/6
33 xmlhttp =ActiveXObject("Msxml2.XMLHTTP");
34 }
35 btn.onclick =function(){
36 var value1 = input[0].value;
37 var value2 = input[1].value;
38 // 使用open(data)设置请求参数
39 // open(method,url,bol);
40 xmlhttp.open("POST","6-ajax-get-php.php",true);
41 // 设置编码格式
42 xmlhttp.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);
43 // 使用send发送请求
44 xmlhttp.send("name="+value1+"&age="+value2);
45 }
46 xmlhttp.onreadystatechange =function(){
47 if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
48 var data = xmlhttp.responseText;
49 console.log(data);
50 var str = JSON.parse(data);
51 p[0].innerText = str.name;
52 p[1].innerText = str.age;
53 }
54 }
55 </script>
56 </html>

View Code

PHP：

 1 <?php
 2 // 接受前端数据
 3 $name = $_POST[‘name‘];
 4 $age = $_POST[‘age‘];
 5 /*
 6 -----连接数据库，sql语句，执行-----
 7 */
 8 // 可以用echo输出
 9 echo ‘{"name":"姓名:‘.$name.‘","age":"年龄:‘.$age.‘"}‘;
10 /*‘{"name":"姓名:‘ .$name. ‘","age":"年龄:‘ .$age. ‘"}‘*/
11 ?>

View Code

效果：

json和xml以及ajax的数据格式用法

标签：xmlhttp image 查询浏览器佛山 nts 1.2 控制 selector

原文地址：http://www.cnblogs.com/ChenChunChang/p/6607217.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行