<!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. Vue实现点击复制文本内容(原生JS实现)

    需求: 实现点击订单编号复制内容 实现步骤: 这里我是在element 的table组件里实现的步骤,仅供参考,实际上实现思路都大同小异 首先在需要点击的地方,添加点击事件 <div class ...

  2. 二QT中使用QTimer定时器

    QT中的定时器类叫QTimer(5.8以上版本才有),构造函数只需要提供父对象的指针 使用的话,需要调用QTImer的start方法,该方法以毫秒单位,每过指定毫秒时间,该类对象就会发出一个timeo ...

  3. 15、docker

    15.0.服务器使用说明: 服务器名称 ip地址 controller-node1 172.16.1.90 15.1.docker介绍: 1.Docker 是一个开源的应用容器引擎,基于 Go 语言 ...

  4. Linux 安装 git

    安装方法参考:http://www.jb51.net/os/RedHat/149653.html 具体内容: 在安装Git之前,需要先安装一些依赖包,安装依赖包之前可以先检查下是否已经安装. shel ...

  5. kmp算法 汇总

    来源:http://blog.csdn.net/qq_34494458/article/details/75253466 KMP算法,是由Knuth,Morris,Pratt共同提出的模式匹配算法,其 ...

  6. Gym - 101128E Wooden Signs DP

    题目大意: 一共n块木板,前两个数给出最底下木块的两个端点,后面n-1个数给出第i层的一个固定端点,问你木块的所有放置情况. 分析: 状态: d[i][j]表示第i个木块,第i-1块木板的未固定端点为 ...

  7. Mysql 主键的操作

    ​ 主键:primary key ,主要的键.一张表只能有一个字段可以使用对应的键,用来唯一的约束字段里面的数据,数据不能重复,这种键称之为主键,一张表只能最多有一个主键.  一.增加主键 方法一:在 ...

  8. ES2021 新特性！

    大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我(全网同名),解锁前端成长新姿势. 以下正文: 2021 年 6 月 22 日,第 121 届 Ecma 国际(Ecma Intern ...

  9. 『学了就忘』Linux基础 — 1、UNIX系统介绍

    目录 (一)UNIX系统介绍 1.UNIX系统发展历史 2.UNIX 主要发行版本 (二)GNU计划 1.GNU计划介绍 2.为何Stallman会发起这个GNU计划呢? 3.GNU的通用公共许可证: ...

  10. MySQL不支持DELETE使用表别名?

    最近做的需求经常和数据库在打交道, 因为系统页面上某些展示的字段并不是在前端写死的, 而是配置在数据库中, 这样的话便于维护和扩展. 于是遇到了一个MySQL中比较细节性的问题. 日常开发中不少程序员 ...