XML简介
XML 指可扩展标记语言 EXtensible Markup Language 。设计的时候是用来传递数据的，虽然格式跟HTML类似
xml示例
<?xml version="1.0" encoding="UTF-8"?> <singer> <name>Jay</name> <age>18</age> <skill>Sing</skill> </singer>
xml是纯文本。xml是纯文本，这点跟HTML很像，所以我们可以用任何的文本编辑软件去打开编辑它
XML语法
虽然看起来跟
HTML类似,但是XML的语法有些需要注意的,更为详细的可以查阅w3cschool_xml教程
XML声明 第一行是XML的声明，指定XML版本（1.0）以及使用的编码（UTF-8万国码) ,文件类型为name.xml
<?xml version="1.0" encoding="UTF-8"?>
自定义标签 XML 中没有默认的标签，所有的标签都是我们定义者 自定义的
双标签 XML中没有但标签，都是双标签
根标签 XML中必须有一个根节点，所有的子节点都放置在根节点下
<root>
<name></name>
</root>
XML属性 跟HTML一样，XML的标签里面也能够添加属性type='text'，但是不建议这样用，而是使用标签的方式来表述内容（下半部分代码）
<!-- 使用属性配合标签表述信息 -->
<persion sex="female">
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</persion>
<!-- 使用标签来表述信息 -->
<persion>
<sex>female</sex>
<firstname>Anna</firstname>
<lastname>Smith</lastname>
</person>
XML解析
因为 XML 就是标签，所以直接用解析 Dom 元素的方法解析即可
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ margin: 100px auto; width: 400px; } td{ border: 1px solid #0094ff; } </style> </head> <body> <h1>ajax获取 多个明星数据</h1> <input type="button" value="获取男神们?" id='getStars'> </body> </html> <script type="text/javascript"> // 绑定点击事件 document.querySelector('#getStars').onclick = function () { var ajax = new XMLHttpRequest(); // post ajax.open('post','getStars.php'); // 设置 请求的报文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 发送 ajax.send(); // 注册事件 ajax.onreadystatechange = function () { if (ajax.readyState==4 && ajax.status==200) { // 知道返回的是 xml console.log(ajax.responseXML); // document对象哦 var persons = ajax.responseXML.querySelectorAll('person'); console.log(persons); // 在循环之前 把table的 拼出来 var str =''; // <table> str+='<table>'; // 循环 获取其中的某一个 for (var i = 0; i < persons.length; i++) { // 获取 当前循环的那个person标签对象 var currentPerson = persons[i]; // 获取 其中的 每一个值 console.log(currentPerson.querySelector('name').innerHTML); console.log(currentPerson.querySelector('path').innerHTML); console.log(currentPerson.querySelector('skill').innerHTML); // 方法1 创建一个 table /* js创建dom元素 再添加 比较繁琐 document.createElement('table').appendChild(); document.createElement('tr'); document.createElement('td'); */ // 直接 拼接出 一个 table的 字符串 然后 设置到页面上即可 // 拼接开头 str+='<tr>'; str+='<td>'+currentPerson.querySelector('name').innerHTML+'</td>'; // 这里需要添加的是图片 // str+='<td>'+currentPerson.querySelector('path').innerHTML+'</td>'; str+='<td><img src="'+currentPerson.querySelector('path').innerHTML+'"></td>'; str+='<td>'+currentPerson.querySelector('skill').innerHTML+'</td>'; // 再次添加一个td str+='<td><a href="#">点击了解更多_'+currentPerson.querySelector('name').innerHTML+'</a></td>'; // 拼接结尾 str+='</tr>'; } // 循环完毕以后 将table 合并 // </table> str+='</table>'; // 测试 拼接的 内容 是否正确 console.log(str); // 直接 添加到页面上 document.body.innerHTML = str; } } } </script>
php代码
在php中如果要使用xml传输数据，需要使用header()设置返回的内容为xml
<?php // 设置返回的是xml header('content-type:text/xml; charset=utf-8') ; // 读取并返回 oh -yeah echo file_get_contents( 'starList.xml); ?>
XML文件
<?xml version="1.0" encoding="UTF-8"?> <stars> <person> <name>盖伦</name> <path>images/hzt.jpg</path> <skill>转圈</skill> </person> <person> <name>赵信</name> <path>images/xy.jpg</path> <skill>爆菊花</skill> </person> </stars>
JSON语法
JSON( JavaScript Object Notation ) 是 ECMAScript 的子集，作用是进行数据的交换，而且由于语法更为简洁，网络传输、解析都更为迅速 文件名类型为 name.json
语法规则：
对象 使用{}包裹
数组 使用[]包裹
属性名 使用双引号包裹
属性名 跟属性值之间 使用冒号分割
属性值 也必须使用双引号包裹(数字可以不包裹)
数据类型：
下列内容无论键、值 都是用双引号包起来
数字(整数或浮点数)／字符串(在双引号中)／逻辑值(true/false)／数组(在方括号中)／对象(在花括号中)／null
示例代码：
// 基本对象
{
"name":"fox",
"age":"18 ",
"sex":"true",
"car":"null"
}
// 数组
[
{
"name":"小小",
"age":"1"
},
{
"name":"大大",
"age":"2"
}
]
JSON 解析
JavaScript使用JSON对象
JSON.parse()方法：将JSON字符串转化为JavaScript对象 需要接收
JSON.stringify()方法：将JavaScript对象，转化为JSON字符串 需要接收
IE（8以下）浏览器中没有 JSON 对象，通过导入 JSON2.js 框架即可解决，框架获取地址JSON2.js_github地址
<script type="text/javascript"> var obj = { name:"fox", age:18, skill:"撩妹" };
console.log( "原生形式"+obj); //将javaScript对象格式化为JSON字符串 var jsonStr = JSON.stringify(obj); console.log("我是json字符串"+jsonStr);
// 将JSON字符串 格式化为javaScript对象
var jsonObj = JSON.parse(jsonStr);
console.log("我是javaScript对象+jsonObj ");
</script>
使用eval() 方法将 json字符串 转化为 javaScript对象
需要将内容使用（）括号包裹起来，
var jsonStr1 = '{ "name":"fox","age":18,"skill":"撩妹" }' ;
var jsonObj = eval('('+jsonStr1+')');
console.log(jsonObj);
console.log(jsonObj.name);
json_decode() ： 将json字符串 转化为变量
json_encode() : 将变量转化为‘json’字符串
<?php
header("Content-Type:text/html;charset=utf-8");
// json字符串
$jsonStr = '{"name":"itcast","age":54,"skill":"Singing"}';
// 字符串转化为php对象
print_r(json_decode($jsonStr));
echo '<br>';
// php数组
$arrayName = array('name'=>'littleFox','age'=>12);
// php对象转化为json字符串
print_r(json_encode($arrayName));
使用例子：
json：
[
{
"name":"jay",
"skill" :"singing",
"path" :"images/jay.jpg"
}
{
"name":"ED",
"skill" :"singing",
"path" :"images/ed.jpg"
}
]
php:
<?php echo file_get_contents('info/stars.json); ?>
html:
<body> <input type="button" value="获取" id='getStars'> </body> <script type="text/javascript"> document.querySelector("#getStars").onclick = function(){ var ajax = new XMLHttpRequest() ; ajax.open('post','getStars.php'); ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); ajax.send(); ajax.onreadystatechange = function(){ if(ajax.readystate ==4 && ajax.status==200){ // 转化为js对象，不光是数组还是对象都可以使用该方法转化 var strArr = JSON.parse(ajax.responseText); // 这里也方法哦一个table中 var str=""; str+='<table>' for(var i=0;i<strArr.length;i++){ str+='<tr>'; str+='<td>' +strArr[i].name+'</td>'. ; str+='<td>' +strArr[i].skill +'</td>'. ; str+='<td><img src="'+strArr[i].path+'"></td'; str+='</tr>'; } document.body.innerHtml = str ; } } </script>
封装一下
// ajax get 五部曲 function ajax_get(url,data) { // 异步对象 var ajax = new XMLHttpRequest(); // url 方法 // 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18 // 所以 这里 需要拼接 url if (data) { // 如果有值 需要拼接字符串 // 拼接为xxx.php?name=jack&age=18 url+='?'; url+=data; }else{ } ajax.open('get',url); // 发送 ajax.send(); // 注册事件 ajax.onreadystatechange = function () { // 在事件中 获取数据 并修改界面显示 if (ajax.readyState==4&& ajax.status==200) { console.log(ajax.responseText); } } } // ajax_post五部曲 function ajax_post(url,data) { // 异步对象 var ajax = new XMLHttpRequest(); // url 方法 ajax.open('post',url); // 设置 请求报文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 发送 if (data) { // 如果 有值 post请求 是在 send中 发送给服务器 ajax.send(data); }else{ ajax.send(); } // 注册事件 ajax.onreadystatechange = function () { // 在事件中 获取数据 并修改界面显示 if (ajax.readyState==4&&ajax.status==200) { console.log(ajax.responseText); } } } // 将 get 跟post 封装到一起 /* 参数1:url 参数2:数据 参数3:请求的方法 参数4:数据成功获取以后 调用的方法 */ function ajax_tool(url,data,method,success) { // 异步对象 var ajax = new XMLHttpRequest(); // get 跟post 需要分别写不同的代码 if (method=='get') { // get请求 if (data) { // 如果有值 url+='?'; url+=data; }else{ } // 设置 方法 以及 url ajax.open(method,url); // send即可 ajax.send(); }else{ // post请求 // post请求 url 是不需要改变 ajax.open(method,url); // 需要设置请求报文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 判断data send发送数据 if (data) { // 如果有值 从send发送 ajax.send(data); }else{ // 木有值 直接发送即可 ajax.send(); } } // 注册事件 ajax.onreadystatechange = function () { // 在事件中 获取数据 并修改界面显示 if (ajax.readyState==4&&ajax.status==200) { // console.log(ajax.responseText); // 将 数据 让 外面可以使用 // return ajax.responseText; // 当 onreadystatechange 调用时 说明 数据回来了 // ajax.responseText; // 如果说 外面可以传入一个 function 作为参数 success success(ajax.responseText); } } }
使用代码：
get方式：
php：
<?php // 获取get提交的数据 echo $_GET['skill']; ?>
html：
<body> <input type="button" value="测试get" id='ajax_get'> </body> </html> <!-- 导入 封装的js --> <script type="text/javascript" src='ajax_tool.js'></script> <script type="text/javascript"> document.querySelector('#ajax_get').onclick = function () { // 直接使用 封装的 工具函数即可 /* 参数1:url 参数2:数据 参数3:请求的方法 */ var backData = ajax_tool('01.test_get.php','name=huluw&skill=saveyeye','get',function(data){ console.log(data); }); // 测试 console.log(backData); } </script>
post方式：
php：
<?php echo $_POST['friend']; ?>
html：
<body> <input type="button" value="测试post" id='ajax_post'> </body> </html> <!-- 导入 封装的js --> <script type="text/javascript" src='ajax_tool.js'></script> <script type="text/javascript"> document.querySelector('#ajax_post').onclick = function () { // 直接使用 封装的 工具函数即可 /* 参数1:url 参数2:数据 参数3:请求的方法 参数4:数据获取成功调用的方法 */ var backData = ajax_tool('02.test_post.php','friend=好丽友','post',function(data){ console.log(data+"---dddd-----"); }); // 测试 console.log(backData+"我是backdata"); // 怎么样 处理数据 全部写在 匿名函数中 ajax_tool('02.test_post.php','friend=好丽友','post',function(data){ console.log(data+"我是ajax_tool"); // 修改页面的显示呢? }); } </script>