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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>标题</title>
  6. <meta name="keywords" content="">
  7. <meta name="description" content="">
  8. <style>
  9. 	*{margin:0; padding:0; list-style:none;}
  10.  
  11. </style>
  12. </head>
  13. <body>
  14. <button id="btn">请求数据</button>
  15. <ul id="list"></ul>
  16. <script>
  17. 	var btn=document.getElementById('btn');
  18. 	var list=document.getElementById('list');
  19. 	btn.onclick=function (){
  20. 		// 1.创建XMLHttpRequest对象
  21. 		var xhr=null;
  22. 		if (window.XMLHttpRequest) {// 非IE5/6
  23. 			xhr=new XMLHttpRequest();//实例对象
  24. 		} else{// IE5/6
  25. 			xhr=new ActiveXObject('Microsoft.XMLHTTP');
  26. 		};
  27. 		// 2.打开与服务器的链接
  28. 		xhr.open('get','test04.xml?_='+new Date().getTime(),true);//生成不一样的url解决缓存问题
  29. 		// 3.发送给服务器
  30. 		xhr.send(null);//get请求
  31. 		// 4.响应就绪
  32. 		xhr.onreadystatechange=function (){
  33. 			if (xhr.readyState==4) {//请求完成
  34. 				if (xhr.status==200) {//ok
  35. 					var xmlDoc=xhr.responseXML;
  36. 					var names=xmlDoc.getElementsByTagName('name');
  37. 					var sexs=xmlDoc.getElementsByTagName('sex');
  38. 					var ages=xmlDoc.getElementsByTagName('age');
  39. 					var scores=xmlDoc.getElementsByTagName('score');
  40. 					for (var i = 0; i < names.length; i++) {
  41. 						list.innerHTML+='<li>姓名:'+names[i].innerHTML+'， 性别:'+sexs[i].innerHTML+'， 年龄:'+ages[i].innerHTML+'， 成绩:'+scores[i].innerHTML+'</li>';
  42. 					};
  43. 				} else{
  44. 					alert(xhr.status);
  45. 				};
  46. 			};
  47. 		}
  48. 	}
  49. </script>
  50. </body>
  51. </html>

　　xml:

  1. <persons>
  2. 	<person>
  3. 		<name>老王</name>
  4. 		<sex>女</sex>
  5. 		<age>19</age>
  6. 		<score>66</score>
  7. 	</person>
  8. 	<person>
  9. 		<name>老刘</name>
  10. 		<sex>男</sex>
  11. 		<age>23</age>
  12. 		<score>75</score>
  13. 	</person>
  14. 	<person>
  15. 		<name>老李</name>
  16. 		<sex>女</sex>
  17. 		<age>24</age>
  18. 		<score>88</score>
  19. 	</person>
  20. 	<person>
  21. 		<name>老张</name>
  22. 		<sex>男</sex>
  23. 		<age>31</age>
  24. 		<score>94</score>
  25. 	</person>
  26. </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. 使用Android studio作按键切换界面

    一.新建工程 二.新建一个按键             android:layout_width="wrap_content"         android:layout_hei ...

  2. 026 hibernate操作树形结构

    树形结构:也就是目录结构,有父目录.子目录.文件等信息,而在程序中树形结构只是称为节点. 一棵树有一个根节点,而根节点也有一个或多个子节点,而一个子节点有且仅有一个父节点(当前除根节点外),而且也存在 ...

  3. 开涛spring3(3.4) - DI 之 3.4 Bean的作用域

    3.4  Bean的作用域 什么是作用域呢?即“scope”,在面向对象程序设计中一般指对象或变量之间的可见范围.而在Spring容器中是指其创建的Bean对象相对于其他Bean对象的请求可见范围. ...

  4. Pandas日期数据处理：如何按日期筛选、显示及统计数据

    前言 pandas有着强大的日期数据处理功能,本期我们来了解下pandas处理日期数据的一些基本功能,主要包括以下三个方面: 按日期筛选数据 按日期显示数据 按日期统计数据 运行环境为 windows ...

  5. 浅谈 Java 主流开源类库解析 XML

    在大型项目编码推进中,涉及到 XML 解析问题时,大多数程序员都不太会选用底层的解析方式直接编码. 主要存在编码复杂性.难扩展.难复用....,但如果你是 super 程序员或是一个人的项目,也不妨一 ...

  6. 并行类加载与OSGI类加载

    这回来分析一下OSGI的类加载机制. 先说一下OSGI能解决什么问题吧. 记得在上家公司的时候,经常参与上线.上线一般都是增加了一些功能或者修改了一些功能,然后将所有的代码重新部署.过程中要将之前的服 ...

  7. 移动端车牌识别——可以嵌入智能手机系统里的新OCR识别技术

    移动端车牌识别技术,是在OCR光学字符识别技术的基础上研发的用来识别汽车号牌特征信息的图像识别技术.在国内,该项技术由北京易泊时代携手清华大学成功地将"国家863计划"项目成果-- ...

  8. 资深小白带你走进OS Memory

    图片来源:http://www.tomshardware.com/ 序言: Memory(内存)是一台计算机组成的重要部分,也是最基础的一部分.其它基础组件有主板.CPU.磁盘.显卡(可独立可集成)等 ...

  9. JavaFx TableView疑难详解

    TableView是个十分有用的控件,适应性和灵活性非常强,可以对它进行任意的修改,比如界面样式.功能.本文将从一步步提问的方式讲解TableView 创建已知列的TableView 已知列的表格的创 ...

  10. sql拼接，String和Stringbuffer的问题

    首先提出来一个问题: 下边两种拼字符串的方式,哪种更好一些,或者还有更好的方式? StringBuffer hql=new StringBuffer(); hql.append("from ...