Link Data query using Javascript and pay attention to details

Preface
Free encyclopedias should not only be freely written, but also be freely available.
DBpedia converts the Data of Wikipedia into Linked Data, allowing the machine to read and obtain the Data freely.
The main purpose of this article is to use Javascript to obtain the data we want from DBpedia.
For details about Linked Data, see associate Data entry-RDF.

SPARQL
Trying to use the Semantic Web without SPARQL is like trying to use a relational database without SQL.
-- Tim Berners-Lee
SPARQL is a Semantic Web SQL statement used for data query.

SPARQL Endpoint
The SPARQL query terminal is an HTTP binding protocol used to perform SPARQL queries over HTTP and return corresponding data.
DBpedia's SPARQL Endpoint address is: http://dbpedia.org/sparql
You can open this page in a browser to perform SPARQL queries (it is best to go over the wall and fail to query without going over the wall frequently. I don't quite understand why = ).
However, the final returned result of this query is an HTML page, which is not what we want. We can set the Accept attribute of the Request Header to specify the returned data type.
For example, if text/xml is specified, the returned data is in the RDF format.
So how do we enter the SPARQL query code?
You only need to pass the Code through the get or post method with the parameter query. For example:
If you want to query: select distinct? Concept where {[]? Concept} LIMIT 100
You can use this link to get data:
Http://dbpedia.org/sparql? Query = select % 20 distinct % 20? Concept % 20 where % 20 {[] % 20a % 20? Concept} % 20 LIMIT % 20100
The space is converted to % 20.

Implementation Details
• Cross-Origin
We can implement this function through AJAX, but AJAX cannot cross-origin in Some browsers. However, it is clear that almost all of the Linked Data we want is cross-origin.
In fact, in some earlier versions of browsers, we do not have to change the data form of the method in front-end Dynamic cross-origin asynchronous reading.
However, we can solve cross-origin problems through server proxy.
• GET or POST
What about using GET and POST?
This may be due to many reasons, but considering that GET may be cached, we use POST to avoid data caching.
• How to return data
As we mentioned earlier, we can use text/xml to return RDF data, but it is not easy to process RDF in Javascript. Therefore, we use json to return data, that is, you need to set Accept to application/sparql-results + json.

Implementation
For more information about the APIS, see SPARQL Wrapper of Python.
Copy codeThe Code is as follows:
(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 (Stas = 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;
}));

For example, to query:
Select distinct? Concept where {[]? Concept} LIMIT 100
The page is:
Copy codeThe Code is as follows:
<! 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 {[]? Concept} LIMIT 100 ');
Sparql. query (function (json ){
Console. log (eval ('+ json + ')');
});
</Script>
</Body>
</Html>

Example: Download