码迷,mamicode.com
首页 > Web开发 > 详细

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)
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事件 服务器响应
 
readyStatestatus:
                    
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:
 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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!