易截截图软件、单文件、免安装、纯绿色、仅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)


相关文档:

Ajax实现三级联动下拉框

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

jQuery AJAX的5种实现方式

What is AJAX
This section is for those who have no idea what AJAX is. If you don’t fall into this category, feel free to skip to the next section.
AJAX stands for asynchronous JavaScript and XML. If you see another term XHR, which is shorthand for XML HTTP request, it’s the same thing. ......

AJAX和XMLHTTP原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术 ......

在 vs2008为asp.net ajax添加js智能感知


vs2008为asp.net ajax添加js智能感知



今天找了好久,终于搞清楚了,scriptManager控件支持js智能感知,而从其继承的toolkitScriptManager不支持。至少在
vs2008b2中是这样。
要在js文件中添加asp.net ajax的js智能感知(与scriptManager控件无关),在js文件的开头添加这样一行即可:
//
/<referen ......

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

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