Ajax应用(prototype.js为框架)
<
html
>
< head >
< Script language ="javaScript" src ="prototype.js" ></ Script >
< script type ="text/javascript" >
// 用于信息显示
function async()
{
new Ajax.Request( ' show.asp ' , {
method: ' get ' ,
onSuccess: Success,
onFailure: Failure
});
}
// 用于提交表单
function Send_info()
{
new Ajax.Request( ' upload.asp ' , {
postBody: Formdata( " form1 " ),
onSuccess: function Failure(){ alert( " 提交完成 " ); },
onFailure: Failure
});
}
// 自定义的获取表单数据的函数
function Formdata(form){
var f = document.getElementById(form), formData = '' , len = f.elements.length;
for ( var s = 0 ; s < len; s ++ ) {
var elem = f.elements[s];
if ((( " radio " == elem.type || " checkbox " == elem.type) && false == elem.checked) || ( " select-one " == elem.type && true == elem.disabled)){ continue ;}
formData += elem.name + " = " + escape(elem.value) + " & " ;
}
return formData;
}
// 加载成功函数
function Success(xmlReq){
document.getElementById( " main_content " ).innerHTML = xmlReq.responseText;
};
// 加载失败函数
function Failure(){
alert( " 加载失败 " );
};
</ script >
</ head >
< body >
< form method ="post" name ="form1" id ="form1" >
< input name ="num" type ="text" value ="123" />
< input name ="" type ="button" value ="提交" onclick ="Send_info()" />
</ form >
< div id ="main_content" > </ div >
< script type ="text/javascript" >
async();
</ script >
</ body >
</ html >
< head >
< Script language ="javaScript" src ="prototype.js" ></ Script >
< script type ="text/javascript" >
// 用于信息显示
function async()
{
new Ajax.Request( ' show.asp ' , {
method: ' get ' ,
onSuccess: Success,
onFailure: Failure
});
}
// 用于提交表单
function Send_info()
{
new Ajax.Request( ' upload.asp ' , {
postBody: Formdata( " form1 " ),
onSuccess: function Failure(){ alert( " 提交完成 " ); },
onFailure: Failure
});
}
// 自定义的获取表单数据的函数
function Formdata(form){
var f = document.getElementById(form), formData = '' , len = f.elements.length;
for ( var s = 0 ; s < len; s ++ ) {
var elem = f.elements[s];
if ((( " radio " == elem.type || " checkbox " == elem.type) && false == elem.checked) || ( " select-one " == elem.type && true == elem.disabled)){ continue ;}
formData += elem.name + " = " + escape(elem.value) + " & " ;
}
return formData;
}
// 加载成功函数
function Success(xmlReq){
document.getElementById( " main_content " ).innerHTML = xmlReq.responseText;
};
// 加载失败函数
function Failure(){
alert( " 加载失败 " );
};
</ script >
</ head >
< body >
< form method ="post" name ="form1" id ="form1" >
< input name ="num" type ="text" value ="123" />
< input name ="" type ="button" value ="提交" onclick ="Send_info()" />
</ form >
< div id ="main_content" > </ div >
< script type ="text/javascript" >
async();
</ script >
</ body >
</ html >