Ajax第二话（解析xml和json文件）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_27820551/article/details/84934353

Ajax解析xml文件

<body>
	<h1>解析xml文件</h1>
	<button id="btn">获取xml文件</button>
	<script>
		document.querySelector('#btn').onclick=function(){
			var ajaxObj = new XMLHttpRequest();

			ajaxObj.open('get','ajax_xmlparse.php');
			ajaxObj.send();
			ajaxObj.onreadystatechange=function(){
				if (ajaxObj.readyState==4&&ajaxObj.status==200) {
					//由于服务端返回的是xml文件，需要用responseXML来接收
					var doc = ajaxObj.responseXML;
					//返回的xml是一个文档对象，所以可以通过文档对象的方式进行解析
					console.log(doc.querySelector('name').innerHTML);
				}
			}
		};
	</script>

<?xml version="1.0" encoding="UTF-8"?>
<person>
	<name>无痕</name>
	<age>24</age>
	<kill>programming</kill>
</person>

<?php 
	//设置返回的内容为xml格式
	header('content-type:text/xml;charset=utf8');
	//获取电脑中的文件直接返回给浏览器
	echo file_get_contents('info/person.xml');
 ?>

JSON解析：

	<h1>json解析</h1>
	<button id="btn">获取json文件</button>
	<script>
		document.querySelector('#btn').onclick=function(){
			var ajaxObj = new XMLHttpRequest();
			ajaxObj.open('post','ajax_json.php');
			ajaxObj.setRequestHeader('Content-type','application/x-www-form-urlencoded');
			ajaxObj.send();
			ajaxObj.onreadystatechange=function(){
				if (ajaxObj.readyState==4&&ajaxObj.status==200) {
					//将json文件的值转换成接送对象
					var persons=JSON.parse(ajaxObj.responseText);
					for (var i = persons.length - 1; i >= 0; i--) {
									console.log(persons[i].name);
									}				}
				}
			}
	</script>
</body>

[
	{
		"name":"zhangsan",
		"age":18,
		"kill":"吃饭"
	},
	{
		"name":"无痕",
		"age":24,
		"kill":"programming"
	}
]

注意：JSON中key一定要使用双引号