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. 6.1熟知tsung.xml配置文件（翻译）

    6.1.文件结构 默认的encoding是utf-8,你也可以使用以下不同的encoding:<?xml version="1.0" encoding="ISO-8 ...

  2. springboot(四)：thymeleaf使用详解

    在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...

  3. JAVA中事物以及连接池

    一.事物 什么是事物? 事务,一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元.这些单元要么全都成功,要么全都不成功. 做一件事情,这个一件事情中有多个 ...

  4. SQLiteDatabase的使用

    新建DBHeler.JAVA package com.hixin.db; import java.util.ArrayList; import java.util.HashMap; import co ...

  5. poi解析excel

    一.遇见的问题: 当单元格设置为日期类型时,cell.getCellStyle().getDataFormat()返回的值都为176. poi jar包3.14以上不支持用cell.getCellTy ...

  6. 浅谈MVC异常处理

    在日常开发中,我们会去捕捉很多的异常,来进行处理,通常我们的方法就是,在需要进行异常处理的地方加上 try catch 块,但是,如果需要异常处理的地方很多,那么,就会频繁的去写try catch 块 ...

  7. R语言的高质量图形渲染库Cairo（转）

    前言 R语言不仅在统计分析,数据挖掘领域,计算能力强大.在数据可视化上,也不逊于昂贵的商业.当然,背后离不开各种开源软件包的支持,Cairo就是这样一个用于矢量图形处理的类库. Cairo可以创建高质 ...

  8. 搞定python多线程和多进程

    1 概念梳理: 1.1 线程 1.1.1 什么是线程 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发 ...

  9. VR全景：电商巨头的角逐

    VR全景智慧城市:京东推"京东梦"挑战淘宝Buy+ ,VR购物谁主沉浮? VR全景智慧城市是国内首家商业全景平台,结合先进VR虚拟现实技术,以线下实体为依托,将空间还原到线上,用户 ...

  10. hdu5950

    hdu5950 题意 \(给出 f_1 , f_2 ,以及递推式 f_n = 2 * f_{n-2} + f_{n-1} + n^4 ,求 f_n (mod=2147493647)\) 推导一下. \ ...