一：

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. Java并发编程原理与实战二十五：ThreadLocal线程局部变量的使用和原理

    1.什么是ThreadLocal ThreadLocal顾名思义是线程局部变量.这种变量和普通的变量不同,这种变量在每个线程中通过get和set方法访问, 每个线程有自己独立的变量副本.线程局部变量不 ...

  2. Python核心编程——Chapter15

    正则表达式在脚本语言里是最重要的一部分,这部分的题目真的不容怠慢. 开始这部分的题目的解答! 15.1识别下列字符串:bat,bit,but,hat,hit和hut. >>> imp ...

  3. 巧妙使用CSS创建可以打印的页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...

  4. Bzoj1939 [Croatian2010] Zuma

    Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 43  Solved: 31 Description 有一行 N 个弹子,每一个都有一个颜色.每次可以让超过 ...

  5. MFC基于对话框风格按钮控件添加图片的方法(大神止步)

    菜鸟还在研究这个东西,大神就不要看了.一直都在觉得用VC或VS建立的对话框总是全灰色感觉太单调了,如果可以在上面添加一些漂亮的图片就好了,今天终于实现了.其实挺简单的,下面就分几个步骤讲一下: 第一步 ...

  6. UNIX环境高级编程 第7章 进程环境

    本章涉及C/C++程序中main函数是如何被调用的.命令行参数如何传递给main函数.程序的内存空间布局.程序如何使用环境变量.程序如何终止退出. main函数 C程序或C++程序总是从main函数开 ...

  7. Linux设备驱动程序学习 高级字符驱动程序操作［阻塞型I/O和非阻塞I/O]【转】

    转自:http://blog.csdn.net/jacobywu/article/details/7475432 阻塞型I/O和非阻塞I/O 阻塞:休眠 非阻塞:异步通知 一 休眠 安全地进入休眠的两 ...

  8. C#基础学习之StreamReader和StreamWriter

    StreamReader和StreamWriter操作字符的 FileStream操作字节的 //使用StreamReader读取文件 using (StreamReader sr=new Strea ...

  9. Flask：cookie 和 session （0.1）

    Windows 10家庭中文版,Python 3.6.4,Flask 1.0.2 Cookie是什么?有什么用? 某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上的数据(通常 ...

  10. linux下/var/run目录下.pid文件的作用

    1.pid文件的内容用cat命令查看,可以看到内容只有一行,记录了该进程的ID 2.pid文件的作用防止启动多个进程副本 3.pid文件的原理进程运行后会给.pid文件加一个文件锁,只有获得该锁的进程 ...