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();
    } 最後把傳回值，返回到修改密碼頁面，確定是否修改成功。。