应用AJAX创建搜索引擎前端界面
2007-03-10 00:03
295 查看
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
看到这篇《应用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.onload=function(){
if(document.getElementById&&document.getElementsByTagName&&document.createElement){
var searchbutton=document.getElementsByTagName('form')[0].elements[1];
if(searchbutton){
searchbutton.onclick=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>
看到这篇《应用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.onload=function(){
if(document.getElementById&&document.getElementsByTagName&&document.createElement){
var searchbutton=document.getElementsByTagName('form')[0].elements[1];
if(searchbutton){
searchbutton.onclick=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 应用AJAX创建搜索引擎前端界面
- 【前端】使用yeoman创建一个空项目
- VS2010/MFC编程入门之一（Ribbon界面开发：创建Ribbon样式的应用程序框架）
- 使用TextInputLayout创建一个登陆界面(j界面很漂亮)
- 献给和我合作的过得前端童靴们：jquery源码分析--核心函数(创建选择器筛选document元素)
- 创建自己的搜索引擎，利用google进行站内搜索
- 用OpenStack界面轻松创建虚拟机的你，看得懂虚拟机启动的这24个参数么？
- 用OpenStack界面轻松创建虚拟机的你，看得懂虚拟机启动的这24个参数么？
- Oracle 数据库创建(图形界面操作)
- 用VC++在单文档界面中创建多视图
- Unity实战笔记_4.搭建一个人物创建选择界面
- JAVA版连连看界面对象创建算法研究 推荐
- Web前端框架 界面UI框架调查说明
- 前端开发推荐-创建一个精美的jquery图片库效果
- 代码实现Lable 、textField创建界面以及键盘的处理
- 用Vue.js开发一个电影App的前端界面
- VS2003 C#：重写键盘响应事件、动态创建控件、创建线程、在线程中使用委托在界面显示数据
- 1.创建图形化界面
- 在Layui框架里设计一个评论列表的前端界面
- Qt创建一个电话本界面程序