Javascript实现关联数据(Linked Data)查询及注意细节_javascript技巧

前言
自由百科全书不仅仅应当可以自由编写,而更应该可以自由获得。
DBpedia对Wikipedia的数据变成Linked Data形式,使得机器也能读懂并自由获得这些数据。
本文的主要目的是利用Javascript从DBpedia中获取我们想要的数据。
对Linked Data不太了解的请参考:关联数据入门——RDF。

SPARQL
Trying to use the Semantic Web without SPARQL is like trying to use a relational database without SQL.
—— Tim Berners-Lee
SPARQL是Semantic Web(语义网)的SQL,用于数据查询的语言。

SPARQL Endpoint
SPARQL查询终端,是一种HTTP绑定协议,用于通过HTTP进行SPARQL查询,并返回相应数据。
DBpedia的SPARQL Endpoint地址是:http://dbpedia.org/sparql
大家可以通过浏览器打开这个页面,进行SPARQL查询(最好翻墙,没翻墙查询经常失败,不太明白为什么= =)。
不过这种查询最终返回结果是HTML页面,并不是我们想要的,我们可以通过设置Request Header的Accept属性来指定返回数据类型。
例如如果指定为:text/xml,那么返回的便是RDF格式数据。
那么我们如何输入SPARQL查询代码呢?
只需通过get或者post方法用参数query,将代码传过去。例如:
如果想查询:select distinct ?Concept where {[] a ?Concept} LIMIT 100
则可利用该链接得到数据:
http://dbpedia.org/sparql?query=select%20distinct%20?Concept%20where%20{[]%20a%20?Concept}%20LIMIT%20100
其中空格被转成%20。

实现细节
•跨域
我们可以通过AJAX实现这一功能,但是AJAX在部分浏览器中无法跨域,然而很显然我们想要的Linked Data几乎都是跨域的。
实际上,在一些较老版本的浏览器,我们没有不改变其数据形式的方法在前端进行动态跨域异步读取。
不过我们可以通过服务器代理的方法来解决跨域问题。
•GET or POST
使用GET还POST呢?
这个可能出于很多方面考虑,但是考虑到GET可能被缓存,所以我们使用POST来避免数据被缓存。
•以什么形式返回数据
前面我们说到用text/xml可以返回RDF数据,但是RDF在Javascript中并不好处理,所以我们使用json方式返回,也就是需要将Accept设置成application/sparql-results+json。

实现
接口参考Python的SPARQL Wrapper

复制代码 代码如下:

(function(root, factory) {
if(typeof define === "function"){
define("SPARQLWrapper", factory); // AMD || CMD
}else{
root.SPARQLWrapper = factory(); // <script>
}
}(this, function(){
'use strict'
function SPARQLWrapper(endpoint){
this.endpoint = endpoint;
this.queryPart = "";
this.type = "json";
}
SPARQLWrapper.prototype = {
constructor: SPARQLWrapper,
setQuery: function(query){
this.queryPart = "query=" + encodeURI(query);
},
setType: function(type){
this.type = type.toLowerCase();
},
query: function(type, callback){
callback = callback === undefined ? type : this.setType(type) || callback;
var xhr = new XMLHttpRequest();
xhr.open('POST', this.endpoint, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
switch(this.type){
case "json":
type = "application/sparql-results+json";
break;
case "xml":
type = "text/xml";
break;
case "html":
type = "text/html";
break;
default:
type = "application/sparql-results+json";
break;
}
xhr.setRequestHeader("Accept", type);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var sta = xhr.status;
if(sta == 200 || sta == 304){
callback(xhr.responseText);
}else{
console && console.error("Sparql query error: " + xhr.status + " " + xhr.responseText);
}
window.setTimeout(function(){
xhr.onreadystatechange= new Function();
xhr = null;
},0);
}
}
xhr.send(this.queryPart);
}
}
return SPARQLWrapper;
}));

使用方法,例如需要查询:
select distinct ?Concept where {[] a ?Concept} LIMIT 100
则该页面为:

复制代码 代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="SPARQLWrapper.js" type="text/javascript"></script>
</head>
<body>
<script>
var sparql = new SPARQLWrapper("http://dbpedia.org/sparql");
sparql.setQuery('select distinct ?Concept where {[] a ?Concept} LIMIT 100');
sparql.query(function(json){
console.log(eval('(' + json + ')');
});
</script>
</body>
</html>

小例子:下载

时间: 2024-09-13 23:57:21

Javascript实现关联数据(Linked Data)查询及注意细节_javascript技巧的相关文章

jQuery $.data()方法使用注意细节_javascript技巧

前段时间同事在群里对jQuery里的.data()方法大发牢骚: XXX(NNNNNNN) 15:11:34 <a id="a" data-xxx="00123" /> alert($('#a').data('xxx'));//123 data方法不靠谱 XXX(NNNNNNN) 15:13:17 老老实实用attr('data-xxx')吧细研究了下jQuery文档对.data()方法的描述: 复制代码 代码如下: As of jQuery 1.4.3

JavaScript数据推送Comet技术详解_javascript技巧

JavaScript数据推送主要致力于webapp的在线推送服务,不用我们每次都像服务器去发送Ajax请求而主动从Server端推送数据到本地. 数据推送进化史: 1. HTTP协议简易轮询,保持着一个链接不放,或者通过前端不停的向后端发送请求 2. H5更新后有了WebSocket大大改善了双向和单向推送数据的便利性 3. SSE(Server-Send Event):服务器推送数据的新方式  Comet:基于 HTTP 长连接的服务器推送技术 本课时介绍Comet:基于 HTTP 长连接的服

html5+javascript实现简单上传的注意细节_javascript技巧

简单记录下今早做H5上传中一些代码还有坑 一.展示 因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有没有 解决办法找了下,PC上有些是把这个input换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器是不支持flash的.所以最后采用的办法还是用form表单的形式,只是把这个form和input的透明度设置为0,让它们和准备显示的内容同时在一个div中,显示

javascript动态添加表格数据行(ASP后台数据库保存例子)_javascript技巧

在很多web应用中,我们会遇到很多需要动态插入多行纪录的地方.比如,在人才网站上,我们填写简历的时候,我们要填写我们的项目经验,我们可以根据自己的实际情况动态的添加条数,这种不是以单独页面的形式添加,这种动态添加是在同一个页面下动态添加,最后再一起提交到服务器保存到数据库中. 本文,我将以一个类似的例子来做一个前台用Javascript动态添加数据项,后台保存到数据库的例子. 浏览器:IE.6.0 后台:ASP (VBScript ) 前台:HTML + JavaScript HTML代码: 复

JavaScript获得url查询参数的方法_javascript技巧

本文实例讲述了JavaScript获得url查询参数的方法.分享给大家供大家参考.具体实现方法如下: function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="

高性能Javascript笔记 数据的存储与访问性能优化_javascript技巧

局部变量也就可以理解为在函数内部定义的变量,很明显访问局部变量要比域外的变量要快,因为它位于作用域链的第一个变量对象中(关于作用域链的介绍可以阅读这篇文章).变量在作用域链的位置越深,访问所需要的时间就越长,全局变量总是最慢的,因为它们位于作用域链的最后一个变量对象. 每种数据类型的访问都需要付出点性能代价,对于直接量和局部变量基本都能消费得起,而访问数组项和对象成员则要代价高点.下图显示了不同浏览器,分别对这四种数据类型进行了200'000次操作所用的时间. 由上图可以看出,要想优化代码的性能

魔鬼字典 JavaScript 笔记 代码比较多乱第1/3页_javascript技巧

//2005中ctrl+J 有可能出提示 //文本编辑出注释的快捷键 名词解释: { //Java: 爪哇语言, 在因特网世界范围的 web 网页运转的以网络为基础的编程语言 (计算机用语) //Script : 手稿, 剧本, 手迹 //cs结构: 客户端应用程序,用户需要下载客户端,例如QQ //BS结构: 浏览器应用程序,具有远程服务器,例如网页 脚本语言:解释性语言,不进行编译,只在运行至相应代码时进行解释 } 完整的JavaScript组成 { 核心:ECMAScript 文档对象模型

JavaScript操作XML/HTML比较常用的对象属性集锦_javascript技巧

节点对象属性 childNodes-返回节点到子节点的节点列表 firstChild-返回节点的首个子节点. lastChild-返回节点的最后一个子节点. nextSibling-返回节点之后紧跟的同级节点. nodeName-返回节点的名字,根据其类型. nodeType-返回节点的类型. nodeValue-设置或返回节点的值,根据其类型. ownerDocument-返回节点的根元素(document对象). parentNode-返回节点的父节点. previousSibling-返回

Bootstrap 实现查询的完美方法_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 废话不多说了,直接给大家贴bootstrap实现查询的代码了.具体代码如下所示: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE html&