<!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. 5、修改oracle的字符集

    注意:修改字符集前需要将表空间进行数据泵备份: 5.1.修改server端字符集: 1.登录到oracle实例查看字符集: [oracle@slave-node2 ~]$ echo $ORACLE_S ...

  2. 20、高可用数据同步工具drbd介绍

    20.1.什么是drbd: 20.2.drbd的工作原理: 20.3.drbd的同步模式: 1.实时同步模式: 2.异步同步模式: 20.4.drbd生产应用场景: 1.生产场景中drbd常用于基于高 ...

  3. 让你发布的nuget包支持源代码调试

    前情概要 在不久的从前(也还是要以年为单位哈), 我们如果需要调试第三方代码, 或者框架代码很麻烦. 需要配置symbols, 匹配原始代码路径等. 为此, MS推出了 Source Link 功能, ...

  4. OpenMVG 系列 (1)：入门简介

    1  OpenMVG 简介  全称 Open Multiple View Geometry,是法国人 Pierre Moulon 读博期间开源的一个 C++ 库 最早版本 OpenMVG 0.1 是 ...

  5. nexus AD 集成配置

    nexus AD 集成配置 管理用户登录 点击设置图标-->LDAP-->Create connection 进入AD 集成配置页面 Connection配置 User and group ...

  6. XCTF-boomshakalaka-3

    这题讲道理出的挺脑洞的,apk直接拖入jeb打开,找到主活动 这里有两个方法,一个是onCreate()方法,还有一个是onCreateView()方法 onCreate()方法调用了a这个对象的d方 ...

  7. linux学习之路第二天（xshell和xftp的使用图解）

    以上xshell的连接过程 2.远程上传和下载文件xftp6 一定要换成22和sftp,否则连接不上 如果出现中文乱码的情况 先点击那个小齿轮 再点击选项 把编码编程UTF-8就ok了

  8. Docker部署Redis集群(主从复制 高可用)

    环境 vmware12+centos7 关于环境安装可以参考我的另一篇博客 https://www.cnblogs.com/pengboke/p/13063168.html 1.清理环境 我这里用的虚 ...

  9. ARC 122 简要题解

    ARC 122 简要题解 传送门 A - Many Formulae 考虑对于每个数分别算其贡献. 通过枚举该数前面的符号,借助一个非常简单的 \(\mathrm{DP}\)(\(f_{i,0/1}\ ...

  10. Luogu P4553 80人环游世界

    link 题目大意 自东向西有 \(n\) 个国家.有 \(m\) 个人,他们可以选择 \(n\) 个国家中任意一个开始,任意一个结束,但路线必须自东向西,且第 \(i\) 个国家必须恰好经过 \(v ...