一些Ajax和javascript代码
为了跟上潮流,体验一下ajax技术(网上称呼:ajax无刷新技术)。最近看了jQuery.js和prototype.js,学了不少东西。与大家共享我在网上收集和自己整理的ajax类 和js代码。简单、实用。
//返回参数传入的id的那个元素。
function $(objID){
return document.getElementById(objID);
}
//返回任何输入表单控件的值。
function $f(objID){
return document.getElementById(objID).value;
}
//设置元素的html
function $h(objID,html){
$(objID).innerHTML=html;
}
//设置元素的text
function $t(objID,txt){
$(objID).innerText=txt;
}
//隐藏element
function hide(objID){$(
objID).style.display="none";
}
//显示element
function show(objID){
$(objID).style.display="";
}
function updateObj(obj,data){
//该函数等于=$t(Obj,textstring)
var textNode = document.createTextNode(data);
document.getElementById(obj).appendChild(textNode);
//createTextNode 创建的是内容
//createElement 创建的标签
}
//ajax类
function AJAX() {
var XMLHttp = false;
var ObjSelf;
ObjSelf=this;
try { XMLHttp=new XMLHttpRequest; }
catch(e) {
try { XMLHttp=new ActiveXObject("MSXML2.XMLHttp"); }
catch(e2) {
try { XMLHttp=new ActiveXObject("Microsoft.XMLHttp"); }
catch(e3) { XMLHttp=false; }
}
}
if (!XMLHttp) return false;
this.method="post";
this.url=""
this.url += (this.url.indexOf("?") >= 0) ? "&nowtime=" + new Date().getTime():"?nowtime=" + new Date().getTime();
this.async=true;
this.data="";
this.backtext=true
this.callback=function(){return;}
this.method=this.method.toLowerCase();
this.send=function() {
if(!this.method||!this.url||!this.async) return false;
XMLHttp.open (this.method, this.url, this.async);
if(this.method=="post"){
XMLHttp.setRequestHeader("Content-Length",(this.data).length);
XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
XMLHttp.onreadystatechange=function(){
if(XMLHttp.readyState==4){
if(XMLHttp.status==200){
ObjSelf.callback();
}else {
alert("您所请求的页面有异常。");
}
}
}
if(this.method=="post") XMLHttp.send(this.data);
else XMLHttp.send(null);
}
this.gettext=function(){
if(XMLHttp.readyState==4) {
if(XMLHttp.status==200) {
if (this.backtext==true){
return XMLHttp.responseText;
}else{
return XMLHttp.responseXML;
}
}else {
alert("您所请求的页面有异常。");
}
}
}
}
/*-----------------------------------------------------
补充:
Ajax的调用方法。ajax实例*/
//---------------------------
//--ajax读取程序,用get方法
function ajaxread(objID,lx,other){
var ajax=new AJAX();
ajax.method="get";
ajax.url="show.asp?lx="+lx;
ajax.callback=function(){
$h(objID,ajax.gettext());
}
ajax.send();
}
//--ajax保存数据,用post方法
function SaveData(){
var ajax=new AJAX();
ajax.method="post";
ajax.url="SaveJsb.asp";
ajax.data="TmpContent="+escape($("TmpContent").value);
show("Div");
$t("Div","正在提交和保存数据...");
ajax.callback=function(){
alert(ajax.gettext()); //返回的是:responseText
setTimeout("hide(‘Div’)",5000);//5秒后隐藏提示框.
}
ajax.send();
}
//--如果要放回xml,先设置:ajax .backtext=false; 再调用 ajax.gettext();则返回的是: responseXML。