[英]Generate remote XML, and consume from web page, using javascript
I am looking at a scenario where I want to "consume" an xml/json document and build some visual elements from said date. 我正在寻找一种方案,在该方案中我要“使用”一个xml / json文档并从上述日期开始构建一些视觉元素。
Per example, List of bookings for a time period. 例如,一段时间内的预订清单。 Lets say data will contain
可以说数据将包含
<unit>
<booked>
<pic>
<booked range>
What I am not sure of, is how to go from accessing a query string, to catching the returned xml. 我不确定的是如何从访问查询字符串到捕获返回的xml。 This seems simple, but I cant seem get get my head around accessing the XML returned, from Javascript.
这似乎很简单,但是我似乎无法理解从Java脚本访问返回的XML。
More info: 更多信息:
I am building a mobile app, that will display data, retrieved from XML. 我正在构建一个移动应用程序,它将显示从XML检索的数据。 (I want to run the url/query string from the app, to generate a custom xml doc, and read XML data returned (not display the web page)
(我想从应用程序运行url / query字符串,以生成自定义xml文档,并读取返回的XML数据(不显示网页)
Any advice? 有什么建议吗?
Synopsis 概要
Code 码
A pure Javscript solution using the XMLHttpRequest ( docs: eg. MDN reference , MDN usage hints ; there also exists a tutorial on html5rocks ) might look similar to the following fragment: 使用XMLHttpRequest的纯Javscript解决方案(docs:例如MDN参考 , MDN使用提示 ;还存在一个有关html5rocks的教程 )可能类似于以下片段:
var oReq = new XMLHttpRequest();
function eh_onload ( ) {
var xmlhttp = this;
if (xmlhttp.readyState === 4) {
console.log ( "xmlhttp.status = " + xmlhttp.status);
if (xmlhttp.status === 200) {
//
// process your xml here.
//
console.log ( "responseText = '" + xmlhttp.responseText + "'");
console.log ( "xml root element = '" + xmlhttp.responseXML.documentElement.nodeName + "'");
}
else {
console.log('error');
}
}
}
oReq.onload = eh_onload;
oReq.open("get", "http://wsearch.nlm.nih.gov/ws/query?db=digitalCollections&term=cholera", true);
oReq.send();
The code snippet performs an ajax request and registers a callback that will be executed upon completion of the request. 该代码段执行ajax请求并注册一个回调,该回调将在请求完成后执行。 As you can see, you may either access the lexical representation of the xml data received or a parsed DOM structure.
如您所见,您可以访问接收到的xml数据的词汇表示形式或已解析的DOM结构。
Alternative 替代
In case using the jquery library is acceptable to you, you may proceed along the lines of the following code sample: 如果您可以使用jquery库,则可以按照以下代码示例的步骤进行:
function eh_xml ( parsedxml, textStatus, jqXHR ) {
// process your xml here.
//
console.log ( "typeof(parsedxml) = '" + typeof(parsedxml)+ "'");
console.log ( "$('term', parsedxml).length = " + $("term", parsedxml).length);
}
$.ajax({
url: "http://wsearch.nlm.nih.gov/ws/query?db=digitalCollections&term=cholera"
, dataType: "xml"
, success: eh_xml
});
The code snippet performs an ajax request and provides a callback that receives the xml in parsed (DOM) representation. 该代码段执行ajax请求并提供一个回调,该回调以解析(DOM)表示形式接收xml。
Note & Caveat 注意与警告
The code sample uses a public web service provided by the US NIH returning xml data. 该代码示例使用了由美国NIH提供的返回xml数据的公共Web服务。 This one has been selected randomly and is employed for the sole purpose to have a working PoC .
这是随机选择的,仅用于拥有有效的PoC的目的 。 No affiliations exist and the usual legal disclaimers apply.
没有从属关系,通常的法律免责声明适用。
The code can be tested from the console (eg. in Chrome) opened on the site http://wsearch.nlm.nih.gov/ using the following prelude which loads the jquery library in the context of the site hosting the web service: 可以使用以下序言从在http://wsearch.nlm.nih.gov/网站上打开的控制台(例如,在Chrome中)对代码进行测试,以在托管Web服务的网站的上下文中加载jquery库:
var script = document.createElement("script");
script.src = "http://code.jquery.com/jquery-2.1.3.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.