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();
    }

最后把返回值，返回到修改密码页面，确定是否修改成功！！