第一个 XMLHttpRequest 例子（API）
【API】
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
【替代方案】
如果不想自己敲代码，可以直接访问以下URL测试代码。页面左侧是代码区，可修改（提交），右侧是实时结果。
http://www.w3school.com.cn/tiy/t.asp?f=xdom_httprequest_js_4
【代码准备】
如果想在本机试运行，往下看。
HTML代码：
<html>
<head>
<script type="text/javascript">
var xmlhttp; function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
} function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert("Problem retrieving XML data."+xmlhttp.statusText);
return;
} txt="<table border='1'>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('copy').innerHTML=txt; //----------------------------------------------------------------
resxml=xmlhttp.responseXML; data1=resxml.documentURI;
data2=resxml.getElementsByTagName("CD").length;
data3=resxml.getElementsByTagName("CD")[0].getElementsByTagName("TITLE").length;
data4=resxml.getElementsByTagName("CD")[0].getElementsByTagName("TITLE")[0].firstChild.nodeValue; document.getElementById('myoutput1').innerHTML=data1;
document.getElementById('myoutput2').innerHTML=data2;
document.getElementById('myoutput3').innerHTML=data3;
document.getElementById('myoutput4').innerHTML=data4;
//----------------------------------------------------------------
}
</script>
</head> <body>
<p>documentURI----> <span id="myoutput1"></span></p>
<p>getElementsByTagName("CD").length----> <span id="myoutput2"></span></p>
<p>getElementsByTagName("TITLE").length----> <span id="myoutput3"></span></p>
<p>firstChild.nodeValue----><span id="myoutput4"></span></p> <div id="copy">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</div>
</body>
</html>
XML文件代码：
<?xml version="1.0"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>
【运行方法】
把2个文件放在同一级目录下。用浏览器打开HTML文件，按下按钮，读取XML文件。
运行结果：
【说明】
1、准备HTML页面
1.1、在html页面上创建一个Action，触发XMLHttpRequest实例化。
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
1.2、在html页面上创建一个显示返回值的区域。
<p>documentURI----> <span id="myoutput1"></span></p>
<p>getElementsByTagName("CD").length----> <span id="myoutput2"></span></p>
<p>getElementsByTagName("TITLE").length----> <span id="myoutput3"></span></p>
<p>firstChild.nodeValue----><span id="myoutput4"></span></p>
2、省略各种错误处理，中心思想是创建XMLHttpRequest实例，并得到它的Response。
function loadXMLDoc(url)
{
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
3、onreadystatechange是一个事件句柄。它的值 (state_onResponse) 是一个函数的名称。
通过responseXML属性的getElementsByTagName()方法得到各个节点的值。
function onResponse()
{
resxml=xmlhttp.responseXML;
data1=resxml.documentURI;
data2=resxml.getElementsByTagName("CD").length;
data3=resxml.getElementsByTagName("CD")[0].getElementsByTagName("TITLE").length;
data4=resxml.getElementsByTagName("CD")[0].getElementsByTagName("TITLE")[0].firstChild.nodeValue;
document.getElementById('myoutput1').innerHTML=data1;
document.getElementById('myoutput2').innerHTML=data2;
document.getElementById('myoutput3').innerHTML=data3;
document.getElementById('myoutput4').innerHTML=data4;
}
---------------------------------------------------------------------------------------------------------------
XMLHttpRequest的其他常用属性或方法：
document.getElementById("txtHint").innerHTML=任何值（Timing是onkeyup）
document.getElementById("myoutput").innerHTML=xmlhttp.status;
document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
document.getElementById('p1').innerHTML=xmlhttp.getResponseHeader('Last-Modified');
--------------------------------------------------------------------------------------------------------------------
第一个 XMLHttpRequest 例子（API）的更多相关文章
- Lea指令计算地址（用于四则混合运算），附上一个函数调用例子及其反汇编代码，很清楚
比如你用local在栈上定义了一个局部变量LocalVar,你知道实际的指令是什么么?一般都差不多像下面的样子: push ebp mov esp, ebp sub ...
- 【Qt官方MQTT库的使用，附一个MqttClient例子】
Qt官方MQTT库的使用,附一个MqttClient例子 开发环境:win7 64 + Qt5.9 记录时间:2018年3月11日 00:48:42 联系邮箱: yexiaopeng1992@126. ...
- Hibernate入门1 - Hibernate概述及第一个小例子
一.什么是ORM? ORM,即Object Relational Mapping.我们知道,利用面向对象的思想编写的数据库应用程序最终都是把对象信息保存在关系型数据库中,于是需要编写与底层数据库相关的 ...
- 并发编程 —— 自己写一个异步回调 API
1. 前言 在并发编程中,异步回调的效率不言而喻,在业务开发中,如果由阻塞的任务需要执行,必然要使用异步线程.并且,如果我们想在异步执行之后,根据他的结果执行一些动作. JDK 8 之前的 Futur ...
- 我的第一个netcore2.2 api项目搭建（三）
上一章快速添加了swagger文档管理功能,我的第一个netcore2.2 api项目搭建(二) 这一章实现目标三:api添加身份验证功能 在实现该目标之前,先得理解netcore运行机制. 这是微软 ...
- 基于AOP和ThreadLocal实现的一个简单Http API日志记录模块
Log4a 基于AOP和ThreadLocal实现的一个简单Http API日志记录模块 github地址 : https://github.com/EalenXie/log4a 在API每次被请求时 ...
- 如何使用 Gin 和 Gorm 搭建一个简单的 API 服务 （一）
介绍 Go 语言最近十分火热,但对于新手来说,想立马上手全新的语法和各种各样的框架还是有点难度的.即使是基础学习也很有挺有挑战性. 在这篇文章中,我想用最少的代码写出一个可用的 API 服务. ...
- 如何设计一个良好的API接口？
沟通创造价值,分享带来快乐.这里是程序员阅读时间,每天和你分享读书心得,欢迎您每天和我一起精进.今天和大家一起讨论的话题是如何设计一个良好的API接口? 作者:梁桂钊 解读:张飞洪 挑战 API是软件 ...
- 如何设计一个优秀的API（转载）
最近在整理框架的一些 API,觉得很有必要总结一下 API 兼容性的设计.下图是我自己当下的一些总结,慢慢维护: 网上搜索了一下,一个多月前,“标点符”已经发布了下面这篇文章,觉得写得非常不错,转载于 ...
随机推荐
- linux - 权限解析
当你在linux下用命令ll 或者ls -la的时候会看到这些字眼,这些字眼表示为不同用户组的权限:r:read就是读权限 --数字4表示w:write就是写权限 --数字2表示 x:excute就是 ...
- 多线程编程之pthread线程深入理解
不同的平台和操作系统上 进程和线程的实现机制不完全一致 但是一般来说线程栈都是独立的 只要得到地址就可以相互访问 Pthread是 POSIX threads 的简称,是POSIX的线程 ...
- TypeError: Cannot read property 'tap' of undefined
E:\vue-project\vue-element-admin-master>npm run build:prod vue-element-admin@3.8.1 build:prod E:\ ...
- 数据结构算法与应用c++语言描述 原书第二版 答案（更新中
目录 第一章 C++回顾 函数与参数 1.交换两个整数的不正确代码. 异常 10.抛出并捕捉整型异常. 第一章 C++回顾 函数与参数 1.交换两个整数的不正确代码. //test_1 void sw ...
- C++ 学习笔记（二） const的加强
const 含义为只读.如果在程序中显式改变const变量那么编译会报错. C语言的const: 在C语言中const 变量是放在内存中,如果使用指针可以间接改变const变量.所以在C语言中cons ...
- salt 模板
http://www.mamicode.com/info-detail-2297406.html
- 【php】对象的比较
对象的比较 相等的比较 ==当使用比较运算符(==)比较两个对象变量时,比较的原则是:如果两个对象的属性和属性值 都相等,而且两个对象是同一个类的实例,那么这两个对象变量相等. 全等的比较 ===如果 ...
- 【mysql】【windows】MySQL 服务无法启动，服务没有报告任何错误，请键入 NET HELPMSG 3534 以获得更多的帮助。
成功安装以后,启动MySQL,输入: net start mysql 提示: ”MySQL 服务无法启动,服务没有报告任何错误,请键入 NET HELPMSG 3534 以获得更多的帮助.” 查了下, ...
- python3 完全平方数（循环）
题目 一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少? 代码: for i in range(1,85): if 168 % i == 0: j = 168 ...
- UVALive - 8292 （法里数列）
参考博客:zro https://blog.csdn.net/alusang/article/details/81840944 orz 给你一个分母 m 和一个浮点数 x,让你求出一个分母不超过 m ...