ajax数据请求4（xml格式）
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格式）的更多相关文章
- ajax 异步请求webservice(XML格式)
function callAjaxWebservice(){ alert("call ajax"); try { $.ajax({ type: "POST", ...
- ajax数据请求5（php格式）
ajax数据请求5(php格式): <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- ajax数据请求3（数组json格式）
ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...
- ajax数据请求2（json格式）
ajax数据请求2(json格式) <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- VueJS搭建简单后台管理系统框架 (二) 模拟Ajax数据请求
开发过程中,免不了需要前台与后台的交互,大部分的交互都是通过Ajax请求来完成,在服务端未完成开发时,前端需要有一个可以模拟Ajax请求的服务器. 在NodeJs环境下,通过配置express可访问的 ...
- SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析
SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...
- Ajax --- 数据请求
下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...
- AJAX数据请求
ajax数据请求需要四个步骤:(请求文本内容) 1.创建XMLHttpRequest对象: 2.打开与服务起的链接: 3.发送给服务器: 4.响应就绪. <!DOCTYPE html> & ...
- 微信小程序的ajax数据请求wx.request
微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...
随机推荐
- RabbitMQ集群和失败处理
RabbitMQ内建集群的设计用于完成两个目标:允许消费者和生产者在RabbitMQ节点在奔溃的情况下继续运行,以及通过添加更多的节点来线性扩展消息通信的吞吐量.当失去一个RabbitMQ节点时客户端 ...
- webpack使用
Webpack是一个现代js应用的模块打包机.如果一个文件依赖另一个文件,webpack认为这就存在一个依赖关系.不管另一个文件是什么内容,image,css或js都被当作一个模块.Webpack从e ...
- 模板类的约束模板友元函数：template friend functions
本来这篇博客是不打算写的,内容不是很难,对于我自己来讲,更多的是为了突出细节. 所谓template friend functions,就是使友元函数本身成为模板.基本步骤:1,在类定义的前面声明每个 ...
- 第 7 章 MySQL 数据库锁定机制
前言: 为了保证数据的一致完整性,任何一个数据库都存在锁定机制.锁定机制的优劣直接应想到一个数据库系统的并发处理能力和性能,所以锁定机制的实现也就成为了各种数据库的核心技术之一.本章将对 MySQ ...
- 005---query接口初步
Query session.createQuery(String hql)方法; * hibernate的session.createQuery()方法是使用HQL(hibernate的查询语句)语句 ...
- 【面向对象设计原则】之里氏替换原则（LSP）
里氏代换原则由2008年图灵奖得主.美国第一位计算机科学女博士Barbara Liskov教授和卡内基·梅隆大学Jeannette Wing 教授于1994年提出,所以使用的是这位女博士的性命名的一个 ...
- Building [Security] Dashboards w/R & Shiny + shinydashboard（转）
Jay & I cover dashboards in Chapter 10 of Data-Driven Security (the book) but have barely mentio ...
- windows 配置 Scheme + Emacs 编程环境
软件下载列表: Emacs Racket (这里使用 Racket ,更加方便,便于后面配置 Emacs) 配置 安装好 Emacs 后,在 C:\Users\用户名\AppData\Roaming\ ...
- WINDOWS程序设计对话框加载显示bmp图像及刷新
参考文章:http://blog.csdn.net/wangjian8006/article/details/7464431 图片的加载与显示也是属于窗口绘制这一部分的.所以其代码要写在消息函数的WM ...
- NodeMCU入门（2）：在线构建、刷入固件，上传代码
准备工作 1.NodeMCU模块 2.ESP8266Flasher.exe 3.ESPlorer v0.2.0-rc6 构建固件 Building the firmware提供了三种构建你自己固件的方 ...