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协议在互联网上提 ...
随机推荐
- openwrt 分区
下面以ar9344 16M flash为例子: uboot启动时传递给内核的参数为: bootargs=console=ttyS0,115200 root=31:02 rootfstype=jffs2 ...
- 自动化运维之cobbler安装centos7.3
自动化运维之cobbler安装centos7.3 一.cobbler简介和服务 Cobbler是一款自动化操作系统安装的实现,与PXE安装系统的区别就是可以同时部署多个版本的系统,而PXE只能选择一种 ...
- 轻松读懂MSIL
原文:http://www.cnblogs.com/brookshi/p/5225801.html
- 深入理解JS中的变量及变量作用域
JS的变量有两种,“全局变量”和“局部变量”. “全局变量”声明在函数外部,可供所有函数使用,(全局变量属于window)而“局部变量”声明在函数体内部,只能在定义该变量的函数体内使用. 1.全局变量 ...
- oracle进阶之connect by笔记
本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处. http://www.cnblogs.com/king-xg/p/6794562.html 如果觉得对您有帮 ...
- PHP递归排序
递归算法对于任何一个编程人员来说,应该都不陌生.因为递归这个概念,无论是在PHP语言还是Java等其他编程语言中,都是大多数算法的灵魂. 对于PHP新手来说,递归算法的实现原理可能不容易理解.但是只要 ...
- python 全栈开发，Day142(flask标准目录结构, flask使用SQLAlchemy,flask离线脚本,flask多app应用,flask-script,flask-migrate,pipreqs)
昨日内容回顾 1. 简述flask上下文管理 - threading.local - 偏函数 - 栈 2. 原生SQL和ORM有什么优缺点? 开发效率: ORM > 原生SQL 执行效率: 原生 ...
- JQuery编写自己的插件（七）
一:jQuery插件的编写基础1.插件的种类编写插件的目的是给一系列已经方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率.常见的种类有以下三种:封装对象方法的插件
- python第三方包安装方法（两种方法）
具体有以下两种方法: 第一种方法(不使用pip或者easy_install): Step1:在网上找到的需要的包,下载下来.eg. rsa-3.1.4.tar.gz Step2:解压缩该文件. Ste ...
- Jquery监听AJAX请求
.ajaxComplete() 当Ajax请求完成后注册一个回调函数.这是一个 AjaxEvent. .ajaxError() Ajax请求出错时注册一个回调处理函数,这是一个 Ajax Event. ...