在不提交页面的情况下从 HTML 调用服务器

引言

通常情况下，需要从客户端调用服务器而无需提交页面。 这种场景常见于以下情况：

页面包含以下字段：

• 用户名
• 密码
• 一个下拉列表，需要根据用户凭据从数据库中填充。

在这里，当用户输入用户名和密码时，需要进行一次服务器调用，并根据用户的权限，从数据库中获取要在下拉列表中显示的值。 整个过程应该在不将页面提交回服务器的情况下发生。 在这种情况下，我们可能会遇到困难，找不到解决方案。 实现此目的的一种方法是使用IFrame控件。 下面是一个示例代码片段，演示了如何实现此目的。

使用代码

下面的示例代码展示了如何创建一个IFrame控件来调用服务器。 随后，展示了一个可以在从服务器返回时调用的回调方法。 代码在需要的地方进行了注释。

// Method 1: Create IFrame and set its source to another aspx page 
// which does server processing like user validation
// and fetching data from database.

//    IFRAME RPC Call
//
//    IFrame object
var IFrameObj; 
function callToServer(targetURL) 
{
    if (!document.createElement) 
    {
        return true;
    }
    
    var IFrameDoc;

    //
    //    Call BuildQueryString to append parameters
    //    to the target page URL to be sent to server
    //
    var URL = targetURL + BuildQueryString(targetURL);

    if (!IFrameObj && document.createElement) {
        // create the IFrame and assign a reference to the
        // object in our global variable IFrameObj.
        // this will happen only the first time 
        // callToServer() is called
        try    {
            var tempIFrame=document.createElement('iframe');
            tempIFrame.setAttribute('id','RSIFrame');
            tempIFrame.setAttribute('src','tPCallsForMetaData.aspx');
            tempIFrame.style.border='0px';
            tempIFrame.style.width='0px';
            tempIFrame.style.height='0px';
            IFrameObj = document.body.appendChild(tempIFrame);

            if (document.frames) {
                // this is for IE5 Mac, because it will only
                // allow access to the document object
                // of the IFrame if we access it through
                // the document.frames array
                IFrameObj = document.frames['RSIFrame'];
            }
        } 
        catch(exception) {
            // This is for IE5 PC, which does not allow dynamic creation
            // and manipulation of an iframe object. Instead, we'll fake
            // it up by creating our own objects.
            iframeHTML='<iframe id="RSIFrame" style="';
            iframeHTML+='border:0px;';
            iframeHTML+='width:0px;';
            iframeHTML+='height:0px;';
            iframeHTML+='"><\/iframe>';
            document.body.innerHTML+=iframeHTML;
            IFrameObj = new Object();
            IFrameObj.document = new Object();
            IFrameObj.document.location = new Object();
            IFrameObj.document.location.iframe = document.getElementById('RSIFrame');
            IFrameObj.document.location.replace = function(location) 
            {
                this.iframe.src = location;
            }
        }
    }
    
    if (navigator.userAgent.indexOf('Gecko') !=-1 && !IFrameObj.contentDocument) 
    {
        // we have to give NS6 a fraction of a second
        // to recognize the new IFrame
        setTimeout('callToServer()',10);
        return false;
    }
  
    if (IFrameObj.contentDocument) 
    {
        // For NS6
        IFrameDoc = IFrameObj.contentDocument; 
    } 
    else if (IFrameObj.contentWindow) 
    {
        // For IE5.5 and IE6
        IFrameDoc = IFrameObj.contentWindow.document;
    } 
    else if (IFrameObj.document) 
    {
        // For IE5
        IFrameDoc = IFrameObj.document;
    }
    else
    {
        return true;
    }
    IFrameDoc.location.replace(URL);
    return false;
}

// Method 2: Create Callback function which will be called from the server class
// with values that can be used to populate a dropdown list say ratingList.</U>

//    This method takes 2 parameters which are return values
//    from the server. First parameter indicates whether the user credentials 
//    entered are valid or not. If it has value "unauthorized",
//    then give error message and return. If this is a valid user, then 
//    populate the "Rating" dropdown list with
//    values returned in parameter 2 "ratingList".
function handleMetaData(passResult1, ratingList) 
{
    if (passResult1 == "Unauthorized")
    {
        alert("Unauthorized access: Please enter " + 
              "valid userName, Password, Account.");
        UserName.focus();
        return;
    }
    else
    {
        //    Disable the userName, Password and account
        //    fields to disallow User modifications
        //    This is required, since the user could
        //    go to next page after validation and come back
        //    to login page and re-enter username,
        //    password and account which are invalid.
        UserName.disabled = true;
        Password.disabled = true;
        Account.disabled = true;
        
        //    If this was not a default user (login page existed),
        //    then the ratingList is available only here
        //    so populate the MetaData Rating field, if it exists
        if (document.getElementById("Rating") != null)
        {
            //    Populate the dropDown of Rating, after initializing it
            Rating.options.length = 0;
            PopulateDropDown(ratingList, Rating);
        }            
    }
}