效果截图:

本实例中并未实现所谓的模拟搜索引擎,因为没有较好的网络在yahoo上申请到账号,所以以后再测试了。
静态页面:yahooSearch.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Yahoo! Search Web Services</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function doSearch(){
var url="servlet/YahooSearchGatewayServlet?"+createQueryString()+"&ts="+new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function createQueryString(){
var searchString=document.getElementById("searchString").value;
searchString=escape(searchString);
var maxResultsCount=document.getElementById("maxResultCount").value;
var queryString="query="+searchString+"&results="+maxResultsCount;
return queryString;
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
parseSearchResults();
}
else{
alert("Error accessing Yahoo!search");
}
}
}
function parseSearchResults(){
var resultsDiv=document.getElementById("results");
while(resultsDiv.childNodes.length>0){
resultsDiv.removeChild(resultsDiv.childNodes[0]);
}
var allResults=xmlHttp.responseXML.getElementsByTagName("Result");
var result=null;
for(var i=0;i<allResults.length;i++){
result=allResults[i];
parseResult(result);
}
}
function parseResult(result){
var resultDiv=document.createElement("div");
var title=document.createElement("h3");
title.appendChild(document.createTextNode(getChildElementText(result,"Title")));
resultDiv.appendChild(title);
var summary=document.createTextNode(getChildElementText(result,"Summary"));
resultDiv.appendChild(summary);
resultDiv.appendChild(document.createElement("br"));
var clickHere=document.createElement("a");
clickHere.setAttribute("href",getChildElementText(result,"ClickUrl"));
clickHere.appendChild(document.createTextNode(getChildElementText(result,"Url")));
resultDiv.appendChild(clickHere);
document.getElementById("results").appendChild(resultDiv);
}
function getChildElementText(parentNode,childTagName){
var childTag=parentNode.getElementsByTagName(childTagName);
return childTag[0].firstChild.nodeValue;
}
</script>
</head>
<body bgcolor="#CCFFFF">
<h1>通过Yahoo网关搜索并返回结果</h1>
<form action="#">
请填写要搜索的内容:<input type="text" id="searchString"/>
<br/><br/>
显示结果的条数:
<select id="maxResultCount">
<option value="1">1</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<br/><br/>
<input type="button" value="提交" οnclick="doSearch();"/>
</form>
<h2>搜索结果:<h2>
<div id="results"/>
</body>
</html>
处理页面:YahooSearchGatewayServlet.java
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Yahoo! Search Web Services</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
}
function doSearch(){
var url="servlet/YahooSearchGatewayServlet?"+createQueryString()+"&ts="+new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function createQueryString(){
var searchString=document.getElementById("searchString").value;
searchString=escape(searchString);
var maxResultsCount=document.getElementById("maxResultCount").value;
var queryString="query="+searchString+"&results="+maxResultsCount;
return queryString;
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
parseSearchResults();
}
else{
alert("Error accessing Yahoo!search");
}
}
}
function parseSearchResults(){
var resultsDiv=document.getElementById("results");
while(resultsDiv.childNodes.length>0){
resultsDiv.removeChild(resultsDiv.childNodes[0]);
}
var allResults=xmlHttp.responseXML.getElementsByTagName("Result");
var result=null;
for(var i=0;i<allResults.length;i++){
result=allResults[i];
parseResult(result);
}
}
function parseResult(result){
var resultDiv=document.createElement("div");
var title=document.createElement("h3");
title.appendChild(document.createTextNode(getChildElementText(result,"Title")));
resultDiv.appendChild(title);
var summary=document.createTextNode(getChildElementText(result,"Summary"));
resultDiv.appendChild(summary);
resultDiv.appendChild(document.createElement("br"));
var clickHere=document.createElement("a");
clickHere.setAttribute("href",getChildElementText(result,"ClickUrl"));
clickHere.appendChild(document.createTextNode(getChildElementText(result,"Url")));
resultDiv.appendChild(clickHere);
document.getElementById("results").appendChild(resultDiv);
}
function getChildElementText(parentNode,childTagName){
var childTag=parentNode.getElementsByTagName(childTagName);
return childTag[0].firstChild.nodeValue;
}
</script>
</head>
<body bgcolor="#CCFFFF">
<h1>通过Yahoo网关搜索并返回结果</h1>
<form action="#">
请填写要搜索的内容:<input type="text" id="searchString"/>
<br/><br/>
显示结果的条数:
<select id="maxResultCount">
<option value="1">1</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<br/><br/>
<input type="button" value="提交" οnclick="doSearch();"/>
</form>
<h2>搜索结果:<h2>
<div id="results"/>
</body>
</html>