<!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. ceph-csi源码分析（3）-rbd driver-服务入口分析

    更多ceph-csi其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(3)-rbd driver-服务入口分析 当ceph-csi组件启动 ...

  2. python数字游戏

    import random a=random.randint(1,10) b=0 num=3 while num>0:    print("你还有"+str(num)+&qu ...

  3. css 设置小知识点记录

    1.消除控件与控件之间的边界 /* 公共样式 用于消除控件与控件之间的边界 */ *{ margin:0; padding:0} 2.设置背景图片大小与控件大小一致 #frame_top{ min-h ...

  4. docker部署的nginx非80端口无法访问

    请检查nginx容器是否只开启了80端口映射!!! 请检查nginx容器是否只开启了80端口映射!!! 请检查nginx容器是否只开启了80端口映射!!! 如果你访问的端口在nignx容器已经开启了端 ...

  5. Vue 全局组件

    全局注册的组件可以在其他组件内直接使用,它在整个Vue实例中都是全局有效的. 非单文件组件中使用 Vue.component('student-list', { template: ` <div ...

  6. Java：Java多线程实现性能测试

    创建多线程和线程池 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import ...

  7. linux 中获取进程和kill进程的几种方法

    ps: ps命令是最基本同时也是非常强大的进程查看命令,使用该命令可以确定有哪些进程正在运行和运行的状态.进程是否结束.进程有没有僵尸.哪些进程占用了过多的资源等等. 注意:ps是显示瞬间进程的状态, ...

  8. cron表达式详解（转）

    Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: (1) Seconds Minutes Hours DayofMonth Mo ...

  9. Android常用开源库（转）

    一 .基本控件 TextView HTextView 一款支持TextView文字动画效果的Android组件库. ScrollNumber 滚动数字控件 ticker 滚动数字控件 ReadMore ...

  10. Java | 集合（Collection）和迭代器（Iterator）

    集合(Collection) 集合就是Java中提供的一种 空器,可以用来存储多个数据. 集合和数组都是一个容器,它们有什么区别呢? 数组的长度是固定的,集合的长度是可变的. 数组中存储的是同一类型的 ...