一：

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. 多页面应用 VS 单页面应用

    多页面应用 每一次页面跳转,后端都会返回一个新的HTML文件, 优点:首屏时间快(只经历了一个HTTP请求),SEO效果好 缺点:页面切换慢 单页面应用 进行页面之间跳转时,并不去加载HTML文件,而 ...

  2. bzoj千题计划161：bzoj1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果

    http://www.lydsy.com/JudgeOnline/problem.php?id=1589 tarjan缩环后拓扑排序上DP #include<cstdio> #includ ...

  3. Bootstrap简单入门

    Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="U ...

  4. PHP7 学习笔记（二）PHP5.9 升级到PHP7 遇到的一些坑的记录（php-fpm 图解）

    apache_event_php-fpm 示意图: nginx-php-fpm示意图: Worker-Master-Server TCP-Nginx_PHP Nginx-FastCGI 1.使用$_G ...

  5. IEnumerable 与 IQueryable

    无论是在ado.net EF或者是在其他的Linq使用中,我们经常会碰到两个重要的静态类Enumerable.Queryable,他们在System.Linq命名空间下.那么这两个类是如何定义的,又是 ...

  6. 大数据时代快速SQL引擎-Impala

    背景 随着大数据时代的到来,Hadoop在过去几年以接近统治性的方式包揽的ETL和数据分析查询的工作,大家也无意间的想往大数据方向靠拢,即使每天数据也就几十.几百M也要放到Hadoop上作分析,只会适 ...

  7. Redis学习五：Redis的持久化-RDB

    RDB(Redis DataBase) 一.是什么 1.概念:在指定的时间间隔内将内存中的数据集快照写入磁盘,也就是行话讲的Snapshot快照,它恢复时是将快照文件直接读到内存里 2.执行方式: R ...

  8. async-lock模块理解

    在Appium1.7.1里集成了一个同步模块async-lock用来支持多会话功能. 只能说就算是以单线程高并发闻名的I/O密集型Nodejs也不得不扩展额外的同步块方法,或者说,在现有的计算机体系结 ...

  9. 你需要了解 Windows Phone 8.1 的11件事

    微软已经发布了其新一代手机操作系统 Windows Phone 8.1,拥有一些新的特性.从本质上来说,微软此次的大修让 Windows Phone 更接近 Android 和 iOS,对于使用体验的 ...

  10. LintCode 387: Smallest Difference

    LintCode 387: Smallest Difference 题目描述 给定两个整数数组(第一个是数组A,第二个是数组B),在数组A中取A[i],数组B中取B[j],A[i]和B[j]两者的差越 ...