原生ajax练习-post&xml
2024-09-04 06:38:17
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
h2 {color: #555; }
.p1 {color: #f99; }
.p2 {color: #9f9; }
.p3 {color: #99f; } </style>
<ul id="ul">
<li>
<p class="p4"></p>
<h2></h2>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</li>
</ul>
</body>
</html>
<script>
window.onload = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} var url = 'xml/1.xml?';
var para = '?_t='+new Date().getTime();//传递到send()当中去，不会有缓存 // xhr.setRequestHeader('Content-Type','application/x-form-www-urlencoded')
// Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED. xhr.open('post',url,true);//url中不再包含参数
xhr.setRequestHeader('Content-Type','application/x-form-www-urlencoded')//必须位于open之后，send之前
xhr.send(para);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200 ) {
//得到的XML是一个对象,这个对象有各种属性和方法
var data = xhr.responseXML;
var NOVEL = data.getElementsByTagName('NOVEL')[0];
var books = NOVEL.getElementsByTagName('book');
var len = books.length;
//console.log(NOVEL);
var str = '';
for(var i=0;i<len;i++) {
str+= '<li><h2>'+getNodeText(books[i].getElementsByTagName('name')[0])+'</h2>';
str+= '<p class="p4">'+getNodeText(books[i].getElementsByTagName('author')[0])+'</p>';
str+= '<p class="p2">'+getNodeText(books[i].getElementsByTagName('publish_time')[0])+'</p>';
str+= '<p class="p3">'+getNodeText(books[i].getElementsByTagName('publish_time')[0])+'</p>';
str+= '<p class="p1">'+getNodeText(books[i].getElementsByTagName('publish_time')[0])+'</p></li>';
}
document.getElementById('ul').innerHTML = str;
}
} function getNodeText(node){
if(window.ActiveXObject){//IE
return node.text;
}else{//标准浏览器
if(node.nodeType == 1){
return node.textContent;
}
}
} }
</script>
<?xml version="1.0" encoding="utf-8"?>
<bookstore>
<NOVEL>
<book>
<name>Herry Porter</name>
<author>J.K Rolling</author>
<publish_time>2058</publish_time>
</book>
<book>
<name>三国演义</name>
<author>罗贯中</author>
<publish_time>1984</publish_time>
</book>
<book>
<name>水浒传</name>
<author>施耐庵</author>
<publish_time>2501</publish_time>
</book>
<book>
<name>红楼梦</name>
<author>高雪琴</author>
<publish_time>1865</publish_time>
</book>
</NOVEL>
<MATH>
<book>
<name>圆周率</name>
<author>猪无能</author>
<publish_time>1869</publish_time>
</book>
<book>
<name>勾股定理</name>
<author>沙悟净</author>
<publish_time>1875</publish_time>
</book>
<book>
<name>相对论</name>
<author>唐玄奘</author>
<publish_time>1886</publish_time>
</book>
</MATH>
</bookstore>
最新文章
- 关于setInterval()你所不知道的地方
- hashMap 深入理解
- 关于防止App被第三方应用Kill掉的问题
- MVC模式下如何实现RegisterStartupScript等功能
- 初识Windows窗体(包括各种控件,属性,方法)
- 【转】【WPF】WPF 自定义快捷键命令（Command）
- Apache Thrift
- Hide/Show running Console
- EntityFramework 和 linq 判断是否在指定时间段内的方法
- SASS组件开发
- 网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中
- bzoj1355——2016——3——15
- rsync安装及其配置
- 基于Python的数据分析(1)：配置安装环境
- java网页爬数据获取class中的空格
- [LeetCode] Random Point in Non-overlapping Rectangles 非重叠矩形中的随机点
- MSIL 教程
- 获取CPU序列号、网卡MAC地址、硬盘序列号
- Java中BigDecimal类介绍及用法
- 矩阵快速幂（以HDU1757为例）