json和xml以及ajax的数据格式用法
Posted Leaves丶幻
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了json和xml以及ajax的数据格式用法相关的知识，希望对你有一定的参考价值。
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事件 服务器响应
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：
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 以上是关于json和xml以及ajax的数据格式用法的主要内容，如果未能解决你的问题，请参考以下文章