<!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. Android Studio使用Gradle引入第三方库文件

    原文链接:https://blog.csdn.net/qiutiandepaomo/article/details/81538937 使用AndroidStudio开发Android应用的时候,会经常 ...

  2. Docker 优雅终止方案

    作为一名系统工程师,你可能经常需要重启容器,毕竟Kubernetes的优势就是快速弹性伸缩和故障恢复,遇到问题先重启容器再说,几秒钟即可恢复,实在不行再重启系统,这就是系统重启工程师的杀手锏.然而现实 ...

  3. Linux(CentOS)下安装docker

    Linux(CentOS)安装Docker 查看当前内核版本 [docker@localhost ~]$ uname -r 确保yum包更新到最新 [docker@localhost ~]$ sudo ...

  4. Mybatis：Mybatis 逆向工程 generator配置

    一.使用Maven方式引入Mybatis依赖Jar包(版本号自己改或定义)

  5. 11 shell中内置关键字[[]]:检查条件是否成立

    0.[[]] [] (())的对比 1.[[]]支持正则表达式 0.[[]] [] (())的对比 [[ ]] 对数字的比较不友好,所以使用 if 判断条件时,建议用(())来处理整型数字,用[[]] ...

  6. Acunetix引入了Docker支持，扫描统计信息以及将漏洞发送到AWS WAF的功能

    已针对Windows,Linux和macOS发布了新的Acunetix更新:14.2.210503151. 此Acunetix更新引入了Docker支持,针对每次扫描显示的新"扫描统计信息& ...

  7. Chirp Z-Transform

    Chirp Z-Transform 其实不是什么特别难的东西. 用于解决等比数列/类等比数列多点求值. \(b_i=\sum_{j=0}^{n}a_jc^{ij}\) 注意到 \(ij=\binom{ ...

  8. webpack 快速入门 系列 —— 性能

    其他章节请看: webpack 快速入门 系列 性能 本篇主要介绍 webpack 中的一些常用性能,包括热模块替换.source map.oneOf.缓存.tree shaking.代码分割.懒加载 ...

  9. python03篇 字符串常用方法和文件操作（一）

    一.字符串常用方法 s1 = ' abcsfsfaadfdd ' s = s1.strip() print(s) print(len(s.strip())) print(s.count('a')) # ...

  10. Spark编程基础_RDD编程

    RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象,它代表一个不可变.可分区.里面的元素可并行计算的集合.RDD具有数据流模型的特 ...