一：

1.优缺点

　　

二：大纲

1.结构设计

　　

三：程序

1.xml

 <?xml version="1.0" encoding="utf-8"?>

 <details>

   <name>Andy Budd</name>

   <website>http://andybudd.com/</website>

   <email>andy@clearleft.com</email>

 </details>

2.css

body {

  background: #fff url("logo.png") fixed no-repeat top left;

  color: #321;

  font-family: Myriad,"Lucida Grande","Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;

  line-height: 1.6;

  margin: 1em 20%;

}

a {

  color: #674;

  font-weight: bold;

  text-decoration: none;

}

a:hover {

  color: #896;

  text-decoration: underline;

}

　　

3.index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

     @import url("clearleft.css");

 </style>

 <script type="text/javascript">

     window.onload=function(){

         var aNodes=document.getElementsByTagName("a");

         for(var i=0;i<aNodes.length;i++){

             aNodes[i].onclick=function(){

                 var request=new XMLHttpRequest();

                 var method="GET";

                 var url=this.href;

                 request.open(method,url);

                 request.send(null);

                 request.onreadystatechange=function(){

                     if(request.readyState==4){

                         if(request.status==200||request.status==304){

                             //XML格式

                             var result=request.responseXML;

                             //构建对应节点

                             var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;

                             var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;

                             var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;

                             //<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>

                             //<a href="http://andybudd.com/">http://andybudd.com/</a>

                             var aNode=document.createElement("a");

                             aNode.appendChild(document.createTextNode(name));

                             aNode.href="mailto:"+email;

                             var h2Node=document.createElement("h2");

                             h2Node.appendChild(aNode);

                             var aNode2=document.createElement("a");

                             aNode2.appendChild(document.createTextNode(website));

                             aNode2.href=website;

                             var detailsNode=document.getElementById("details");

                             detailsNode.innerHTML="";                            // 在每次之前进行清空

                             detailsNode.appendChild(h2Node);

                             detailsNode.appendChild(aNode2);

                         }

                     }

                 }

                 return false;

             }

         }

     }

 </script>

 </head>

 <body>

     <h1>People</h1>

     <ul>

         <li><a href="files/andy.xml">Andy</a></li>

         <li><a href="files/richard.xml">Richard</a></li>

         <li><a href="files/jeremy.xml">Jeremy</a></li>

     </ul>

     <div id="details"></div>

 </body>

 </html>

四：效果

1.

　　

　　

003 Ajax中传输格式为XML的更多相关文章

  1. 004 Ajax中传输格式为JSON

    一: 1.介绍 2.嵌套 3.json解析 4.优缺点 二:json功能程序测试 1.设计 2.程序 <!DOCTYPE html> <html> <head> & ...

  2. 002 Ajax中传输格式为HTML

    一: 1.介绍 返回的数据可以直接插入到需要的地方. 2.优缺点 二:程序大纲 1.结构 三:程序 1.css body { background: #ffb url("logo.png&q ...

  3. ASP.NET WebServce项目下添加Http服务，支持Get，Post请求方式;传输格式json/xml

    由于WEBServce老项目中需要增添新的接口,而且添加的接口不希望被其它项目以引用Servces方式使用. 那么得在现有Service项目中添加Http请求方式来实现系统间数据交互.只需要告知请求地 ...

  4. ajax中json格式数据如何朝后端发送数据

  5. Ajax中XML和JSON格式的优劣比较

    刚做完一个小的使用Ajax的项目.整个小项目使用JavaScript做客户端,使用PHP做服务器端.利用xmlHttpRequest组件作为交互工具,利用XML作为数据传输的格式.做完后基本做一个简单 ...

  6. Ajax中的JSON格式与php传输过程的浅析

    在Ajax中的JSON格式与php传输过程中有哪些要注意的小地方呢? 先来看一下简单通用的JSON与php传输数据的代码 HTML文件: <input type="button&quo ...

  7. ajax中网页传输（三）XML——下拉列表显示练习

    XML:页面之间传递数据,跨平台传递 HTML:超文本标记语言,核心标签 XML的形势为 <xml version='1.0'> <Nation> <one> &l ...

  8. Ajax中返回数据的格式

    Ajax中常见的返回数据的格式有三种:分别为文本,XML和JSON 返回的文本格式我们在上一堂课Ajax基础介绍中已经介绍过了 Ajax.php Form.html:通过Ajax对象的response ...

  9. ajax中网页传输（一）TEXT——带有删除功能的数据库表格显示练习

    网页之间传输的三种方式:TEXT.JSON.XML. 本章将讲解带有TEXT形势的ajax网页传输 第一:body部分代码 <title>ajax中TEXT讲解并且带有删除功能的表格< ...

随机推荐

  1. 在升级Windows 8.1后，桌面的右下角显示"SecureBoot未正确配置"

    原地址为:http://ask.zol.com.cn/q/201881.html 第一种模式BIOS: 在将Secure Boot设置为Enabled后,Secure Boot Status依然为关闭 ...

  2. ansible安装后运行报错cryptography

    [root@kazihuo ~]# ansible all -m ping ERROR! Unexpected Exception, this is probably a bug: (cryptogr ...

  3. Python练习-基于socket的FTPServer

    # 编辑者:闫龙 import socket,json,struct class MySocket: with open("FtpServiceConfig","r&qu ...

  4. Python练习-Property的用法

    # 编辑者:闫龙 #要求一:自定义用户信息数据结构,写入文件,然后读出内容,利用eval重新获取数据结构 with open('user.db','w') as write_file:#创建并以写入的 ...

  5. C# Func的同步、异步调用

    using System; namespace ActionDemo { class Program { static void Main(string[] args) { Console.Write ...

  6. MongoDB 查询整理

    查询所有sql:  select * from table_namemongodb:   db.getCollection('期刊论文').find({}) 如上图所示,获取期刊论文collectio ...

  7. 【CTF MISC】文件内容反转方法-2017世安杯CTF writeup详解

    Reverseme 用winhex打开,发现里面的字符反过来可以正常阅读,所以文件被倒置了 Python解题程序如下 with open('reverseMe','rb') as f: with op ...

  8. CEC2017 benchmark function调用接口

    CEC2017 benchmark function可以从这里下载. 导师最近给了个课题让我自己研究,跟智能优化算法相关的,必不可免的要用到最新的CEC2017 benchmark function, ...

  9. 二十、springboot之jpa开发@MappedSuperclass 注解说明

    @MappedSuperclass使用条件: 当我们进行开发项目时,我们经常会用到实体映射到数据库表的操作,此时我们经常会发现在我们需要映射的几个实体类中,有几个共同的属性,例如编号ID,创建者,创建 ...

  10. poj1095

    题意:给出n,要求输出第n个二叉树,二叉树编号规则如下图所示: 分析:g[i]表示有i个节点的二叉树,有多少种.f[i][j]表示有i个节点,且左子树有j个节点的树有多少种. sumg[i]表示g数组 ...