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

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