第一个 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 兼容性的设计.下图是我自己当下的一些总结,慢慢维护: 网上搜索了一下,一个多月前,“标点符”已经发布了下面这篇文章,觉得写得非常不错,转载于 ...
随机推荐
- python基础一 day15 复习
迭代器和生成器迭代器 可迭代协议 —— 含有iter方法的都是可迭代的 迭代器协议 —— 含有next和iter的都是迭代器 特点 节省内存空间 方便逐个取值,一个迭代器只能取一次.生成器 —— 迭代 ...
- stixel world论文总结
1.The Stixel World - A Compact Medium Level Representation of the 3D-World:http://pdfs.semanticschol ...
- JavaScript onkeydown事件入门实例(键盘某个按键被按下)
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...
- php常见验证
/** * 文件上传 * @param $file 要上传的文件 * @param $size 大小设置 * @param $ext 文件类型 * @return bool 是否上传成功 */func ...
- Bzoj 3450: Tyvj1952 Easy (期望)
Bzoj 3450: Tyvj1952 Easy 这里放上题面,毕竟是个权限题(洛谷貌似有题,忘记叫什么了) Time Limit: 10 Sec Memory Limit: 128 MB Submi ...
- 【Git版本控制】Git的merge合并分支命令
1.实例 git checkout master git merge dev merge合并分支只对当前分支master产生影响,被合并的分支dev不受影响. 假设你有两个分支,“stable” 和 ...
- React和Vue组件间数据传递demo
一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...
- python面试题之什么是lambda函数？
lambda表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数. lambda所表示的匿名函数的内容应该是很简单的,如果复杂的话,干脆就重新定义一个函数了,使用l ...
- Applied Nonparametric Statistics-lec3
Ref: https://onlinecourses.science.psu.edu/stat464/print/book/export/html/4 使用非参数方法的优势: 1. 对总体分布做的假设 ...
- R-codes-tips
1. 在shell执行R文件 chmod 0755 file.R Rscript file.R 2. 载入数据 data(dune) 3. attach() 将data.frame添加到R的搜索路径 ...