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协议在互联网上提 ...
随机推荐
- elk系统通过nginx添加对kibana的登录认证
elk系统添加对kibana的登录认证 关于elk系统的安装配置可以参考:Centos6.5安装Logstash ELK stack 日志管理系统及使用详解 http://blog.csdn.net/ ...
- centos6.5下系统编译定制iptables防火墙扩展layer7应用层访问控制功能及应用限制QQ2016上网
iptables防火墙扩展之layer7应用层访问控制 概述: iptables防火墙是工作在网络层,针对TCP/IP数据包实施过滤和限制,属于典型的包过滤防火墙.以基于网络层的数据包过滤机制为主,同 ...
- 10-关于DOM的事件操作
一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...
- 06-jQuery的文档操作(重点)
之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的文档操作的API提供了便利的方法供我们操 ...
- matplotlib画堆叠条形图
import matplotlib.pyplot as plt%matplotlib inlineplt.style.use('ggplot') plt.style.use("ggplot& ...
- TCP template 代码
服务端 from socket import * server= socket(AF_INET,SOCK_STREAM) server.bind(('127.0.0.1',8080)) server. ...
- LoadRunner性能测试入门教程
javaweb性能测试那些事 一:什么是javaweb性能测试: 二:javaweb性能测试基本流程 三:javaweb性能测试常用指标: 1:响应时间:2-5-8 原则 2:吞吐量 3:资源使用率 ...
- Python中的各种转义符\n\r\t
转义符 描述 \ 续行符(在行尾时) \\ 反斜杠符号 ' 单引号 " 双引号 \a 响铃 \b 退格(Backspace) \e 转义 \000 空 \n 换行 \v 纵向制表符 \t 横 ...
- python 全栈开发，Day140(RabbitMQ,基于scrapy-redis实现分布式爬虫)
一.RabbitMQ 队列 在生产者消费模型中,比如去餐馆吃饭的例子.生产者相当于厨师,队列相当于服务员,消费者就是你. 我们必须通过服务员,才能吃饭! 如果队列满了,队列会一直hold住.必须让消费 ...
- Python实现进度条功能
Python实现进度条功能 import sys, time def progress(percent, width=50): # 设置进度条的宽度 if percent >= 100: # 当 ...