此文档解决以下问题：
一、responseText获取数据
1.AJAX异步传输，get请求方式/post请求方式，输出全部xml数据
二、responseXML获取数据
2.AJAX异步传输，get请求方式，输出指定xml数据
3.AJAX异步传输，post请求方式，输出全部xml数据
4.AJAX同步传输，get请求方式，输出指定xml数据
5.AJAX同步传输，post请求方式，输出全部xml数据
1.AJAX异步传输，get请求方式/post请求方式，输出全部xml数据
1）index01.html：
<!DOCTYPE html><html> ???<head> ???????<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ????????<title></title> ??????<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> ??????<script type="text/javascript"> ??????????????function XMLhttpr () { ??????????????//1.创建XMLHttpRequest对象 ??????????????var xhtp; ??????????????if(window.XMLHttpRequest){ ??????????????????//支持ie6 以上 ??????????????????xhtp=new XMLHttpRequest(); ??????????????}else{ ??????????????????xhtp=new ActiveXObject("Micosoft.XMLHTTP"); ??????????????} ???????????????????????????????//2.规定请求 ??????????????//以get方式请求 ?xml文件 ??????????????xhtp.open("GET","books.xml",true); ??????????????//true 为异步传输 ?????????????????????????//3.发送请求 ??????????????xhtp.send(null); ????????????????????????????????????????????//4.响应请求 ??????????????xhtp.onreadystatechange=function () { ??????????????????if(xhtp.readyState==4 ?&& ?xhtp.status==200){ ??????????????????????//5.设置xml的显示格式 ??????????????????????var xmlDoc= xhtp.responseText; ??????????????????????$("#myDiv").html(xmlDoc); ??????????????????} ??????????????} ??????????} ?????????????????????$(function function_name () { ??????????????$("#btn").click(XMLhttpr); ??????????}) ??????</script> ???</head> ???<body> ???????<div id="myDiv"></div> ???????<br /> ???????<input type="text" name="txtin" id="txtin" value="" /> ???????<input type="text" name="txtage" id="txtage" value="" /> ???????<input type="button" name="btn" id="btn" value="提交" /> ???????<table border="" cellspacing="" cellpadding="" id="member"> ???????????<tr> ???????????????<th>title</th> ???????????????<th>author</th> ???????????????<th>year</th> ???????????</tr> ???????</table> ???</body></html>2）books.xml：
<?xml version="1.0" encoding="utf-8"?><bookstore> ???<book category="CHILDREN"> ???????<title>Harry Potter1</title> ???????<author>J K. Rowling</author> ???????<year>2005</year> ???????<price>29.99</price> ???</book> ???<book category="WEB"> ???????<title>Learning XML1</title> ???????<author>Erik T. Ray</author> ???????<year>2003</year> ???????<price>39.95</price> ???</book></bookstore>
3）运行结果：
2.AJAX异步传输，get请求方式，输出指定xml数据
1）index01.html：
<!DOCTYPE html><html> ???<head> ???????<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ????????<title></title> ??????<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> ??????<script type="text/javascript"> ??????????????function XMLhttpr () { ??????????????//1.创建XMLHttpRequest对象 ??????????????var xhtp; ??????????????if(window.XMLHttpRequest){ ??????????????????//支持ie6 以上 ??????????????????xhtp=new XMLHttpRequest(); ??????????????}else{ ??????????????????xhtp=new ActiveXObject("Micosoft.XMLHTTP"); ??????????????} ???????????????????????????????//2.规定请求 ??????????????//以get方式请求 ?xml文件 ??????????????xhtp.open("GET","books.xml",true); ??????????????//true 为异步传输 ?????????????????????????//3.发送请求 ??????????????xhtp.send(null); ????????????????????????????????????????????//4.响应请求 ??????????????xhtp.onreadystatechange=function () { ??????????????????if(xhtp.readyState==4 ?&& ?xhtp.status==200){ ??????????????????????//5.设置xml的显示格式 ??????????????????????//getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 ??????????????????????//参数值 "*" 返回文档的所有元素。 ??????????????????????//childNodes 属性返回包含被选节点的子节点的 NodeList。 ???????????????????//如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。 ???????????????????//nodeValue 属性根据节点的类型设置或返回节点的值。 ???????????????????//注意： 如果你想返回元素的文本，记住文本通常是插入到文本节点中 ???????????????????//所以返回的是文本节点的节点值(element.childNodes[0].nodeValue)。 ??????????????????????var xmlDoc= xhtp.responseXML.documentElement; ??????????????????????Node1 = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; ??????????????????????Node2 = xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue; ???????????????????Node3 = xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue;// ???????????????????var str="title："+Node1+"<br/>author："+Node2+"<br/>ayear："+Node3;// ??????????????????????$("#myDiv").html(str); ??????????????????????$("#member").append("<tr><td>"+Node1+"</td><td>"+Node2+"</td><td>"+Node3+"</td></tr>"); ??????????????????} ?????????????????????????????????} ??????????} ?????????????????????$(function function_name () { ??????????????$("#btn").click(XMLhttpr); ??????????}) ??????</script> ???</head> ???<body> ???????<div id="myDiv"></div> ???????<br /> ???????<input type="text" name="txtin" id="txtin" value="" /> ???????<input type="text" name="txtage" id="txtage" value="" /> ???????<input type="button" name="btn" id="btn" value="提交" /> ???????<table border="" cellspacing="" cellpadding="" id="member"> ???????????<tr> ???????????????<th>title</th> ???????????????<th>author</th> ???????????????<th>year</th> ???????????</tr> ???????</table> ???</body></html>2）books.xml：
<?xml version="1.0" encoding="utf-8"?><bookstore> ???<book category="CHILDREN"> ???????<title>Harry Potter1</title> ???????<author>J K. Rowling</author> ???????<year>2005</year> ???????<price>29.99</price> ???</book> ???<book category="WEB"> ???????<title>Learning XML1</title> ???????<author>Erik T. Ray</author> ???????<year>2003</year> ???????<price>39.95</price> ???</book></bookstore>
3）运行结果：
3.AJAX异步传输，post请求方式，输出全部xml数据
1）index01.html：
<!DOCTYPE html><html> ???<head> ???????<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ???????<title></title> ???????<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> ???????<script type="text/javascript"> ???????????function XMLhttpr() { ???????????????//1.创建XMLHttpRequest对象 ???????????????var xhtp; ???????????????if(window.XMLHttpRequest) { ???????????????????//支持ie6 以上 ???????????????????xhtp = new XMLHttpRequest(); ???????????????} else { ???????????????????xhtp = new ActiveXObject("Micosoft.XMLHTTP"); ???????????????} ???????????????//2.规定请求 ???????????????//以post方式请求 ?xml文件 ???????????????xhtp.open("POST", "books.xml", true); ???????????????//true 为异步传输 ???????????????//3.发送请求 ???????????????xhtp.send(null); ???????????????//4.响应请求 ???????????????xhtp.onreadystatechange = function() { ???????????????????if(xhtp.readyState == 4 && xhtp.status == 200) { ???????????????????????//5.设置xml的显示格式 ???????????????????????//getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 ??????????????????????????//参数值 "*" 返回文档的所有元素。 ??????????????????????????//childNodes 属性返回包含被选节点的子节点的 NodeList。 ???????????????????????//如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。 ???????????????????????//nodeValue 属性根据节点的类型设置或返回节点的值。 ???????????????????????//注意： 如果你想返回元素的文本，记住文本通常是插入到文本节点中 ???????????????????????//所以返回的是文本节点的节点值(element.childNodes[0].nodeValue)。 ???????????????????????var xmlDoc = xhtp.responseXML.documentElement; ???????????????????????xmlDocs = xmlDoc.getElementsByTagName("book"); ???????????????????????for(var i = 0; i < xmlDocs.length; i++) { ???????????????????????????xmlDoc = xmlDocs[i]; ???????????????????????????Node1 = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue; ???????????????????????????Node2 = xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue; ???????????????????????????Node3 = xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue; ???????????????????????????$("#member").append("<tr><td>" + Node1 + "</td><td>" + Node2 + "</td><td>" + Node3 + "</td></tr>"); ???????????????????????} ???????????????????} ???????????????} ???????????} ???????????$(function function_name() { ???????????????//one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。 ???????????????//当使用 one() 方法时，每个元素只能运行一次事件处理器函数 ???????????????$("#btn").one("click",function () { ???????????????????XMLhttpr(); ???????????????}); ???????????}) ???????</script> ???</head> ???<body> ???????<div id="myDiv"></div> ???????<br /> ???????<input type="text" name="txtin" id="txtin" value="" /> ???????<input type="text" name="txtage" id="txtage" value="" /> ???????<input type="button" name="btn" id="btn" value="提交" /> ???????<table border="" cellspacing="" cellpadding="" id="member"> ???????????<tr> ???????????????<th>title</th> ???????????????<th>author</th> ???????????????<th>year</th> ???????????</tr> ???????</table> ???</body></html>2）books.xml：
<?xml version="1.0" encoding="utf-8"?><bookstore> ???<book category="CHILDREN"> ???????<title>Harry Potter1</title> ???????<author>J K. Rowling</author> ???????<year>2005</year> ???????<price>29.99</price> ???</book> ???<book category="WEB"> ???????<title>Learning XML1</title> ???????<author>Erik T. Ray</author> ???????<year>2003</year> ???????<price>39.95</price> ???</book></bookstore>
3）运行结果：
4.AJAX同步传输，get请求方式，输出指定xml数据
1）index01.html：
<!DOCTYPE html><html> ???<head> ???????<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ????????<title></title> ??????<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> ??????<script type="text/javascript"> ??????????????function XMLhttpr () { ??????????????//1.创建XMLHttpRequest对象 ??????????????var xhtp; ??????????????if(window.XMLHttpRequest){ ??????????????????//支持ie6 以上 ??????????????????xhtp=new XMLHttpRequest(); ??????????????}else{ ??????????????????xhtp=new ActiveXObject("Micosoft.XMLHTTP"); ??????????????} ???????????????????????????????//2.规定请求 ??????????????//以get方式请求 ?xml文件 ??????????????xhtp.open("GET","books1.xml",false); ??????????????// false 为同步传输，则不必设置onreadystatechange ?????????????????????????//3.发送请求 ??????????????xhtp.send(null); ????????????????????????????????????????????//4.响应请求// ??????????????xhtp.onreadystatechange=function () {// ??????????????????if(xhtp.readyState==4 ?&& ?xhtp.status==200){// ??????????????????????var xmlDoc= xhtp.responseText;// ??????????????????}// ??????????????} ?????????????????????????????//5.设置xml的显示格式 ???????????//getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 ??????????????//参数值 "*" 返回文档的所有元素。 ??????????????//childNodes 属性返回包含被选节点的子节点的 NodeList。 ???????????//如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。 ???????????//nodeValue 属性根据节点的类型设置或返回节点的值。 ???????????//注意： 如果你想返回元素的文本，记住文本通常是插入到文本节点中 ???????????//所以返回的是文本节点的节点值(element.childNodes[0].nodeValue)。 ???????????//getAttribute() 方法返回指定属性名的属性值。 ??????????????var xmlDoc=xhtp.responseXML; ??????????????Node1 = xmlDoc.getElementsByTagName("two")[0].firstChild.nodeValue; ???????????Node2 = xmlDoc.getElementsByTagName("author")[0].firstChild.nodeValue; ???????????Node3 = xmlDoc.getElementsByTagName("book")[0].getAttribute("category"); ???????????????????????????????$("#member").append("<tr><td>"+Node1+"</td><td>"+Node2+"</td><td>"+Node3+"</td></tr>"); ??????????} ?????????????????????$(function function_name () { ??????????????$("#btn").click(XMLhttpr); ??????????}) ??????</script> ???</head> ???<body> ???????<div id="myDiv"></div> ???????<br /> ???????<input type="text" name="txtin" id="txtin" value="" /> ???????<input type="text" name="txtage" id="txtage" value="" /> ???????<input type="button" name="btn" id="btn" value="提交" /> ???????<table border="" cellspacing="" cellpadding="" id="member"> ???????????<tr> ???????????????<th>title</th> ???????????????<th>author</th> ???????????????<th>year</th> ???????????</tr> ???????</table> ???</body></html>2）books1.xml：
<?xml version="1.0" encoding="utf-8"?><bookstore> ???<book category="CHILDREN"> ???????<title> ???????????<one>Harry Potter1</one> ???????????<two>Harry Potter2</two> ???????</title> ???????<author>J K. Rowling</author> ???????<year>2005</year> ???????<price>29.99</price> ???</book> ???<book category="WEB"> ???????<title> ???????????<one>Learning XML1</one> ???????????<two>Learning XML2</two> ???????</title> ???????<author>Erik T. Ray</author> ???????<year>2003</year> ???????<price>39.95</price> ???</book></bookstore>
3）运行结果：
5.AJAX同步传输，post请求方式，输出全部xml数据
1）index05.html:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> ??<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> ??<script type="text/javascript"> ??function XMLhttpr () { ??//1.创建XMLHttpRequest对象 ??var xhtp; ??if(window.XMLHttpRequest){ ??//支持ie6 以上 ??xhtp=new XMLHttpRequest(); ??}else{ ??xhtp=new ActiveXObject("Micosoft.XMLHTTP"); ??} ???????//2.规定请求 ??//以POST方式请求 ?xml文件 ??xhtp.open("POST","books.xml",false); ??????// false 为同步传输，则不必设置onreadystatechange ??????xhtp.setRequestHeader("Content-type","text/xml"); ?????????//3.发送请求 ??xhtp.send(null); ??//4.响应请求// ??xhtp.onreadystatechange=function () {// ??if(xhtp.readyState==4 ?&& ?xhtp.status==200){// ??var xmlDoc= xhtp.responseText;// ??}// ??} ?????//5.设置xml的显示格式//getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 ??//参数值 "*" 返回文档的所有元素。 ??//childNodes 属性返回包含被选节点的子节点的 NodeList。//如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。//nodeValue 属性根据节点的类型设置或返回节点的值。//注意： 如果你想返回元素的文本，记住文本通常是插入到文本节点中//所以返回的是文本节点的节点值(element.childNodes[0].nodeValue)。//getAttribute() 方法返回指定属性名的属性值。 ??????var xmlDoc=xhtp.responseXML;xmlDocs=xmlDoc.getElementsByTagName("book");for (var i=0;i<xmlDocs.length;i++) {xmlDoc=xmlDocs[i];Node1 = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;Node2 = xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue;Node3 = xmlDoc.getElementsByTagName("year")[0].childNodes[0].nodeValue;$("#member").append("<tr><td>"+Node1+"</td><td>"+Node2+"</td><td>"+Node3+"</td></tr>");} ?????} ?????$(function function_name () { ??$("#btn").click(XMLhttpr); ??}) ??</script></head><body><div id="myDiv"></div><br /><input type="text" name="txtin" id="txtin" value="" /><input type="text" name="txtage" id="txtage" value="" /><input type="button" name="btn" id="btn" value="提交" /><table border="" cellspacing="" cellpadding="" id="member"><tr><th>title</th><th>author</th><th>year</th></tr></table></body></html>2）books.xml：
<?xml version="1.0" encoding="utf-8"?><bookstore> ???<book category="CHILDREN"> ???????<title>Harry Potter1</title> ???????<author>J K. Rowling</author> ???????<year>2005</year> ???????<price>29.99</price> ???</book> ???<book category="WEB"> ???????<title>Learning XML1</title> ???????<author>Erik T. Ray</author> ???????<year>2003</year> ???????<price>39.95</price> ???</book></bookstore>
3）运行结果：
正文结束！~~
AJAX传输——以XML文件传输为例
原文地址：https://www.cnblogs.com/yankyblogs/p/9944526.html