易截截图软件、单文件、免安装、纯绿色、仅160KB

ajax实现类似百度和google的下拉框原理

大家在访问 google或百度的时候,假如要搜索“阿凡达”,我们可能只需要输入一个  “阿”字,网站就会自动匹配一些词组供我们选择,这个设计非常人性化。今天我们就此技术简要介绍,本文假设读者不清楚ajax技术细节。
先说说AJAX,我之前也没有关注过这方面,稍微了解了一下,其实它就是一个客户端脚本与服务器动态通信,在WEB界面不刷新的情况下就可以进行交互的一个技术。这个技术能带来非常棒的用户体验,将网页从“表单”提交方式,变成了界面互动方式,使得整个页面看上去交互性更强大,更方便。
ajax 大致流程如下:
1客户端脚本 - 2触发事件 - 3访问服务器脚本 - 4通过固定数据格式回传数据 - 5客户端动态呈现
这里4一般通用的数据传输方式为XML或者jason(轻量级)
下面就我们实现这个自动匹配输入框的一些限制作要求:
1.词汇取自服务器的一个数据库。
2.一次取10个词。
3.词的匹配为子串匹配。
下面看一下相关重要部分的代码:
客户端javascript
var http_request=false;
function on_search()
{
var content = document.getElementById("searchname").value;

if( content != "" )
document.getElementById("searchresult").innerHTML="正在搜索...";
else
document.getElementById("searchresult").innerHTML="";

////////////创建http request//////////////////
http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest)//Mozilla浏览器
{
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType)
{//设置MIME类别
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject)//IE浏览器
{
try
{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}
catch(e)
{
try
{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}
catch(e){}
}
}
//异常,创建对象实例失败
if(!http_request)
{
document.getElementById("searchresult").innerHTML="<font color=red>Fault error:创建XMLHttp对象失败!</font>";
return false;
}

//在URL添加随机数防止浏览器cache页面
var posturl= "Ajax_test.php?keyword=" + encodeURIComponent(content) + "&random=" + Math.random()*(10000)


相关文档:

一个关于javascript Ajax解析XML的原始实例

        该实例首先需要创建数据库,数据库Test唯一表test,该表具有三个列分别为c1,c2,c3, int型,请自行建立数据库并插入几行测试数据。
        然后我们希望能将数据库中的数据读取出来,我在此处只是将数据库数据以数据集的方式存放在本地中, ......

Ajax实现三级联动下拉框

jsp的代码:
<%
@ page contentType 
=
 
"
text/html; charset=GBK
"
  
import
=
"
java.util.*,com.wehave.hyerp.procurement.domain.Cgsqd
"
%>
<%
@ taglib uri
=
"
struts-html
"
 prefix
=
" ......

jQuery ajax调用示例

   我在上一篇文章中使用原始javascript的方式构造ajax调用,但从全局看,不仅仅代码的阅读性比较低而且隐藏发生错误的可能,比如在页面加载时就改变dom结构,还要时刻关注浏览器的兼容性,而使用jQuery我们将不存在类似的问题,代码的可读性也显著提高,代码量小,下面是jQuery版本的js部分代码,希望能够对读者 ......

Ajax的 ModalPopupExtender控件

该控件可以实现在页面中弹出一个窗口,这个窗口不是一个新的浏览器窗口,而是镶嵌在页面中的一个层。
1 创建一个linkbutton,用于点击打开窗口。
2 拖入一个panel,这个就是我们要弹出的窗口。它也可以是两个嵌套的panel。例程上是这样做的,还是没有明白为什么这么做。
3 拖入一个ModalPopupExtender控件,在该控件的ta ......

Ajax中同步与异步区别的直观性说明

ajax.open方法中,第3个参数是设同步或者异步。prototype等js类库一般都默认为异步,即设为true。
先说下同步的
情况下,js会等待请求返回,获取status。不需要onreadystatechange事件处理函数。
而异步则需要
onreadystatechange事件处理,且值为4再正确处理下面的内容
......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号