Ajax 无刷新修改密码例子,异步传输

今天研究了一天的PermissionBase,其中学到的最多的东西,就是怎么在页面中无刷新的修改密码、添加用户、修改模块信息等等,大部分都用了WebhtmlControl,JavaScript,以及以*.ashx为后缀名的文件,下面我就以最简单的修改密码为例子介绍以下,要用到的三个js分别是stringHelper.js,xmlHttpHelper.js和default.js
      首先在default.js中有个点击修改密码按钮事件的函数,
//修改密码的按钮
function btnSubmitClicked()
{
    
try
    {
        
if ( ! _checkInputValue())  return ;
   
         var updateStr 
=  StringHelper.buildFlatXmlString(
                        
" Staff " ,
                        [
" OldPassword " " NewPassword " ],
                        [document.all.txtOldPassword.value,
                         document.all.txtNewPassword.value]);
        var sSucceed 
=  XmlHttpHelper.transmit( false " post " " text " " ViliDateImage.ashx " null , updateStr);
        document.all.Show.value 
=  sSucceed;
        document.all.txtOldPassword.value 
=   "" ;
        document.all.txtNewPassword.value 
=   "" ;
        document.all.txtReNewPassword.value 
=   "" ;
        document.all.divAlertMess.innerText
= "" ;
    }
    
catch (e)
    {
        alert(Message.clientError);
        location.reload(
true );
    }
}

然后在调用stringHelper.jszhon中的StringHelper.buildFlatXmlString函数把旧密码,新密码从客户端生成XML文件,
StringHelper.buildFlatXmlString  =  function(rootName, arrNames, arrValues)
{
    var returnVal 
=  ( " < "   +  rootName  +   " > " );
    
for (var i  =   0 ; i  <  arrNames.length; i ++ )
    {
        returnVal 
+=  ( " < "   +  arrNames[i]  +   " > " );
        
if (arrValues[i]  !=   null ) returnVal  +=   this .encodeXml(arrValues[i]);
        returnVal 
+=  ( " </ "   +  arrNames[i]  +   " > " );
    }
    returnVal 
+=  ( " </ "   +  rootName  +   " > " );
    
return  returnVal;
};

返回到default.js中, 之后用xmlHttpHelper.js中的XmlHttpHelper.transmit函数调用.ahsx文件
//
//   使用XMLHTTP和远程服务器通信。
//
//   参数名称        必须    类型        取值范围            描述
// -------------------------------------------------------------------------------------------
//     async            是      boolean     true/false          是否使用异步方式
//     httpMethod        是      string      "post"/"get"        http方法
//     responseType    否      string      "text"/"xml"        返回数据的类型
//     url                是      string                          接收请求的URL地址
//     callback        否      function                        异步方式操作完成时执行的回调函数
//     postData        否      string                          post方式时发送的数据
//
//   注:非必须的参数,如不被传递时使用null代替。
//
XmlHttpHelper.transmit  =  function(async, httpMethod, responseType, url, callback, postData)
{
    httpMethod 
=  httpMethod.toLowerCase();
    
if (responseType  !=   null ) responseType  =  responseType.toLowerCase();
    
    var xmlhttp 
=   this .__getXmlHttpObj();
    xmlhttp.open(httpMethod, url, async);
    
    
if ( ! async  &&  httpMethod  ==   " post " )
        xmlhttp.setRequestHeader(
" Content-Type " " application/x-www-form-urlencoded " );

    
if (async)
    {
        xmlhttp.onreadystatechange 
=  function()
        {
            
if (xmlhttp.readyState  ==   4   &&  xmlhttp.status  ==   200 )
            {
                
try
                {
                    
if ( typeof (callback)  ==   " function " )
                    {
                        
switch (responseType)
                        {
                            
case   " text " :
                                callback(xmlhttp.responseText);
                                
break ;
                            
case   " xml " :
                                callback(xmlhttp.responseXML);
                                
break ;
                            
default :
                                callback(
null );
                        }
                    }
                }
                
finally
                {
                    xmlhttp 
=   null ;
                }
            }
        }
        xmlhttp.send(postData);
    }
    
else
    {
        xmlhttp.send(postData);
        
if (xmlhttp.readyState  ==   4   &&  xmlhttp.status  ==   200 )
        {
            
switch (responseType)
            {
                
case   " text " :
                    
return  xmlhttp.responseText;
                
case   " xml " :
                    
return  xmlhttp.responseXML;
                
default :
                    
return   null ;
            }
        }
        
else
        {
            
return   null ;
        }
    }
};
*.ashx文件(主要是后台操作)
public   void  ProcessRequest (HttpContext context) 
    {
        
string  sSucceed ;
        XmlDocument doc 
=   new  XmlDocument();
        doc.Load(context.Request.InputStream);
        sSucceed 
=   " 旧密码: "   +  doc.SelectSingleNode( " Staff/OldPassword " ).InnerText;
        sSucceed
+=   " 新密码: "   +  doc.SelectSingleNode( " Staff/NewPassword " ).InnerText;
        context.Response.ContentType 
=   " text/plain " ;
        context.Response.Write(sSucceed);
        context.Response.End();
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值