异步处理XML异步数据——以原生的JavaScript与jQuery中的$.ajax()为例
2024-10-01 01:59:44
此文档解决以下问题:
一、原生的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)运行结果:
正文结束!~~
最新文章
- 浅谈系统架构<;一>;
- FirstUniqueCharacterInString
- 自定义Image自动切换图像控件
- C#用HttpClient抓取jd.com搜索框下拉数据
- sql server 中一次insert 多条的写法
- 关于PHP HTML <;input type=";file"; name=";img";/>;上传图片,图片大小,宽高,后缀名。
- java使用方法总结
- hdu 2426 Interesting Housing Problem 最大权匹配KM算法
- php连接oracle数据库(linux)(转)
- OC语言-02面向对象的三大特性
- ZOJ3556 How Many Sets I(容斥)
- windows下Memcached 架设及java应用
- ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习(实例)
- [iOS]C语言技术视频-01-变量的定义
- OR1200中指令Cache的结构
- Stanford依存句法关系解释
- Git无法提交,报错
- 关于C#中”扩展方法必须在非泛型静态类中定义“问题的解决
- js获取过滤条件中参数的快捷方式
- iOS AFNetWorking下得Basic Auth认证请求方式