这两个星期在学习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="<table>"
    for(var i=0;i<Nodes.length;i++)
    {
    
       var nodename=Nodes.item(i).nodeName;
       var node= Nodes.item(i);//郁闷，居然不能这么用
       var Title=node.childNodes.item(0).text;
       var des=node.selectSingleNode("Description");
       if(des!=null)
          var description=des.text;
       else
          var description="";
       var url=node.selectSingleNode("Url").text;
      
       var displayUrl=node.selectSingleNode("DisplayUrl").text;
       var dateTime=node.selectSingleNode("DateTime").text;
        content+="<tr><td colspan=2 ><a href='"+url+"'style='font-size:14px'>"+Title+"</a></td></tr>"+
                   "<tr><td colspan=2 style='font-size:12px'>"+description+"</td></tr>"+
                   "<tr><td ><a href='"+url+"' style='text-decoration:none;'>"+displayUrl+"</a></td><td style='font-size:12px;' align='left'>"+dateTime+"</td></tr>"+
                   "<tr><td colspan=2 style='height:20px;'></td></tr>";
                 
 
    }
   content+="</table>"
    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= "<soapenv:Envelope xmlns:soapenv=' http://schemas.xmlsoap.org/soap/envelope/' xmlns:sear=' http://schemas.microsoft.com/LiveSearch/2008/03/Search'>" +
                                          "<soapenv:Header/>" +
                                          "<soapenv:Body>" +
                                              "<sear:SearchRequest>" +
                                                    "<sear:parameters>" +
                                                        "<sear:Version>2.1</sear:Version>" +
                                                        "<sear:Query>"+text+"</sear:Query>" +
                                                        "<sear:AppId>37D852F6C742365726425687549AD51EEBA0892B</sear:AppId>" +
                                                        "<sear:Options>"+
                                                            "<sear:SearchOption>EnableHighlighting</sear:SearchOption>"+
                                                        "</sear:Options>"+
                                                        "<sear:Sources>" +
                                                           "<sear:SourceType>Web</sear:SourceType>" +
                                                       "</sear:Sources>" +
                                                       "<sear:Web>" +
                                                         "<sear:Offset>"+offset+"</sear:Offset>" +
                                                         "<sear:Count>"+Num+"</sear:Count>" +
                                                      "</sear:Web>" +
                                                   "</sear:parameters>" +
                                            "</sear:SearchRequest>" +
                                       "</soapenv:Body>" +
                                 "</soapenv:Envelope>";
                                   //将参数数组拼装成url串，最终得到bing的URL Service的请求URL
                                    var requestStr = " http://api.search.live.net:80/soap.asmx";
                                   
                                    sendHttpRequest(requestStr,"displayResults",true,ParameterStr);
                                }
                            }  
                         }
}
</script>
<style type="text/css">
body{
            margin:0;
            padding:0;
            background:#fff;
}
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:5px 0 5px 0;
            margin-left:auto;
            margin-right:auto;
            background:#9c9;
            border:1px solid #000;
            text-align:center;
}
#resultcontainer{
            width:580px;
            height:500px;
            padding:10px;
            margin-left:auto;
            margin-right:auto;
            overflow:auto;
            background:#eee;
            border-left:1px solid #000;
            border-right:1px solid #000;
            border-bottom:1px solid #000;
}
#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" action="">
<table style="width:100%">
   <tr>
       <td align="right"><label>关键字：</label></td>
       <td align="left"><input type="text" name="searchterm" title="Enter your searchterm here" class="searchbox" /></td></tr>
   <tr>
       <td align="right"><label>偏移量：</label></td>
       <td align="left"><input type="text" id="Offset" /></td>
   </tr>
       <tr><td align="right"><label>搜索条数：</label></td>
       <td align="left"><input type="text" id="Num" /></td>
   </tr>
</table>
<input type="button" name="search" value="Search"
class="searchbutton" title="Search Now!" id="Searchbtn" />
 
 
</form>
</div>
<div id="resultcontainer">
</div>
</body>
</html>