异步处理XML异步数据——以原生的JavaScript与jQuery中的$.ajax()为例
此文档解决以下问题：
一、原生的JavaScript从服务器端输出XML格式数据
1.XMLHttpRequest对象的运用
XMLHttpRequest对象的open()方法
XMLHttpRequest对象的send()方法
XMLHttpRequest对象的onreadystatechange事件运用
XMLHttpRequest对象的readyState属性
XMLHttpRequest对象的status属性
XMLHttpRequest对象的responseXML属性
2.document对象的运用
createTextNode()方法
getElementsByTagName() 方法
3.元素对象的运用
appendChild() 方法
childNodes 属性
nodeValue 属性
4.Table对象的运用
insertRow() 方法
5.tr对象的运用
insertCell()方法
二、jQuery的$.ajax()从服务器端输出XML格式数据
7.$.ajax()方法
8.find()方法
9.each()方法
10.append()方法
一、原生的JavaScript从服务器端输出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"> var xhtp;
function createXMLhttpRequet() {
//创建XMLHttpRequest对象
if(window.XMLHttpRequest) {
//支持ie6 以上
xhtp = new XMLHttpRequest();
} else {
xhtp = new ActiveXObject("Microsoft.XMLHTTP");
}
//return xhtp;
} function addTableRow(title, author, year) {
//为表格添加新行
var oTable = document.getElementById("member");
//insertRow() 方法用于在表格中的指定位置插入一个新行
var oTr = oTable.insertRow(oTable.rows.length);
var aText = new Array();
//createTextNode() 方法 创建一个文本节点:
aText[] = document.createTextNode(title);
aText[] = document.createTextNode(author);
aText[] = document.createTextNode(year); for(var i = ; i < aText.length; i++) {
//insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
var oTd = oTr.insertCell(i);
//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
oTd.appendChild(aText[i]);
} } function DrawTable(xhtp) {
//循环显示xml文件的数据，DOM方法操作XML文档
xmlDocs = xhtp.getElementsByTagName("book");
for(var i = ; i < xmlDocs.length; i++) {
//获取xml文件的指定元素节点的文本节点的值
xmlDoc = xmlDocs[i];
Node1 = xmlDoc.getElementsByTagName("title")[].childNodes[].nodeValue;
Node2 = xmlDoc.getElementsByTagName("author")[].childNodes[].nodeValue;
Node3 = xmlDoc.getElementsByTagName("year")[].childNodes[].nodeValue;
//把获取的文本节点的值显示在表格的新行中
//$("#member").append("<tr><td>"+Node1+"</td><td>"+Node2+"</td><td>"+Node3+"</td></tr>");
addTableRow(Node1, Node2, Node3);
} } function handleStateChange() {
//响应请求
if(xhtp.readyState == && xhtp.status == ) {
DrawTable(xhtp.responseXML);
}
} function getXML(addressXML) { var url = addressXML;
//1.创建XMLHttpRequest对象，调用createXMLhttpRequet函数
createXMLhttpRequet();
//2.规定请求，get方式请求，true异步传输
xhtp.open("GET", url, true);
//3.发送请求
xhtp.send(null);
//4.响应请求，调用handleStateChange函数
xhtp.onreadystatechange = handleStateChange; } </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="提交" onclick="getXML('books.xml')" />
<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></year>
<price>29.99</price>
</book>
<book category="WEB">
<title>Learning XML1</title>
<author>Erik T. Ray</author>
<year></year>
<price>39.95</price>
</book>
</bookstore>
3)运行结果：
二、jQuery的$.ajax()从服务器端输出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 addTableRow(title, author, year) {
// var oTable = document.getElementById("member");
// //insertRow() 方法用于在表格中的指定位置插入一个新行
// var oTr = oTable.insertRow(oTable.rows.length);
// var aText = new Array();
// //createTextNode() 方法 创建一个文本节点:
// aText[0] = document.createTextNode(title);
// aText[1] = document.createTextNode(author);
// aText[2] = document.createTextNode(year);
//
// for(var i = 0; i < aText.length; i++) {
// //insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
// var oTd = oTr.insertCell(i);
// //appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
// oTd.appendChild(aText[i]);
// }
// }
function getXML(addressXML) {
$.ajax({
type: "GET",
url: addressXML,
dataType: "xml",
success: function(myXML) {
//myXML 相当于xhtp.responseXML
$(myXML).find("book").each(function() {
Node1 = $(this).find("title")[].childNodes[].nodeValue;
Node2 = $(this).find("author")[].childNodes[].nodeValue;
Node3 = $(this).find("year")[].childNodes[].nodeValue;
//addTableRow(Node1, Node2, Node3);
$("#member").append("<tr><td>"+Node1+"</td><td>"+Node2+"</td><td>"+Node3+"</td></tr>"); })
}
})
}
</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="提交" onclick="getXML('books.xml')" />
<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></year>
<price>29.99</price>
</book>
<book category="WEB">
<title>Learning XML1</title>
<author>Erik T. Ray</author>
<year></year>
<price>39.95</price>
</book>
</bookstore>
3)运行结果：
正文结束！~~
异步处理XML异步数据——以原生的JavaScript与jQuery中的$.ajax()为例的更多相关文章
- 原生 JS 与 jQuery 中的 AJAX
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更 ...
- JavaScript原生封装ajax请求和Jquery中的ajax请求
前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...
- js中的原生Ajax和JQuery中的Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...
- jQuery中使用Ajax获取JSON格式数据示例代码
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- JQuery中使用Ajax实现诸如登录名检测等异步请求Demo
上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册 ...
- JQuery -- Jquery 中的Ajax, Jquery解析xml文件
1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...
- json数据的格式，JavaScript、jQuery读取json数据
JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...
- jquery中获取ajax请求返回数据的方法
function getPageTotalAndDataTotal(page) { //设置一个变量用于接收ajax返回的值 var pageTotal = 0; // 获取页数与数据总数 $.aja ...
随机推荐
- 016_nginx运维问题总结
一.关于nginx请求包过大的解决思路 message-api.jyall.me.conf nginx报错问题问题定位,经分析跟接入navigator后关联不大,可参考一下结论连接超时抓包分析了一下每 ...
- 关于ftp上传changeWorkingDirectory()方法的路径切换问题
在上传时 FTPClient提供了upload方法,对于upload(file,path)的第二个参数path ,上传到哪里的这个路径, ftp是利用changeWorkingDirectory()方 ...
- Oracle 数据库、实例、用户、表空间、表之间的关系
数据库: Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制文件.联机日志.参数文件).其实oracle数据库的概念和其它数据库不一样,这里的数据库是一个操作系统只有一个库. ...
- python+selenium四：iframe查看、定位、切换
iframe是HTML里面嵌套HTML的一种框架 1.查看iframe 1.Top Window:可直接定位 2.iframe#i:说明此元素在iframe上 3.iframe显示为空:(id或nam ...
- js中字符串概念
字符串概念:所有带单引号和双引号的叫做字符串 字符串的数据类型:字符串既是基本数据类型,又是复合数据类型. 字符串存储在内存里[只读数据段]的地方.字符串的变量里存储的是字符串的地址. [注]使用起来 ...
- oracle中游标详细用法
转自:http://blog.csdn.net/liyong199012/article/details/8948952 游标的概念: 游标是SQL的一个内存工作区,由系统或用户以变量的形式定 ...
- mysql操作查询结果case when then用法举例
举例1: 使用该查询,得出iFavoriteID,iFavUserType ,cUser,iArticleID,dFavoriteTime五个字段的值: SELECT iFavoriteID,CASE ...
- sql分组获取第一条或者最小一条值
很多人都在问这个问题,现在记录一下 select id from test as a where id = (select min(b.id ) from test as b where a.pid ...
- zookeeper单机集群搭建
1. 下载zookeeper 参考官方文档下载一节:https://zookeeper.apache.org/doc/current/zookeeperStarted.html#sc_Download ...
- 浅谈Spring MVC知识
关于MVC框架,我相信大家都不陌生,都会说也就是模型-视图-控制器这三层的框架结构,如果你参加面试的时候考官会问:“MVC框架是什么?你说一说.”其实我们都知道这个问题还需要问的,只要你是一个开发人员 ...