使用Ajax打造属于自己的搜索引擎
1.建立Yahoo!网关,将XMLHttpRequest请求转发到Yahoo!提供API的Web服务;
2.Yahoo!做出响应时,网关将响应转发到客户端;
3.客户端接收到响应,显示搜索结果;
search.html:
程序代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Search</title>
<script src="js/search.js"></script>
</head>
<body>
<h1>Magci Search</h1>
Search String:<input id="key" type="text" />
Max number of Results: <input id="top" type="text" size="2" />
<input type="button" value="Search" onClick="doSearch();" />
<h1><span id="title"></span></h1>
<div id="result"></div>
</body>
</html>
js/search.js:
程序代码
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function createQueryString() {
var queryString;
var key = document.getElementById("key").value;
var top = document.getElementById("top").value;
var timeStamp = new Date().getTime();
queryString = "query=" + escape(key) + "&results=" + top + "×temp=" + timeStamp;
return queryString;
}
function doSearch() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = callback;
var url = "search.mgc?" + createQueryString();
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
parseResult();
}
}
}
function parseResult() {
clearResult();
var title = document.getElementById("title");
title.innerHTML = "Result:";
var xmlDoc = xmlHttp.responseXML;
var results = xmlDoc.getElementsByTagName("Result");
for (var i = 0; i < results.length; i++) {
createResult(results[i]);
}
}
function clearResult() {
var title = document.getElementById("title");
if (title.hasChildNodes()) {
title.removeChild(title.firstChild);
}
var result = document.getElementById("result");
while (result.hasChildNodes()) {
result.removeChild(result.firstChild);
}
}
function createResult(result) {
var div = document.getElementById("result");
var rsTitle = result.getElementsByTagName("Title")[0].firstChild.nodeValue;
var rsSummary = result.getElementsByTagName("Summary")[0].firstChild.nodeValue;
var rsUrl = result.getElementsByTagName("Url")[0].firstChild.nodeValue;
var rsClickUrl = result.getElementsByTagName("ClickUrl")[0].firstChild.nodeValue;
var titleWord = document.createElement("h3");
titleWord.appendChild(document.createTextNode(rsTitle));
var title = document.createElement("a");
title.appendChild(titleWord);
title.setAttribute("href", rsClickUrl);
title.setAttribute("target", "_blank");
var summary = document.createTextNode(rsSummary);
var url = document.createElement("div");
url.appendChild(document.createTextNode(rsUrl));
url.style.color = "#00BB33";
div.appendChild(title);
div.appendChild(summary);
div.appendChild(url);
}
Search.java:
程序代码
package cn.edu.ahau.mgc.ajax.search;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Search extends HttpServlet {
public static final String YAHOOURL = "http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=Y0nppIbV34FKY.Murp29GVLpnWE4Jjcbe2iv0BVA5zas4up547_KtEjh80UtAg--&type=all";
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String url = YAHOOURL + "&" + request.getQueryString();
HttpURLConnection conn = (HttpURLConnection) new URL(url).openConnection();
conn.setDoInput(true);
conn.setDoOutput(true);
conn.setRequestMethod("GET");
response.setStatus(conn.getResponseCode());
response.setContentType("text/xml");
BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
String input = null;
OutputStream os = response.getOutputStream();
while ((input = br.readLine()) != null) {
os.write(input.getBytes());
os.flush();
}
os.close();
br.close();
}
}
web.xml:
程序代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>Search</servlet-name>
<servlet-class>cn.edu.ahau.mgc.ajax.search.Search</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Search</servlet-name>
<url-pattern>/search.mgc</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
1.建立Yahoo!网关,将XMLHttpRequest请求转发到Yahoo!提供API的Web服务;
2.Yahoo!做出响应时,网关将响应转发到客户端;
3.客户端接收到响应,显示搜索结果;
search.html:
程序代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Search</title>
<script src="js/search.js"></script>
</head>
<body>
<h1>Magci Search</h1>
Search String:<input id="key" type="text" />
Max number of Results: <input id="top" type="text" size="2" />
<input type="button" value="Search" onClick="doSearch();" />
<h1><span id="title"></span></h1>
<div id="result"></div>
</body>
</html>
js/search.js:
程序代码
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function createQueryString() {
var queryString;
var key = document.getElementById("key").value;
var top = document.getElementById("top").value;
var timeStamp = new Date().getTime();
queryString = "query=" + escape(key) + "&results=" + top + "×temp=" + timeStamp;
return queryString;
}
function doSearch() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = callback;
var url = "search.mgc?" + createQueryString();
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
parseResult();
}
}
}
function parseResult() {
clearResult();
var title = document.getElementById("title");
title.innerHTML = "Result:";
var xmlDoc = xmlHttp.responseXML;
var results = xmlDoc.getElementsByTagName("Result");
for (var i = 0; i < results.length; i++) {
createResult(results[i]);
}
}
function clearResult() {
var title = document.getElementById("title");
if (title.hasChildNodes()) {
title.removeChild(title.firstChild);
}
var result = document.getElementById("result");
while (result.hasChildNodes()) {
result.removeChild(result.firstChild);
}
}
function createResult(result) {
var div = document.getElementById("result");
var rsTitle = result.getElementsByTagName("Title")[0].firstChild.nodeValue;
var rsSummary = result.getElementsByTagName("Summary")[0].firstChild.nodeValue;
var rsUrl = result.getElementsByTagName("Url")[0].firstChild.nodeValue;
var rsClickUrl = result.getElementsByTagName("ClickUrl")[0].firstChild.nodeValue;
var titleWord = document.createElement("h3");
titleWord.appendChild(document.createTextNode(rsTitle));
var title = document.createElement("a");
title.appendChild(titleWord);
title.setAttribute("href", rsClickUrl);
title.setAttribute("target", "_blank");
var summary = document.createTextNode(rsSummary);
var url = document.createElement("div");
url.appendChild(document.createTextNode(rsUrl));
url.style.color = "#00BB33";
div.appendChild(title);
div.appendChild(summary);
div.appendChild(url);
}
Search.java:
程序代码
package cn.edu.ahau.mgc.ajax.search;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Search extends HttpServlet {
public static final String YAHOOURL = "http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=Y0nppIbV34FKY.Murp29GVLpnWE4Jjcbe2iv0BVA5zas4up547_KtEjh80UtAg--&type=all";
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String url = YAHOOURL + "&" + request.getQueryString();
HttpURLConnection conn = (HttpURLConnection) new URL(url).openConnection();
conn.setDoInput(true);
conn.setDoOutput(true);
conn.setRequestMethod("GET");
response.setStatus(conn.getResponseCode());
response.setContentType("text/xml");
BufferedReader br = new BufferedReader(new InputStreamReader(conn.getInputStream()));
String input = null;
OutputStream os = response.getOutputStream();
while ((input = br.readLine()) != null) {
os.write(input.getBytes());
os.flush();
}
os.close();
br.close();
}
}
web.xml:
程序代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>Search</servlet-name>
<servlet-class>cn.edu.ahau.mgc.ajax.search.Search</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Search</servlet-name>
<url-pattern>/search.mgc</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>