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快捷键

    超实用Java快捷键 Ctrl+1或F2快速修复 Ctrl+D快捷删除行 Shift+Enter 快速切换到下一行,在本行的任何位置都可 Ctrl+F11快速运行代码 Alt+上下键 快速移动行(可多 ...

  2. Spring Cloud 声明式服务调用 Feign

    一.简介 在上一篇中,我们介绍注册中心Eureka,但是没有服务注册和服务调用,服务注册和服务调用本来应该在上一章就应该给出例子的,但是我觉得还是和Feign一起讲比较好,因为在实际项目中,都是使用声 ...

  3. .Net程序员学用Oracle系列(8)：触发器、作业、序列、连接

    1.触发器 2.作业 2.1.作业调度功能和应用 2.2.通过 DBMS_JOB 来调度作业 3.序列 3.1.创建序列 3.2.使用序列 & 删除序列 4.连接 4.1.创建连接 4.2.使 ...

  4. MyBatis 3 User Guide Simplified Chinese.pdf

    MyBatis 3 用户指南 帮助我们把文档做得更好… 如果你发现了本文档的遗漏之处,或者丢失 MyBatis 特性的说明时,那么最好的方法就 是了解一下这个遗漏之处然后把它记录下来. 我们在 wik ...

  5. SharePoint 服务器端对象迁移文件夹

    最近有个需求,写个定时迁移文件夹的小程序,因为计时器任务比较繁琐,所以选择了控制台程序.然后,用windows的计划任务执行,也许,会有广大朋友需要类似的功能,简单的分享一下代码逻辑,功能非常简单,希 ...

  6. C# set get 函数 属性访问器

    属性访问器  拿东西就是Get,放东西就是Setprivate string namepublic String Name{set{name = value;}get{return name;}}ge ...

  7. Swift 入门之简单语法（四）

    函数 目标 掌握函数的定义 掌握外部参数的用处 掌握无返回类型的三种函数定义方式 代码实现 函数的定义 格式 func 函数名(行参列表) -> 返回值 {代码实现} 调用 let result ...

  8. RFM模型——构建数据库营销的商业战役！（转）

    RFM模型:R(Recency)表示客户最近一次购买的时间有多远,F(Frequency)表示客户在最近一段时间内购买的次数,M (Monetary)表示客户在最近一段时间内购买的金额.一般原始数据为 ...

  9. Unix文化--RTFM

    背景 从上个世纪70年代初unix被创建后的不久,它变得越来越流行起来,从最初的贝尔实验室,到后来的许多大学的计算机院系.这意味着越来越多的人需要学习如何使用unix. 可以预期的是,贝尔实验室的人都 ...

  10. Kotlin入门第三课：数据类型

    前文链接: Kotlin学习第一课:从对比Java开始 Kotlin入门第二课:集合操作 初次尝试用Kotlin实现Android项目 Kotlin的数据类型与Java类似,因此这篇文章主要看Kotl ...