ajax数据请求4（xml格式）:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>标题</title>

<meta name="keywords" content="">

<meta name="description" content="">

<style>

	*{margin:0; padding:0; list-style:none;}

</style>

</head>

<body>

<button id="btn">请求数据</button>

<ul id="list"></ul>

<script>

	var btn=document.getElementById('btn');

	var list=document.getElementById('list');

	btn.onclick=function (){

		// 1.创建XMLHttpRequest对象

		var xhr=null;

		if (window.XMLHttpRequest) {// 非IE5/6

			xhr=new XMLHttpRequest();//实例对象

		} else{// IE5/6

			xhr=new ActiveXObject('Microsoft.XMLHTTP');

		};

		// 2.打开与服务器的链接

		xhr.open('get','test04.xml?_='+new Date().getTime(),true);//生成不一样的url解决缓存问题

		// 3.发送给服务器

		xhr.send(null);//get请求

		// 4.响应就绪

		xhr.onreadystatechange=function (){

			if (xhr.readyState==4) {//请求完成

				if (xhr.status==200) {//ok

					var xmlDoc=xhr.responseXML;

					var names=xmlDoc.getElementsByTagName('name');

					var sexs=xmlDoc.getElementsByTagName('sex');

					var ages=xmlDoc.getElementsByTagName('age');

					var scores=xmlDoc.getElementsByTagName('score');

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

						list.innerHTML+='<li>姓名:'+names[i].innerHTML+'， 性别:'+sexs[i].innerHTML+'， 年龄:'+ages[i].innerHTML+'， 成绩:'+scores[i].innerHTML+'</li>';

					};

				} else{

					alert(xhr.status);

				};

			};

		}

	}

</script>

</body>

</html>

　　xml:

<persons>

	<person>

		<name>老王</name>

		<sex>女</sex>

		<age>19</age>

		<score>66</score>

	</person>

	<person>

		<name>老刘</name>

		<sex>男</sex>

		<age>23</age>

		<score>75</score>

	</person>

	<person>

		<name>老李</name>

		<sex>女</sex>

		<age>24</age>

		<score>88</score>

	</person>

	<person>

		<name>老张</name>

		<sex>男</sex>

		<age>31</age>

		<score>94</score>

	</person>

</persons>

　　

ajax数据请求4（xml格式）的更多相关文章

  1. ajax 异步请求webservice(XML格式)

    function callAjaxWebservice(){ alert("call ajax"); try { $.ajax({ type: "POST", ...

  2. ajax数据请求5（php格式）

    ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  3. ajax数据请求3（数组json格式）

    ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  4. ajax数据请求2（json格式）

    ajax数据请求2(json格式) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  5. VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求

    开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...

  6. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

  7. Ajax --- 数据请求

    下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...

  8. AJAX数据请求

    ajax数据请求需要四个步骤:(请求文本内容) 1.创建XMLHttpRequest对象: 2.打开与服务起的链接: 3.发送给服务器: 4.响应就绪. <!DOCTYPE html> & ...

  9. 微信小程序的ajax数据请求wx.request

    微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...

随机推荐

  1. Java学习笔记——排序算法之快速排序

    会当凌绝顶,一览众山小. --望岳 如果说有哪个排序算法不能不会,那就是快速排序(Quick Sort)了 快速排序简单而高效,是最适合学习的进阶排序算法. 直接上代码: public class Q ...

  2. 读《Java并发编程的艺术》（一）

    离开博客园很久了,自从找到工作,到现在基本没有再写过博客了.在大学培养起来的写博客的习惯在慢慢的消失殆尽,感觉汗颜.所以现在要开始重新培养起这个习惯,定期写博客不仅是对自己学习知识的一种沉淀,更是在督 ...

  3. 使用configuration配置结束在quartz.net中使用硬编码Job,Trigger任务提高灵活性

    经常在项目中遇到定时任务的时候,通常第一个想到的是Timer定时器,但是这玩意功能太弱鸡,实际上通常采用的是专业化的第三方调度框架,比如说 Quartz,它具有功能强大和应用的灵活性,我想使用过的人都 ...

  4. android组团开发站立会议第三周第一次会议

    会议时间:组队开发第三周  星期一   开始时间晚上9:30-10:00 会议地点:学一食堂 二楼 到会人员:李志岩  王亚蕊 安帅 薛禄坤 张新宇 孙存良 会议概要:              1. ...

  5. Managing Spark data handles in R

    When working with big data with R (say, using Spark and sparklyr) we have found it very convenient t ...

  6. C#操作CAD-初始化、引用dll

    操作cad等方式有很多,比如C,C++,vb.lisp(效率最高,但是语言结构性太差)和C#,因为我等个人习惯和方便等原因,在此讲解一下用C#操作流程,后续会更新操作图层.扩展数据.绘图等操作步骤.当 ...

  7. js实现分页

    <html> <head> <meta charset='utf-8'> <script type="text/javascript" s ...

  8. Windows 7 下安装mysql-5.7.18-winx64.zip

    mysql-5.7以后压缩包安装有了不小的变化 第一步:到官网下载https://dev.mysql.com/downloads/mysql/ 第二步:解压到一个文件夹 第三步:配置环境变量 把;%M ...

  9. 【Windows 10 应用开发】如何防止应用程序被截屏

    今天老周只想跟大伙们分享一个小技巧,是的,小小的技巧,很简单,保证你能学会的,要是学不会,可以考虑跳泰山. 有些时候,我们可能会想到不要让应用程序界面上显示的内容被截屏,要阻止应用界面呈现在截图上,可 ...

  10. 机器学习：线性判别式分析(LDA)

    1.概述      线性判别式分析(Linear Discriminant Analysis),简称为LDA.也称为Fisher线性判别(Fisher Linear Discriminant,FLD) ...