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协议在互联网上提 ...
随机推荐
- tomcat jsp页面乱码解决
浏览器接收服务器响应的中文参数: JSP页面中告诉浏览器使用什么编码: <%@ page language="java" contentType="text/htm ...
- java FTPClient 上传文件 0kb 问题
解决方法: 1.本地防火墙关闭了2.服务端端防火墙关闭 CentOS 7.0关闭默认防火墙启用iptables防火墙 操作系统环境:CentOS Linux release 7.0.1406(Core ...
- 随机森林学习-sklearn
随机森林的Python实现 (RandomForestClassifier) # -*- coding: utf- -*- """ RandomForestClassif ...
- C <string.h>常用函数介绍
1. strcpychar *strcpy(char *destin, char *source);功能:将source指向的字符串拷到destin. int main() { ]; "; ...
- 关于ie7下display：inline-block；不支持的解决方案。
摘要: 声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. 今天码的时候遇到这个问题了. 如果本身是内联元素的,把它的display属性设置设置为inline ...
- JQuery中jsCharts图表插件（十）
一:1.jsCharts图表插件 注意:从官方下来的例子都没指定页面编码,在这种情况下,浏览器就会使用默认设置中文编码:GB2312,GBK等:导致无法执行. 请在html代码中的<head&g ...
- IntelliJ IDEA设置不自动打开最后关闭的项目
- AOJ 2200 Mr. Rito Post Office （floyd+DP）
题意: 快递到了:你是某个岛国(ACM-ICPC Japan)上的一个苦逼程序员,你有一个当邮递员的好基友利腾桑遇到麻烦了:全岛有一些镇子通过水路和旱路相连,走水路必须要用船,在X处下船了船就停在X处 ...
- POJ 3616 Milking Time 【DP】
题意:奶牛Bessie在0~N时间段产奶.农夫约翰有M个时间段可以挤奶,时间段f,t内Bessie能挤到的牛奶量e.奶牛产奶后需要休息R小时才能继续下一次产奶,求Bessie最大的挤奶量.思路:一定是 ...
- 关于tomcat性能优化
前言 关于 Tomcat 性能调优,一直以来就是运维面试的一个重要话题.今天我们就简单聊聊 Tomcat 如何进行性能优化? 首先声明,我不会去说 Tomcat 是什么,内部结构,原理什么的.我不懂. ...