第一个 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 兼容性的设计.下图是我自己当下的一些总结,慢慢维护: 网上搜索了一下,一个多月前,“标点符”已经发布了下面这篇文章,觉得写得非常不错,转载于 ...
随机推荐
- python3.6.2利用pyinstaller发布EXE
我的环境是Ubuntu 16.04,系统自带Python2和Python3 安装 pip3 install pyinstaller 发布exe pyinstaller -F helloworld.py ...
- MySQL基础教程——创建数据库并插入数据
本节将介绍 MySQL 新建数据库,新建表,插入数据以及基本数据类型的相关知识.本节实验将创建一个名为 mysql_shiyan 的数据库,其中有两张表 employee和 department. 1 ...
- SQL学习总结笔记
SQL语句的效率不仅是sql语句的设计还有一些其他的原因比如网络 .是否有视图.是否有索引等等.这里主要描述的是我个人对于sql设计方面优化的一些见解: 首先要说明一下的是数据库SQL解析顺序: (1 ...
- 01_3_创建一个Servlet
01_3_创建一个Servlet 1.创建一个Servlet import java.io.IOException; import java.io.PrintWriter; import javax. ...
- 从 Objective-C 里的 Alloc 和 AllocWithZone 谈起
一.问题起源 一切起源于Apple官方文档里面关于单例(Singleton)的示范代码:Creating a Singleton Instance.主要的争议集中在下面这一段: static MyGi ...
- JWT （JSON WEB Token）正确使用场景
https://www.jianshu.com/p/af8360b83a9f 讲真,别再使用JWT了! ThoughtWorks中国 2017.08.16 08:51* 字数 2882 阅读 7154 ...
- python入门：从安装python开始
python简介: Python (英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明 ...
- 【laravel】Laravel 5 TokenMismatchException on PHP 5.6.9
When I realized this was only happening in IE and Chrome, but not Firefox, it led me to the fix. The ...
- FIFO buffer 和普通buffer区别
1.FIFO可以说一块具体的硬件存储设备,也可以说程序在内存中开辟的一段内存区域.而buffer往往就是一段缓冲的数据区域 2.FIFO的数据是先进先出的,而buffer没有这个限制,可以全局访问 3 ...
- loadView、viewDidLoad及viewDidUnload的关系(转)
本文目录 一.loadView 二.viewDidLoad 三.viewDidUnload 四.三个方法的关系 标题中所说的3个方法,都是UIViewController的方法,跟UIViewCont ...