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学习笔记——设计模式之三.装饰模式

    函数应该做一件事,做好这件事,只做这一件事. --Clean Code 装饰模式,上代码: 先定义零件类: package cn.no3.decorator.template; public abst ...

  2. Android 模块化探索与实践

    首发于<程序员>杂志五月刊 一.前言 万维网发明人 Tim Berners-Lee 谈到设计原理时说过:"简单性和模块化是软件工程的基石:分布式和容错性是互联网的生命." ...

  3. XML编辑工具

    [标题]XML编辑工具 [开发环境]Qt 5.2.0 [概要设计]使用QT的视图/模型结构.treeview控件以树形结构显示所要操作的XML文件,并实现xml的相关操作 [详细设计] 主要包含 no ...

  4. MyBatis之级联小结

    在这之前我们知道了MyBatis为我们提供了三种级联:一对一关系(assocation).一对多关系(collection).鉴别器(discriminator).在最后一个鉴别器例子中,看到了当层级 ...

  5. javascript 面向对象基础 (1)

    常见的创建对象的方式有3种: ① 声明变量的方式 var obj1 = { key1: "val1", key1: "val2", show: function ...

  6. VHDL乘除法及转换

    首先鄙视一下这个不智能的语言 1.要进行乘法与除法,数据类型必须是signed 2.两个16位的数相乘,结果必须是32位的 3.乘以2的n次幂的数可以直接乘,之后截位也比较方便,(其实直接移位就可以) ...

  7. 图的M着色问题

    问题描述: 给定无向连通图 G 和 m 种不同的颜色.用这些颜色为图 G 和各顶点着色,每个顶点着一种颜色.是否有一种着色法使得图 G 中每条边的两个顶点着不同的颜色.这个问题是图的 m 可着色判定问 ...

  8. Redis 小白指南(一)- 简介、安装、GUI 和 C# 驱动介绍

    Redis 小白指南(一)- 简介.安装.GUI 和 C# 驱动介绍 目录 简介 安装 入门指令 GUI 工具 C# 驱动介绍 简介 ANSI C 编写,开源,基于内存,可持久化,一个键值对的数据库, ...

  9. javaSE_06Java中的数组(array)-思维导图

    思维导图看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 : 2)右击在新标签中打开放大查看 (IE不支持,搜狗,360可以):

  10. OpenGL ES 2.0 渲染管线 学习笔记

    图中展示整个OpenGL ES 2.0可编程管线 图中Vertex Shader和Fragment Shader 是可编程管线: Vertex Array/Buffer objects 顶点数据来源, ...