<!DOCTYPE html>
<html lang="zh">

<head>
<title>FindnTry</title>
</head>
<body>
<input type="text" name="findId" value="iphone"><button onclick="findit()">Is it nice?</button>
<p id="pages"></p>
<p id="sResult"></p>
<script>
var searchRequestUrl = "https://www.googleapis.com/customsearch/v1?"+
"key=" + "AIzaSyAPdmMnxq37xSuLgEXUx7qpwwfKlJ_QT4I" +
"&cx=" + "012555709026751941021:nxvdp9cyvte";
//Create search links
function CreateNextPages(start, num, searchItem, callback){

}
//Show the results of each response
function showResults(response, searchItem, index) {
for (var i = 0, j=index ; i < response.items.length; i++, j++) {
var item = response.items[i];
// in production code, item.htmlTitle should have the HTML entities escaped.
var desciption= "<a href=\""+ item.link+"\" target=\"_blank\" >"+ item.snippet + "</a> | source:" + item.pagemap.metatags[0][og:site_name];
//var desciption= "<b>Source:</b> <a href=\""+ item.link+"\" target=\"_blank\" >" + item.snippet + "</a>";
document.getElementById("sResult").innerHTML += "<br>" + desciption;
}
}

//The handle for the first response
function hndlr(response, searchItem, index) {
var totalResults;
//console.info("reponse.[searchInformation] = ", response.[searchInformation] );
if (typeof response.searchInformation[totalResults] !== "undefined") {
totalResults = response.searchInformation[totalResults];
}
document.getElementById("sResult").innerHTML = "";
showResults(response, searchItem, 0);
for (var i = 10; i < 100; i+=10) {
searchRequest(i,10,searchItem,showResults);
}
}

//Sending the search request by parameter.
function searchRequest(start, num, searchItem, callback){
var tempsearchRequestUrl = searchRequestUrl;
if (start == 0) {
tempsearchRequestUrl += "&q=" + encodeURIComponent(searchItem);
} else {
tempsearchRequestUrl += "&num="+ encodeURIComponent(num);
tempsearchRequestUrl += "&start="+ encodeURIComponent(start);
tempsearchRequestUrl += "&q=" + encodeURIComponent(searchItem);
}
var xhr = new XMLHttpRequest();
console.info("this search item", searchItem);
xhr.open('GET', tempsearchRequestUrl, true);
xhr.responseType = 'json';
xhr.onload = function() {
// Parse and process the response from Google Search.
if (xhr.readyState === 4) {
if (xhr.status === 200) {
callback(xhr.response, searchItem, start);
}
}
};

xhr.onerror = function() {
alert("error")
document.writeln("network error");
};

xhr.send();
}

//Main function
function findit() {
var searchItem = document.getElementsByName("findId")[0].value;
searchRequest(0, 10, searchItem, hndlr);
}
</script>

</body>
</html>