searchImage.html

<html>

<head>
    <title>JSON/Atom Custom Search API Example</title>
</head>

<body>
    <input type="text" id="searchField" style="height: 25px; width: 200px;" placeholder="Search"/>
    <button onclick="searchImage()" style="height: 25px;">Search</button>
    <div id="content">
        <script>
        function searchImage() {
            var me = this,
                inputEl = document.getElementById('searchField'),
                value = inputEl.value,
                xhttp = new XMLHttpRequest();

            xhttp.open('GET', "http://192.168.2.8:4786/customsearch?q=" + value, true);

            // xhttp.open('GET', url, true);
            xhttp.onreadystatechange = function() {
                debugger;
                if (xhttp.readyState == XMLHttpRequest.DONE) {
                    console.log(xhttp.responseText);
                    me.hndlr(xhttp.responseText);
                }
            };
            xhttp.send();
        }

        function hndlr(response) {
            var resText = JSON.parse(response);
            if (!resText.items) {
                document.getElementById("content").innerHTML = 'No result found.';
                return;
            }
            for (var i = 0; i < resText.items.length; i++) {
                var item = resText.items[i];
                console.log(item);
                document.getElementById("content").innerHTML += '<div><img style="padding: 20px;border: 1px solid #e8e8e8;"src="' + item.link + '"></div><br><br>';
            }
        }
        </script>
</body>

</html>