一：

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. C++ Core Guidelines

    C++ Core Guidelines September 9, 2015 Editors: Bjarne Stroustrup Herb Sutter This document is a very ...

  2. git push时报错fatal: Could not read from remote repository.

    后来发现,出现这个问题是因为仓库地址不对 使用如下命令先查看一下: $ git remote -v 发现跟github的地址不一致 然后在终端输入:git remote set-url origin ...

  3. 同一条sql语句，只是改变了搜索的条件，就很慢？

    重建索引: ) 显示索引信息: dbcc showcontig('表名’) 具体参考:http://www.cnblogs.com/bluedy1229/p/3227167.html

  4. JS回调函数的应用，原来这么简单！

    JS的回调函数很简单,看代码: 在a.js中 var myback = null; function load(obj){ myback = obj; } function save(){ // 后台 ...

  5. 阿里云的OCS缓存机制

    OCS简介 OCS( Open Cache Service)为分布式高速缓存服务,主要实现热点数据的快速响应: OCS支持Key/Value的数据结构,兼容memcachebinary protoco ...

  6. 新的玩具：Windows上的awesome

    平铺式窗口管理器 基于xwindow(Linux/Unix采用的图形系统)有成千上百种窗口管理器.其中有一类窗口管理器很古怪,所有应用程序的窗口没有互相遮挡,而是平铺到屏幕上,这类窗口管理器叫 平铺式 ...

  7. 【转】WireShark 过滤规则

    原链:[渗透神器系列]WireShark wireshark是一款网络流量抓取分析神器,也是安全工具使用排行中排名第一的工具.使用wireshark必须要牢记一些常用的数据包过滤规则,对于寻找一些特定 ...

  8. numpy多项式拟合

    关于解决使用numpy.ployfit进行多项式拟合的时候请注意数据类型,解决问题的思路就是统一把数据变成浮点型,就可以了.这是numpy里面的一个bug,非常low希望后面改善. # coding: ...

  9. Linux基础-awk使用

    打印uid在30~40范围内的用户名:awk -F: '$3>=30&&$3<040{print $1}' passwd 打印第5-10行的行号和用户名:awk -F: ' ...

  10. JS模块规范

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...