<!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>

　　

原生ajax练习-post&xml的更多相关文章

  1. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

  2. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  3. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  4. python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  5. [译]脱离jQuery，使用原生Ajax

    脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...

  6. 原生AJAX如何异步提交数据？

    AJAX概述 AJAX:Asynchronous Javascript And XML,异步的JS和XML.2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提 ...

  7. 原生AJAX基础讲解及兼容处理

    原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...

  8. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  9. jQuery的$.ajax方法响应数据类型有哪几种？本质上原生ajax响应数据格式有哪几种，分别对应哪个属性？

    jQuery的$.ajax方法响应数据类型有:xml.html.script.json.jsonp.text 本质上原生ajax响应数据格式只有2种:xml和text,分别对应xhr.response ...

随机推荐

  1. Kubernetes将弃用docker？

    1.前言 近日,Kubernetes 官方发布公告,宣布自 v1.20 起放弃对 Docker 的支持,届时用户将收到 Docker 弃用警告,并需要改用其他容器运行时.并在1.23后不再支持dock ...

  2. 34、mysql数据库（介绍）

    34.1.什么是数据库: 数据库(database,DB)是指长期存储在计算机内的,有组织,可共享的数据的集合.数据库中的数据按一定的数学模型组织. 描述和存储,具有较小的冗余,较高的数据独立性和易扩 ...

  3. AcWing 242. 一个简单的整数问题

    给定长度为N的数列A,然后输入M行操作指令. 第一类指令形如"C l r d",表示把数列中第l~r个数都加d. 第二类指令形如"Q X",表示询问数列中第x个 ...

  4. Maven：Maven的project标签报错红线

    作者在外网完成demo项目,把Maven的本地库打成压缩包放进内网时,Maven的project标签报错红线,且别的依赖不报错,同时Maven不引入本地仓库的依赖包. 解决方法: 进入自己的Maven ...

  5. 1.3.8、通过RemoteAddr匹配

    server: port: 8080 spring: application: name: gateway cloud: gateway: routes: - id: guo-system4 uri: ...

  6. linux添加用户并授权访问目录

    1.创建用户及访问目录 useradd test -d /data/app -M设置密码passwd test 将访问目录权限全部赋予用户chown -R test /data/app2. 创建组(如 ...

  7. Archive for required library:’ WebRoot/WEB-INF/Mytag.tld’in project ‘TagTest’ cannot be read or is not a valid ZIP file

    Description::部署tld文件时报错 我的解决方法: 右击(当前项目)->Build Path->Java Build Path ( Configure Build Path.. ...

  8. 第四章 python的turtle库的运用

    我们可以尝试用python的自带turtle库绘制一条蟒蛇 首先我们设计一下蟒蛇的基本形状 我们先把这段蟒蛇绘制的实例代码贴出来,各位可以在自己的本地运行一下看看效果,然后我们再继续分析代码: 1 # ...

  9. linux驱动之LED驱动

    通过之前的学习,了解到linux驱动编写的流程是:先通过注册函数注册我们编写的入口函数,然后在入口函数中获取设备号->注册字符设备->自动创建设备节点->获取设备树信息,最后通过销毁 ...

  10. Linux常用命令 day day up

    一.Shell二.Linux命令的分类1.查看内部命令2.禁用内部命令三.Linux命令行格式四.编辑Linux命令行的辅助操作五.获得命令帮助的方法1.pwd--查看当前的工作目录2.cd--切换工 ...