JavaScript client is very easy, simple, and straightforward. We don't need to create any client to connect to Solr. Also, no packages need to be installed for the JavaScript client. JavaScript sends the request to Solr using XMLHttpRequest. Solr processes the request and returns the response in JSON format, which can easily be parsed in JavaScript. We don't need to configure the wt response parameter as Solr, by default, returns the response in JSON format.
Example: Configure hostURL= http://localhost:8983/solr/techproducts/select in JavaScript as follows:
<html>
<head>
<title>Solr Javascript API Example</title>
<script language="Javascript">
//main function called when clicking on search button
function search() {
//Solr search url
var hostURL='http://localhost:8983/solr/techproducts/select';
var xmlHttpReq = false;
var xmlHttpClient = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
xmlHttpClient.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
xmlHttpClient.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpClient.xmlHttpReq.open('POST', hostURL, true);
xmlHttpClient.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpClient.xmlHttpReq.onreadystatechange = function() {
if (xmlHttpClient.xmlHttpReq.readyState == 4) {
showResponse(xmlHttpClient.xmlHttpReq.responseText);
}
}
var queryString = appendParams();
xmlHttpClient.xmlHttpReq.send(queryString);
}
// get entered text in query parameter
function appendParams() {
var querystring = document.getElementById("querystring").value;
qstr = 'q=' + escape(querystring)+"&fl=id,name";
return qstr;
}
//paring and displaying the response
function showResponse(str){
document.getElementById("responsestring").innerHTML = str;
var rsp = eval("("+str+")");
var html = '<strong>Response</strong>';
html= "</br><strong>Total Found: "+ rsp.response.numFound+"</strong>";
document.getElementById("result").innerHTML = html;
}
</script>
</head>
<body>
<div align='center'>
<p>
<input id="querystring" name="querystring" type="text" placeholder='Search Here'>
<input value="Search" type="button" onClick='search();'>
</p>
<div id="result"></div>
<div id="responsestring"></div>
</div>
</body>
</html>
This is a simple implementation to call the Solr API using JavaScript's XMLHttpRequest. Now if we want to run this code, we create a .html file and paste the preceding code in this file. The created HTML file should reside in the same environment in which Solr is running because modern browsers don’t allow cross-site access in JavaScript for security reasons. It may be possible that searching will not work due to an Access-Control-Allow-Origin error. There are various solutions available for this error; it's up to us how we can deal with it.
Now open the HTML file in your browser (supporting XMLHttpRequest); a search input box and a button will be displayed. Enter whatever text you want to search and click on the Search button. If everything goes well, the Solr API will be called and the response will be displayed as follows. Here we are searching for ipod:
Response:
{
"responseHeader":{
"status":0,
"QTime":1,
"params":{
"q":"ipod",
"fl":"id,name"
}
},
"response":{
"numFound":3,
"start":0,
"docs":[
{
"id":"IW-02",
"name":"iPod & iPod Mini USB 2.0 Cable"
},
{
"id":"F8V7067-APL-KIT",
"name":"Belkin Mobile Power Cord for iPod w/ Dock"
},
{
"id":"MA147LL/A",
"name":"Apple 60 GB iPod with Video Playback Black"
}
]
},
"spellcheck":{
"suggestions":[
],
"correctlySpelled":false,
"collations":[
]
}
}
We've got a JSON response; now we can apply our JavaScript skills to parse and display responses as per the application requirement. Likewise, we can test more capabilities of JavaScript towards the Solr API.