自分のOrbサーバーにログインして、メディアファイルを検索するものを作りました。
なんか字が大きくて見づらいのですが、iPhoneシュミレーター上で表示してみました。
用意したファイルは前と同じく、ajaxProxy.phpとprototype.jsにhtmlの３つ。
前述の二つは以前のものをそのまま使います。
で、htmlファイル。
<html>
<head>
<!-- We use the Prototype library. Get it at: http://prototypejs.org -->
<script src="prototype.js" type="text/javascript"></script>
</head>
<body>
<script language="javascript">
// End point url of the Orb Api.エンド ポイントURIとは、ローカル又はリモートの資源及びサービスを特定するためのアドレスです
var orbApiUrl = 'http://api.orb.com/orb/';
// API key. If you want to run this sample, paste your API key below.ここにはAPIKey入れます
var apiKey = 'ここにAPIKeyです';
// To go around Javascript's cross domain restriction, we use a local proxy.
var proxyUrl = 'ajaxProxy.php';
/*
* Authenticate
*/
function authenticate() {
var login = $('login').value;
var password = $('password').value;
// We make an ajax request to the login method, through the local proxy.
var url = orbApiUrl + 'xml/session.login?apiKey=' + apiKey +
'&l=' + encodeURIComponent(login) +
'&password=' + encodeURIComponent(password);
new Ajax.Request(proxyUrl + '?url=' + escape(url), {
method: 'get',
onSuccess: authenticateSuccessCallback,
onFailure: orbApiFailureCallback
});
};
/*
* authenticateSuccessCallback
* Called when the login ajax request was successful.
*/
function authenticateSuccessCallback(transport) {
// Access the XML dom object within the response.
var dom = transport.responseXML.documentElement;
// Check that the Orb response is OK.
if (checkOrbResponseStatus(dom)) {
// Retrieve the session id from the XML dom object.
sessionId = dom.getElementsByTagName('orbSessionId')[0].firstChild.nodeValue;
// Hide the login panel and display the search panel on the page.
Element.hide('loginPanel');
Element.show('mainPanel');
}
};
/*
* orbApiFailureCallback
* Called when an ajax request failed.
* (this is not a failure from the API method itself).
*/
function orbApiFailureCallback(transport) {
alert('Error contacting Orb server (' + transport.status + '): ' + transport.responseText);
};
/*
* checkOrbResponseStatus
* This is a generic function that looks into the XML response sent by Orb to see if the status code is 0 (OK).
*/
function checkOrbResponseStatus(dom) {
var error = '';
try {
// Get the XML 'status' node.
var statusNode = dom.getElementsByTagName('status')[0];
// Get the XML 'status' node's 'code' attribute.
var statusCode = statusNode.attributes.getNamedItem('code').value;
if (statusCode != '0') {
// Code different from 0 means there was a problem.
var statusDesc = statusNode.attributes.getNamedItem('desc').value;
// Get the description corresponding to the error.
// WARNING: the description is just for development purposes.
// The text it contains is not intended to be displayed to the end-user.
// You should provide your own text/error messages depending on the error codes.
error = 'Error (' + statusCode + ') : ' + statusDesc;
}
} catch (e) {
error = 'Unknown error.';
}
if (error !== '') {
alert(error);
}
// Return true (boolean) if there was no error.
return (error === '');
}
/*
* searchMedia
* This function looks for media on the Orb computer.
*/
function searchMedia() {
// Build URL to call search method.
var searchFor = $('searchFor').value;
var mediaType = $('mediaType').value;
var query = 'mediaType=' + mediaType + ' title^=' + searchFor;
var url = orbApiUrl + 'xml/media.search?sid=' + sessionId +
'&q=' + encodeURIComponent(query) +
'&fields=title&count=10';
// Send request.
new Ajax.Request(proxyUrl + '?url=' + escape(url), {
method: 'get',
onSuccess: searchMediaSuccessCallback,
onFailure: orbApiFailureCallback
});
}
/*
* searchMediaSuccessCallback
* Called when the search ajax request was successful.
*/
function searchMediaSuccessCallback(transport) {
// Access the XML dom object within the response.
var dom = transport.responseXML.documentElement;
// Check that the Orb response is OK.
if (checkOrbResponseStatus(dom)) {
// Get the items from the XML response.
var items = dom.getElementsByTagName('item');
// This will hold the html showing the results.
var html = '';
// Number of items found.
var itemCount = items.length;
if (itemCount == 0) {
html = 'No item found.';
} else {
for (var i = 0; i < itemCount; i++) {
// List of fields for the current item.
var fields = items[i].getElementsByTagName('field');
var fieldCount = fields.length;
// Iterate through fields to find the 'title' one, and retrieve its value.
for (var j = 0; j < fieldCount; j++) {
var fieldName = fields[j].attributes.getNamedItem('name').value;
if (fieldName == 'title') {
html += fields[j].firstChild.nodeValue + '<br/>';
break;
}
}
}
}
$('results').innerHTML = html;
}
};
</script>
<div id="loginPanel" style="border:1px;">
Login: <input type="text" id="login" value="" />
<br/>
Password: <input type="password" id="password" value="" />
<br/>
<input type="button" onclick="authenticate();" value="Login"/>
</div>
<div id="mainPanel" style="display:none;">
Return media which title start with: <input type="text" id="searchFor" value="" />
<br/>
In:
<select id="mediaType">
<option value="audio.file">Audio</option>
<option value="video.file">Video</option>
<option value="photo.file">Photo</option>
<option value="document.file">Document</option>
</select>
<br/>
<input type="button" onclick="searchMedia();" value="Search"/>
<div id="results">
<div>
</div>
</body>
</html>
PC上で見ますと、こんな感じ。
できました！パチパチ
投稿
0 件のコメント:
コメントを投稿