<INPUT TYPE="text" NAME="" onpropertychange="alert(this.value)">+ ajax不过这个设计感觉有问题,访问后台太频繁了,时间不一定来的及反应
解决方案 »
- 多种图片缩放问题,高手帮我看下!
- 动态更新页面浏览器内存持续上涨问题
- javascript 求函数F, F("00")="00",而不是F("00")=0,既强制不作转换
- 关于hta(HTML Application)
- 我想改变a的值,结果数组b也跟着变了,晕!
- 100分求web打印问题!非常急。
- 请 fason(阿信) gaofaq(老高) net_lover(孟子E章) 进来拿分
- 招聘javascript程序员,工作地点青岛,顶者有分!
- 在css中想使用绝对路径来定位图片.但又不能确定web服务器名,要怎样才能在css中得到web服务器名呢?
- 我有一个分类表,想让列表框显示,如何显示列表框
- 问一个简单的关于层动态切换的问题
- ********************************************谁能看到Object.prototype里面的东西吗???
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax</title>
<script>
/* SuperHandler class. ajax连接超类*/
var SuperHandler = function() {}; // implements AjaxHandler 实现AjaxHandler
SuperHandler.prototype = {
request: function(method, url, callback, action, postVars) {
var xhr = this.createXhrObject();
xhr.onreadystatechange = function() {
if(xhr.readyState !== 4) return;
(xhr.status === 200) ?
callback.success(xhr.responseText, xhr.responseXML) :
callback.failure(xhr.status);
};
xhr.open(method, url, true);
switch (action){//发送模式 0 简单提交 return string
case 0:{xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');break;}//发送模式 1 返回静态xml doc return xml
case 1:{xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');break;}//发送模式 1 获取静态doc return ??
case 2:{xhr.setRequestHeader("Content-Type","text/xml"); break;}//发送模式 2 获取静态doc return
case 3:{break;}//发送模式 2 获取静态doc return ??
default:{xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');break;}
}
if(method !== 'POST') postVars = null;
xhr.send(postVars);
},
createXhrObject: function() { // Factory method.
if(window.XMLHttpRequest){var objXMLHttp = new XMLHttpRequest();}else{
var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
for(var n = 0;n < MSXML.length;n++){try{ var objXMLHttp = new ActiveXObject(MSXML[n]); break; }catch(e1){}} }
// If we reach this point, none of the methods worked.
if(objXMLHttp){
return objXMLHttp;
}else{
throw new Error('SuperHandler: Could not create an XHR object.');
}
}
};function getDatabaseInner(value){ var serverAddress="xxx";//这里写你的动态页面地址或其他数据来源
var postBody="retvalue="+encodeURI(value);
var postFlag="POST";
var exh=new SuperHandler();
exh.request(postFlag,serverAddress, callDatabaseInner ,0,postBody)
exh=null;
}
var callDatabaseInner={
success: function() {
var inner = arguments[0];
document.getElementById("DatabaseInner").innerHTML=inner;
return ;
},
failure: function(statusCode) { document.getElementById("DatabaseInner").innerHTML=""; }
};</script>
</head><body>
<input type="text" onKeyPress="getDatabaseInner(this.value);">
<div id="DatabaseInner"></div>
</body>
</html>
#list,#name{
width:100px;
border:solid 1px green;
}
.show{
display:block;
}
.hide{
display:none;
}
</style>
<input type="text" id="name" />
<div id="list" class="hide"></div>
<script type="text/javascript">
var data = ['test','right','good','list','spl','teag','gfjka','ljfkd','sjk','ttt','teafe']
var name = document.getElementById('name');
var list = document.getElementById('list');
name.onkeyup = function(){
var text = name.value;
var lists = '';
if(text != ''){
list.className = 'show';
for(i=0;i<data.length;i++){
if(data[i].indexOf(text) == 0) lists += data[i] + '<br/>';
}
list.innerHTML = lists;
}else{
list.innerHTML = '';
list.className = 'hide'
}
}
</script>以上代码是个纯静态的,你可以用Ajax同服务器进行交互
在 X---对应的就N多!即是是AJAX也追不是输入很快的人! 基本都是内存索引!
AJAX可以满足楼主的需求
如果不用ajax 的话,实现起来比较麻烦。但是笨方法我用过,我也做过这样类型的东西,我做的是有两个栏目,一个顶级栏目,选择顶级栏目出现它相对应的的下级栏目。
跳转页面进行查询数据库。
<input type="text" onblur="find()"><script language="javascript">
function find(){
//这个方法去到后台执行查询,然后再跳转到这个界面。
//注意要把条件保存。
}</script>
如果需要联动的话,可以设置一个属性,每次输入数据的时候判断该属性,需要重新从数据库提取数据则用ajax提取数据(这里用ajax提取数据最好是设置ajax的异步属性为false,也就是同步,不然提取数据可能跟不上输入的节奏)