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协议在互联网上提 ...
随机推荐
- vi与vim
vi 的使用 基本上 vi 共分为三种模式,分别是『一般模式』.『编辑模式』与『指令列命令模式』. 这三种模式的作用分别是: 一般模式:以 vi 打开一个档案就直接进入一般模式了(这是默认的模式).在 ...
- Go语言规格说明书 之 select语句（Select statements）
go version go1.11 windows/amd64 本文为阅读Go语言中文官网的规则说明书(https://golang.google.cn/ref/spec)而做的笔记,介绍Go语言的 ...
- CBAM: 卷积块注意模块
CBAM: Convolutional Block Attention Module 论文地址:https://arxiv.org/abs/1807.06521 简介:我们提出了卷积块注意模块 ( ...
- OCM_第二天课程：Section1 —》配置 Oracle 网络环境
注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...
- Chrome浏览器JSON格式化插件
经常我们使用浏览器调试某个接口,返回的结果看起来很乱如下 我们使用JSON-handle来进行格式化 安装 插件下载地址 插件下载后,在浏览器输入:chrome://extensions/ 将下载后的 ...
- python 全栈开发，Day17(初识面向对象)
一.引子 第一次参加工作,进入了一家游戏公司,公司需要开发一款游戏<人狗大战>一款游戏,首先得把角色和属性定下来. 角色有2个,分别是人和狗属性如下:人 :昵称.性别.血.攻击力狗 :名字 ...
- git merge简介
git merge的基本用法为把一个分支或或某个commit的修改合并到现在的分支上.我们可以运行git merge -h和git merge --help查看其命令,后者会直接转到一个网页(git的 ...
- .NetCore源码阅读笔记系列之Security （三） Authentication & AddOpenIdConnect
通过第二篇文章我们已经知道了授权的内部实现通过自定义的授权Handler来的,同样的道理 OpenIdConnect 同样是通过 OpenIdConnectHandler来请求授权的 那么它内部又是怎 ...
- Json的简单使用
1>:推荐JSON学习的网址:http://www.w3school.com.cn/json/index.asp 2>:JSON: JavaScript 对象表示法(JavaScript ...
- java:利用java的输入/输出流将一个文件的每一行+行号复制到一个新文件中去
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...