不要在门外徘徊,Ajax框架ProtoType的使用方法.
如今浏览器多如牛毛,对javascript的解释又不统一,所以,很多技术团体或者组织就写出一套专门的应对大多数浏览器的JS框架,当然有很多,我这里不一一介绍,仅拿里面最小巧的一个ProtoType来作为案例.
用ProtoType原因主要有几下几个:
1.它小巧,用于一般的Ajax交互已经够用了
2.它易上手,没有复杂的语法,核心语句只有几句....
使用步骤:
1:在html文件<head></head>标签内引入它的文件,如:<script language="javascript" type="text/javascript" src="js/Prototype.js"></script>
2:在html文件任何位置写一个提交数据的js方法
例如:
<script language="javascript" type="text/javascript">
function SubmitData(userName,userPass){
var Action='username='+userName+'&userpass='+userPass;//这里定义好要传送的参数
var options={
method:'get',//传递的方式,是get还是post,如果提交一篇文章,建议用post
parameters:Action,//参数
onComplete:function(transport)//这里是关键,这是ajax的回调函数,就是服务器返回后,由浏览器自动调用的函数,括号里的是从服务器返回的内容
{
var returnvalue=transport.responseText.split('|');//这里我们假定服务器返回了"err|验证失败"或"suc|验证成功"
if(returnvalue[0] == 'err'){
alert(returnvalue[1]);//如果服务器验证失败要做的事情
}else if(returnvalue[0] == 'suc'){
alert(returnvalue[1]);//如果服务器验证成功要干嘛.
}
}
};
new Ajax.Request('Submit.asx?no-cache='+Math.random(),options);//这里是发送ajax请求.
}
</script>
整个客户端就只这么点东西,比起我们自己写的ajax语句来,既要整洁,又要易懂,更重要的是对浏览器兼容性要更好.
例如我们以前可能这么写:
var xmlHttpRequest = null;
function Submit(value)
{
var url = "ParamHandler.ashx";
if (window.ActiveXObject){ /*在IE下初始化XMLHttpRequest对象 */
try
{
//新版本的 Internet Explorer
xmlHttpRequest= new ActiveXObject("Msxml2.XMLHTTP");
}catch (otherMicrosoft)
{
try{
//较老版本的 Internet Explorer
xmlHttpRequest= new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed)
{
// 还是失败，那么就认为创建失败……
xmlHttpRequest= false;
}
}
}
else if(window.XMLHttpRequest)
{ /*在Firefox下初始化XMLHttpRequest对象 */
xmlHttpRequest = new XMLHttpRequest();
}
if(!xmlHttpRequest)
{
sAlert("创建 XMLHttpRequest 对象失败!");
}
xmlHttpRequest.open("POST", url, true);
xmlHttpRequest.onreadystatechange = onReadyStateChange;
xmlHttpRequest.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded; charset=UTF-8");
xmlHttpRequest.send("myvalue=" + value);
}//实例化xmlHttpRequest用了多长代码.
function onReadyStateChange()//这是回调函数
{
if (xmlHttpRequest.readyState == 4)
{
if (xmlHttpRequest.status == 200)
{
var returnvalue = xmlHttpRequest.responseText.split("|");
if(returnvalue[0] == 'err'){
alert(returnvalue[1]);//如果服务器验证失败要做的事情
}else if(returnvalue[0] == 'suc'){
alert(returnvalue[1]);//如果服务器验证成功要干嘛.
}
}
}
}
到这里,这个调用才完成结束,如果一个页面的表单很多,那么搞起来就更麻烦,还容易出错!这就是我们要坚决使用Ajax框架的原因.
至于服务器端如何处理这些参数,其实就是Request.QueryString或者Request.Form来接收值,这要看你的method定义什么方式去发送了.返回值,其实就是Response.Write("suc|验证成功");这样了.
本文圣旨在揭示ProtoType中ajax的使用方法.其它的更多细节,可以参阅相关网站.
