尽管现在的ajax框架很多，但我们通常用不了那么多功能，如果仅是为了一个简单的功能去使用诸入dojo、prototype、yui等框架，未免小题大做，这里，我仅从服务器端获取数据这一最常用的功能出发，分离并整理出了这个函数，使用时非常方便，供大家参考。
/**//** myajax.js
* AJAX对象封装
* @author: kevon
* @date: 2007-07-27
* 注：本文件的最后附有使用示例
*/
function $(obj)...{return document.getElementById(obj);}
this.xml=false;//是否传回xml格式的数据
this.asynchronous=true;//是否异步
/**//** url：路径
* pars：参数
* showResponse：处理函数
* showResponse的格式为aa
* 注：aa为函数名
*/
myajax = function(url,pars,showResponse,xml)
...{
if(typeof(xml)!="undefined" && xml.toLowerCase()=="xml")
this.xml=true;
if (pars.length > 0)
url += (url.match(/?/) ? '&' : '?') + pars;
if(typeof(showResponse)!="undefined")
this.callBack=showResponse;
try ...{
req = xmlHTTP();
} catch(e) ...{
req = false;
}
req.onreadystatechange = processRequest;
req.open("GET",url,this.asynchronous);
req.send(null);
}
//创建XMLHttpRequest对象
xmlHTTP = function() ...{
var xmlHTTP;
var msxmlhttp = new Array(
'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0',
'Msxml2.XMLHTTP',
'Microsoft.XMLHTTP');
for (var i = 0; i < msxmlhttp.length; i++) ...{
try ...{
xmlHTTP = new ActiveXObject(msxmlhttp[i]);
} catch (e) ...{
xmlHTTP = null;
}
}
if(!xmlHTTP && typeof XMLHttpRequest != "undefined")
xmlHTTP = new XMLHttpRequest();
return xmlHTTP;
}
// 处理返回信息的函数
function processRequest() ...{
if (req.readyState == 4) ...{ // 判断对象状态
if (req.status == 200 && req.statusText == "OK") ...{ // 信息已经成功返回，开始处理信息
if(typeof(callBack)=="function")
if(xml)
callBack(req.responseXML);
else
callBack(req.responseText);
} else ...{ //页面不正常
alert("您所请求的页面有异常。");
}
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ajax</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="myajax.js"></script>
<script language="JavaScript">...
<!--
function processReal(responseText)...{
$("spanPaiming").innerHTML=responseText;
//var result = responseText.getElementsByTagName("info")[0].text;//处理以xml格式返回的数据
//alert(result);
}
function doPaiming() ...{
var baojia = $("txtBaojia").value;
if(baojia=="" || baojia==null) ...{
window.alert("不能为空。");
$("txtBaojia").focus();
return false;
}
else ...{
$("spanBao").innerHTML=baojia;
var url='test.asp';
var pars='baojia='+baojia;
var callback=processReal;
//如果要返回xml格式的，请加上下面这行
//this.xml=true;//缺省为false（以text的方式返回信息），另外，this.xml=true与myajax(url,pars,callback,'xml')这种方式等价;
//ajax调用
myajax(url,pars,callback);
//myajax(url,pars);
}
}
//-->
</script>
</head>
<body>
<form>
<div>请输入数值<input id="txtBaojia" maxlength="8" onkeyup="value=(/^(+)?d+($|.d+$)/.test( value +'0' ))? value : value.replace(/[^d]/g,'');" />
<input type="button" onclick="doPaiming()" value="在服务器端计算" /></div>
<div style="bgcolor:#fafcea">
您输入的是[<span id="spanBao" ></span>],除2之后是[<span id="spanPaiming" ></span>]。
</div>
</form>
</body>
</html>
用最常用的ASP来处理客户端的请求，当然，你可以随便用其他的服务器端语言，这个页面太简单了，你可以很轻松的改成其他语言，修改之后你记得改show.html中的url，这里是（test.asp）。
给出一个示例
/**//** myajax.js * AJAX对象封装 * @author: kevon * @date: 2007-07-27 * 注：本文件的最后附有使用示例 */function $(obj)...{return document.getElementById(obj);}this.xml=false;//是否传回xml格式的数据this.asynchronous=true;//是否异步/**//** url：路径 * pars：参数 * showResponse：处理函数 * showResponse的格式为aa * 注：aa为函数名 */myajax = function(url,pars,showResponse,xml)...{ if(typeof(xml)!="undefined" && xml.toLowerCase()=="xml") this.xml=true; if (pars.length > 0) url += (url.match(/?/) ? '&' : '?') + pars; if(typeof(showResponse)!="undefined") this.callBack=showResponse; try ...{ req = xmlHTTP(); } catch(e) ...{ req = false; } req.onreadystatechange = processRequest; req.open("GET",url,this.asynchronous); req.send(null);}//创建XMLHttpRequest对象xmlHTTP = function() ...{ var xmlHTTP; var msxmlhttp = new Array( 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'); for (var i = 0; i < msxmlhttp.length; i++) ...{ try ...{ xmlHTTP = new ActiveXObject(msxmlhttp[i]); } catch (e) ...{ xmlHTTP = null; } } if(!xmlHTTP && typeof XMLHttpRequest != "undefined") xmlHTTP = new XMLHttpRequest(); return xmlHTTP;}// 处理返回信息的函数function processRequest() ...{ if (req.readyState == 4) ...{ // 判断对象状态 if (req.status == 200 && req.statusText == "OK") ...{ // 信息已经成功返回，开始处理信息 if(typeof(callBack)=="function") if(xml) callBack(req.responseXML); else callBack(req.responseText); } else ...{ //页面不正常 alert("您所请求的页面有异常。"); } }}
show.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Ajax</title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><script src="myajax.js"></script><script language="JavaScript">...<!-- function processReal(responseText)...{ $("spanPaiming").innerHTML=responseText; //var result = responseText.getElementsByTagName("info")[0].text;//处理以xml格式返回的数据 //alert(result); } function doPaiming() ...{ var baojia = $("txtBaojia").value; if(baojia=="" || baojia==null) ...{ window.alert("不能为空。"); $("txtBaojia").focus(); return false; } else ...{ $("spanBao").innerHTML=baojia; var url='test.asp'; var pars='baojia='+baojia; var callback=processReal; //如果要返回xml格式的，请加上下面这行 //this.xml=true;//缺省为false（以text的方式返回信息），另外，this.xml=true与myajax(url,pars,callback,'xml')这种方式等价; //ajax调用 myajax(url,pars,callback); //myajax(url,pars); } }//--></script></head><body><form><div>请输入数值<input id="txtBaojia" maxlength="8" onkeyup="value=(/^(+)?d+($|.d+$)/.test( value +'0' ))? value : value.replace(/[^d]/g,'');" /><input type="button" onclick="doPaiming()" value="在服务器端计算" /></div><div style="bgcolor:#fafcea">您输入的是[<span id="spanBao" ></span>],除2之后是[<span id="spanPaiming" ></span>]。</div></form></body></html><%
Dim s
s=request("baojia")
s=s/2
Response.write(s)
Response.End()
%>
<%
'下面的是xml方式输出，传递xml格式的用这种
'Response.ContentType="text/xml"
'response.Write("<?xml version='1.0' encoding='GB2312' ?>")
'response.Write("<root>")
'response.Write("<info>love you</info>")
'response.Write("</root>")
%>
Dim s
s=request("baojia")
s=s/2
Response.write(s)
Response.End()
%>
<%
'下面的是xml方式输出，传递xml格式的用这种
'Response.ContentType="text/xml"
'response.Write("<?xml version='1.0' encoding='GB2312' ?>")
'response.Write("<root>")
'response.Write("<info>love you</info>")
'response.Write("</root>")
%>
注：方法并非越通用越好，最适合自己的才是最好的。文中使用的返回数据类型可以自由指定,默认是responseText，你如果想用xml的话照注释做就可以，随你了，适用就好。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
