我的第八个AJAX程序(XML数据传输)

关注

转载最新推荐文章于 2026-05-21 13:41:42 发布 437 阅读 AI 写同款· GEO 优化 ›

AJAX XML技术详解 AJAX是一种在无需重新加载整个页面的情况下，与服务器交换数据和更新部分网页的技术。它通过JavaScript和XML（或JSON）实现数据的异步传输。AJAX XML技术是一种实现前后端分离、提高页面响应速度的关键技术。本文对AJAX XML的原理、应用场景、优缺点等内容进行了详细介绍，希望能对您有所帮助。阅读详情

前端：

common.js

function $(id) {
	return document.getElementById(id);
}

function createXhr(){
	var xhr;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft XMLHttp");
	}
	return xhr;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="common.js"></script>
</head>
<body>
	<button onclick="getMsg()">getMsg</button>
	<script>
		function getMsg() {
			var xhr = createXhr();
			xhr.open("get","Student1.php",true);
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4 && xhr.status == 200){
					var resXML = xhr.responseXML;
					var studentList = resXML.getElementsByTagName("StudentList")[0];
					console.log(studentList);
					var name = studentList.getElementsByTagName("Name")[0].innerHTML;
					var age = studentList.getElementsByTagName("Age")[0].innerHTML;
					console.log("姓名："+name);
					console.log("年龄："+age);
				}
			}
			xhr.send(null);
		}
	</script>
</body>
</html>

后台：

student1.php

<?php 
  #1、增加响应消息头
  header("Content-Type:application/xml");
  #2、拼XML字符串
  $xml="<?xml version='1.0' encoding='utf-8' ?>";
  $xml.="<StudentList>";
    $xml.="<Student>";
      $xml.="<Name>张三丰</Name>";
      $xml.="<Age>85</Age>";
    $xml.="</Student>";
  $xml.="</StudentList>";
  #3、将拼好的内容响应给浏览器
  echo $xml;
?>

收录于