<%@ page contentType="text/html; charset=gb2312"%> 一分钟学会实现Suggest功能的AJAX样例
网站公告:   ◆北天JAVA技术网热情为java爱好者服务,本网内容包括JAVA(JSP、servlet、EJB、webservice、j2ee、javabean、应用服务器、JavaScript),数据库(MYSQL、SQL Server、Sybase、Oracle、DB2、数据库综合知识),设计研究(设计模式、Struts、Spring、Hibernate、设计框架、设计综合知识),WEB2.0新技术(主要介绍AJAX),以及各种技术的入门、实例、例子等等,欢迎各位多来坐坐!◆  诚邀各位JAVA爱好者加盟!◆  本网站内容丰富,更新快,保证每周20篇以上!  
加入收藏
设为首页
联系站长
承接项目
  相关资源:网站首页 | 免费培训学院 | 技术论坛 | JAVA聊天室 | 作家专栏 | 开发工具 | 认证考试 | 会员俱乐部
  JAVA技术初学者园地 | jsp与servlet | javascript | Java源代码 | EJB | web service | 应用服务器 | JAVA综合知识
  设计研究设计模式 | 设计框架 | Struts | Spring | Hibernate | 开源项目 | 面向对象设计 | 设计综合知识
  数 据 库MYSQL | SQL Server | Sybase | Oracle | DB2 | Informix | Access | 数据库综合知识
  其他资源:AJAX新技术 | 网站开发 | ERP软件 | OA办公软件 | 商业智能BI | 开发综合知识 | 承接项目 | 项目试用

 
 
一分钟学会实现Suggest功能的AJAX样例
     发布者: 发布时间:2007-01-27
 

Ajax不是什么新鲜的技术,微软98年出的MSDN里面,就介绍了msxml,xmlhttpreuqest的远程读取xml文档的功能。只不过那个时候B/S技术远没有今天这么热,所以ajax被翻出来换了个好听的名字重新炒作。

ajax的实现技术有很多。当然我指的是封装方式,这里我是用一种我认为最合理的封装的ajax框架:xajax

下面我们就看看如何通过简单的代码完成一个google suggest一样的应用的。

1 首先,我们建立一个HTML,在里面拷贝。当然这个代码不需要你写,只要拷贝就行

<link href="styles/estilos.css" rel="stylesheet" type="text/css"/>
<script language="JavaScript" src="javascripts/ejemplo2.js"></script>
<?php
 include_once("server1.server.php"); #servidor para XAJAX
 $xajax->printJavascript(); //这个地方是关键,所以的函数在这里会自动生成
?>

接着,我们在html里面建立

<input  type="text" name="cfdd" size="40" maxlength="100"  onkeydown="buscar();" value="<?php echo stripslashes($cfdd) ?>" >
 <br><div id="search-results"></div>

这里onkeydown的时候,我们根据用户的输入取得相应的suggest

2 ejemplo2.js里面

var inter = null;
 //这里调用php中的函数
function buscar(){
  if (inter) clearInterval(inter);
  inter= setInterval("xajax_busc(document.getElementById('cfdd').value);clearInterval(inter);",300);
  gsc_show(document.getElementById('search-results'));
}

function gsc_show(elt)
{
    if (elt) elt.style.display = 'block';
}

function gsc_hide(elt)
{
    if (elt) elt.style.display = 'none';
}

3 server1.server.php里面

//这个函数就是查询suggest的函数,这里我们用了一个数组,实际使用时,这个数组是根据DB查询得到的

function busc($bu){
if (($bu!="") || ($bu==" ")){
 $objResponse = new xajaxResponse();
 $cfdds = array("主机房","网络办公室","小机房","研20栋");
 $sa="";

 foreach ($cfdds as $cfdd) {
  $sa.="<div class=\"sr\"><span class=\"srt\" "
      ." onclick=\"javascript:document.getElementById('cfdd').value='$cfdd';gsc_hide(document.getElementById('search-results'));\" "    
      .">$cfdd</span>
      </div>";
 }
 $objResponse->addAssign("search-results","innerHTML",$sa);
 return $objResponse->getXML();
 }
 else{
 $objResponse = new xajaxResponse();
 $objResponse->addAssign("search-results","innerHTML","");
 return $objResponse->getXML();
 }
}

//最后注册这个函数

$xajax = new xajax("server1.server.php","xajax_",false);
$xajax->registerFunction("busc");

这样,suggest功能就可以实现了。你一定觉得很奇怪,既然是操作ajax,怎么既没有调用xmlhttprequest也没有解析xml,因为这些操作都被xajax封装了。

其实我么操作ajax的目的就是 html->javascript->xmlhttprequest->php->xml->javascript->html

那现在我们只要html->javascript.......->php->......->......->html 其中三个地方被隐藏起来了。对用户来说就非常简单了。

后面我还会演示如何扩展xajax实现,自动读取级联的Select的样例。

(转载文章请保留出处:北天JAVA技术网(www.java114.com))
 
更多精彩文章:
新手解读:认识XML,AJAX,SNS,Tag
MVC模式-数据库分页技术
AJAX开发智能Web应用程序
在AJAX开发中集成数据库技术
实现基于Ajax的无限级菜单
Ajax到底有多大力量
 
最近评论:
        
你曾悄悄的来过!
wow gold,wow gold,wow gold,ffxi gil max(2997)
        
冰封的往事!
wow power leveling,wow gold,wow power leveling,wow gold max(6711)
        
冰封的往事!
wow power leveling,wow gold,WoW Gold,wow gold max(792)
        
飞舞的传奇!
传世私服,传世私服.传奇世界私服传奇世界私服,传世私服传世私服, 传奇世界私服传奇世界私服.传奇私服传奇私服. max(5462)
        
标 题:   
内 容:   
 
                                  
 
免责声明:该文章由网友发表,如果对您造成侵权,请联系站长

首页 - 承接项目 - 网站地图 - 联系我们 -
版权所有北天JAVA技术工作室 ICP证号:粤ICP备06079815号