基于ajax的搜索引擎
这两个星期在学习xml、JavaScript和ajax的东西，laoxi要求我们先看这些知识，然后用这些知识做一个搜索引擎的东西。一开始用两天看了一下关于xml的东西，但发现只是看根本就是，前脚看后脚忘。干脆先做出这个东西出来，用到哪些知识再看吧，于是我跟一名叫做小猪的家伙一起研究起了这个东西。一开始是做了一个服务器端控件的搜索引擎，后来才慢慢转到ajax上来，先把基于ajax的东西贴上来，哈哈 废话不多讲 基于ajax的搜索引擎，其原理其实是，利用了windows已经做好的一个搜索引擎接口，这个借口想必大家也都见过，就是一个被叫做bing的接口。 ajax向该接口提出请求，并将参数传递过去，服务器相应，并返回结果，JavaScript处理结果并显示。 看起来描述的这么简单，但是确实也费了我们一番功夫。 首先利用ajax发出请求，光这一请求，就花了我们大约两天的时间，首先请求的地址要写对，其次传递的参数也要写对，因为bing接口在处理参数的时候其实是以xml的形式来处理参数，所以我们的参数要写成xml结构的字符串。这样服务器端才能返回正确的结果，其实返回的结果既可以是普通的字符串形式，直接显示，也可以使xml的形式.xml的形式需要利用dom进行处理。才能正确显示在浏览器中 function sendHttpRequest(url,callbackFunc,respXml,ParameterStr)
{ //
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('post',url,true);
// send http header
xmlobj.setRequestHeader("Content-Type","text/html;charset=UTF-8");
// send http request
xmlobj.send(ParameterStr);
}
// display search results
function displayResults(results)
{//显示结果的回调函数
var rootDom=results.documentElement;//获取xml的根结点
var Nodes=rootDom.selectNodes("//soapenv:Body/SearchResponse/parameters/Web/Results/WebResult");
//遍历集合
var content="
| "+Title+" | |
| "+description+" | |
| "+displayUrl+" | "+dateTime+" |
var rescontainer=document.getElementById("resultcontainer");
if(!rescontainer){return};
rescontainer.innerHTML="";//控件内容置空
rescontainer.innerHTML=content;
} window.οnlοad=function(){
if(document.getElementById&&document.getElementsByTagName&&document.createElement)
{
var searchbutton=document.getElementById("Searchbtn");
if(searchbutton)
{
searchbutton.οnclick=function()
{
//将接口需要的所有参数封装为数组
var text=document.getElementsByTagName('form')[0].elements[0].value;
var offset=document.getElementById("Offset").value;
if(offset==""||offset<0)
offset=0;
var Num=document.getElementById("Num").value;
if(Num==""||Num<0)
Num=10;
var ParameterStr= "
"
"
"
"
"
"
"
"
"
"
"
"
"
"
"
"
"
"
"
"
"
//将参数数组拼装成url串，最终得到bing的URL Service的请求URL
var requestStr = " http://api.search.live.net:80/soap.asmx";
sendHttpRequest(requestStr,"displayResults",true,ParameterStr);
}
}
}
}