The Code From: http://www.devarticles.com/c/a/JavaScript/Creating-the-Front-End-of-a-Search-Engine-with-AJAX/4/
Title:Creating the Front End of a Search Engine with AJAX
Title:Creating the Front End of a Search Engine with AJAX
看到这篇 《应用AJAX创建搜索引擎前端界面》 ，原文大家可以读一读，下面是例子，这种模式MSN和GOOGLE都提供类似模式的界面了，比我提供的代码要绚丽的多，可是都是基于无刷新的，我觉得很适合小站里的搜索，便捷而且不用在乎SEO，能得到较好的体验。
<!--
The Code From:http://www.devarticles.com/c/a/JavaScript/Creating-the-Front-End-of-a-Search-Engine-with-AJAX/4/
Title:Creating the Front End of a Search Engine with AJAX
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>AJAX-BASED SEARCH ENGINE</title>
<script language="javascript">
<!--
// send http requests
function sendHttpRequest(url,callbackFunc,respXml){
var xmlobj=null;
try{
xmlobj=new XMLHttpRequest();
}
catch(e){
try{
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert('AJAX is not supported by your browser!');
return false;
}
}
xmlobj.onreadystatechange=function(){
if(xmlobj.readyState==4){
if(xmlobj.status==200){
respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval(callbackFunc+'(xmlobj.responseText)');
}
}
}
// open socket connection
xmlobj.open('GET',url,true);
// send http header
xmlobj.setRequestHeader('Content-Type','text/html;charset=UTF-8');
// send http request
xmlobj.send(null);
}
// display search results
function displayResults(results){
var rescontainer=document.getElementById('resultcontainer');
if(!rescontainer){return};
rescontainer.innerHTML='';
rescontainer.innerHTML=results;
}
window.οnlοad=function(){
if(document.getElementById&&document.getElementsByTagName&&document.createElement){
var searchbutton=document.getElementsByTagName('form')[0].elements[1];
if(searchbutton){
searchbutton.οnclick=function(){
sendHttpRequest('http://www.google.cn/search?hl=zh-CN&q='+document. getElementsByTagName('form')[0].elements[0].value,'displayResults');
}
}
}
}
-->
</script>
<style type="text/css">
<!--
body{
margin:0;
padding:0;
background:#fff;
text-align:center;
}
body div {text-align:left;}
h1{
font:bold 28px Arial, Helvetica, sans-serif;
color:#000;
text-align:center;
}
h2{
font:bold 12px Arial, Helvetica, sans-serif;
color:#c00;
}
p{
font:normal 12px Arial, Helvetica, sans-serif;
color:#000;
}
#searchcontainer{
width:600px;
padding:10px 0 10px 0;
margin-left:auto;
margin-right:auto;
background:#eee;
border:1px solid #ccc;
text-align:center;
}
#resultcontainer{
width:600px;
height:500px;
padding:10px;
margin-left:auto;
margin-right:auto;
overflow:auto;
background:#fafafa;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#resultcontainer ul,li{
display:block;
list-style:none;
}
#resultcontainer a,#resultcontainer a:visited{
font:bold 12px Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#039;
}
#resultcontainer a:hover,#resultcontainer
a:active,#resultcontainer a:focus{
color: #c00;
}
.searchbox{
width:200px;
font:normal 12px Arial, Helvetica, sans-serif;
color:#000;
}
.searchbutton{
width:80px;
font:bold 12px Arial, Helvetica, sans-serif;
color:#000;
}
-->
</style>
</head>
<body>
<h1>AJAX-BASED SEARCH ENGINE</h1>
<div id="searchcontainer">
<form method="get">
<input type="text" name="searchterm" title="Enter your search term here" class="searchbox" />
<input type="button" name="search" value="Search" class="searchbutton" title="Search Now!" />
</form>
</div>
<div id="resultcontainer">
</div>
</body>
</html>
The Code From:http://www.devarticles.com/c/a/JavaScript/Creating-the-Front-End-of-a-Search-Engine-with-AJAX/4/
Title:Creating the Front End of a Search Engine with AJAX
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>AJAX-BASED SEARCH ENGINE</title>
<script language="javascript">
<!--
// send http requests
function sendHttpRequest(url,callbackFunc,respXml){
var xmlobj=null;
try{
xmlobj=new XMLHttpRequest();
}
catch(e){
try{
xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
alert('AJAX is not supported by your browser!');
return false;
}
}
xmlobj.onreadystatechange=function(){
if(xmlobj.readyState==4){
if(xmlobj.status==200){
respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval(callbackFunc+'(xmlobj.responseText)');
}
}
}
// open socket connection
xmlobj.open('GET',url,true);
// send http header
xmlobj.setRequestHeader('Content-Type','text/html;charset=UTF-8');
// send http request
xmlobj.send(null);
}
// display search results
function displayResults(results){
var rescontainer=document.getElementById('resultcontainer');
if(!rescontainer){return};
rescontainer.innerHTML='';
rescontainer.innerHTML=results;
}
window.οnlοad=function(){
if(document.getElementById&&document.getElementsByTagName&&document.createElement){
var searchbutton=document.getElementsByTagName('form')[0].elements[1];
if(searchbutton){
searchbutton.οnclick=function(){
sendHttpRequest('http://www.google.cn/search?hl=zh-CN&q='+document. getElementsByTagName('form')[0].elements[0].value,'displayResults');
}
}
}
}
-->
</script>
<style type="text/css">
<!--
body{
margin:0;
padding:0;
background:#fff;
text-align:center;
}
body div {text-align:left;}
h1{
font:bold 28px Arial, Helvetica, sans-serif;
color:#000;
text-align:center;
}
h2{
font:bold 12px Arial, Helvetica, sans-serif;
color:#c00;
}
p{
font:normal 12px Arial, Helvetica, sans-serif;
color:#000;
}
#searchcontainer{
width:600px;
padding:10px 0 10px 0;
margin-left:auto;
margin-right:auto;
background:#eee;
border:1px solid #ccc;
text-align:center;
}
#resultcontainer{
width:600px;
height:500px;
padding:10px;
margin-left:auto;
margin-right:auto;
overflow:auto;
background:#fafafa;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
#resultcontainer ul,li{
display:block;
list-style:none;
}
#resultcontainer a,#resultcontainer a:visited{
font:bold 12px Arial, Helvetica, sans-serif;
text-decoration:underline;
color:#039;
}
#resultcontainer a:hover,#resultcontainer
a:active,#resultcontainer a:focus{
color: #c00;
}
.searchbox{
width:200px;
font:normal 12px Arial, Helvetica, sans-serif;
color:#000;
}
.searchbutton{
width:80px;
font:bold 12px Arial, Helvetica, sans-serif;
color:#000;
}
-->
</style>
</head>
<body>
<h1>AJAX-BASED SEARCH ENGINE</h1>
<div id="searchcontainer">
<form method="get">
<input type="text" name="searchterm" title="Enter your search term here" class="searchbox" />
<input type="button" name="search" value="Search" class="searchbutton" title="Search Now!" />
</form>
</div>
<div id="resultcontainer">
</div>
</body>
</html>
扫一扫
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
