PHP. 03 .ajax传输XML、 ajax传输json、封装_H5之家 - 中国HTML5教程资源分享第一站

PHP. 03 .ajax传输XML、 ajax传输json、封装

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中必须有一个根节点，所有的子节点都放置在根节点下

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="获取男神们?"> </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> html代码 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