AJAX传输——以XML文件传输为例
此文档解决以下问题：
一、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）index02.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）index03.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）index04.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>
3）运行结果：
正文结束！~~
AJAX传输——以XML文件传输为例的更多相关文章
- JQuery -- Jquery 中的Ajax, Jquery解析xml文件
1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...
- Java简单文件传输 socket简单文件传输示例
服务器端代码: import java.io.*; import java.net.*; /** * Created with IntelliJ IDEA. * User: HYY * Date: 1 ...
- JS通过ajax动态读取xml文件内容
http://www.sharejs.com/codes/javascript/8178 HTML文件代码如下 <!DOCTYPE html> <html> <head& ...
- AJAX异步传输——以php文件传输为例
此文档解决以下问题: 一.在当前html页面显示请求的数据1.get方式请求 ,不传递参数2.get方式请求 ,传递参数3.post方式请求 ,不传递参数4.post方式请求 ,传递参数 二.通过按 ...
- Ajax动态载入xml文件内容
<%@page import="javax.swing.JOptionPane"%> <%@page import="com.ctl.util.*&qu ...
- 使用jq的ajax实现对xml文件的读取
之前一直在用json来传递数据,但是xml也是不可缺少的,于是开始了xml的征程.xml的一些属性啊之类的在菜鸟教程上列举的已经很详细了,但是却没有前段部分的获取教程,查询资料,遂懂: index.x ...
- Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库
Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...
- Go语言之进阶篇文件传输
一.文件传输 1.文件传输原理 2.文件传输 示例: 发送方: send_file.go package main import ( "fmt" "io" &q ...
- 《linux就该这么学》课堂笔记15 vsftpd文件传输、Samba/NFS文件共享
1.为了能够在如此复杂多样的设备之间(Windows.Linux.UNIX.Mac等不同的操作系统)解决问题解决文件传输问题,文件传输协议(FTP)应运而生. FTP服务器是按照FTP协议在互联网上提 ...
随机推荐
- 解决重新安装sqlserver2008报错Reporting Services目录数据库文件存在的问题
删除安装目录如: D:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA 目录下的reporting.mdf和日 ...
- lvs持久连接及防火墙标记实现多端口绑定服务
lvs持久连接及防火墙标记实现多端口绑定服务 LVS持久连接: PCC:将来自于同一个客户端发往VIP的所有请求统统定向至同一个RS: PPC:将来自于一个客户端发往某VIP的某端口的所有请求统统定向 ...
- python语法小应用---列表和元组
声明:本文章为参考总结CSDN上知识点所获,只是用来总结自己学习而用,如有侵权,会删除! 列表(list): 列表就像一个线性容器,但是比C++的 lis t扩展多得多 列表里的元素可以是相同类型,也 ...
- 转：前端页面a标签嵌套a标签效果的两种解决方案
这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要 ...
- pytest七：assert断言
断言是写自动化测试基本最重要的一步,一个用例没有断言,就失去了自动化测试的意义了.什么是断言呢?简单来讲就是实际结果和期望结果去对比,符合预期那就测试 pass,不符合预期那就测试 failed py ...
- 扩展方法 C#
“扩展方法使您能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型.” 定义和调用扩展方法 定义一个静态类以包含扩展方法. 该类必须对客户端代码可见. 有关可访问性规则 ...
- Chakra调试笔记 TypedArray
一.TypedArray类型 TypedArray是漏洞中常见到的结构,手册用法有四 1.new TypedArray(length); //byteLength=length * sizeof(Ty ...
- 支付宝回调JAVA版代码
支付宝回调: 1 //这个是支付宝回调的信息 2 @RequestMapping("alipay_callback.do") 3 @ResponseBody 4 public Ob ...
- java 泛型 ? 和 T的区别
看了一个CSDN的问题,感觉就清楚了:http://bbs.csdn.net/topics/300181589/ 摘录其中的重点: 泛型方法: public <T extends Object& ...
- Python 动态生成多个变量
引用自:https://blog.csdn.net/u013061183/article/details/78015673 用Python循环创建多个变量, 如创建 a1= .a2= .a3= ...