从HTML调用服务器而不发布页面

分享于 

6分钟阅读

Web开发

  繁體 雙語

介绍

通常,需要在不张贴页面的情况下从客户端发出服务器调用。 此类场景在典型情况下发生,例如:

页面包含以下字段:

  • 用户名
  • 密码
  • 下拉列表,根据用户凭据从数据库填充

在这里,当用户输入 NAME 和密码时,需要进行服务器调用,以及在下拉列表中显示的值。 整个活动不应该将页面回发到服务器上。 在这样的场景中,我们陷入困境,没有解决方案。 实现这一目标的方法之一是使用 IFrame 控件。 示例代码Fragment显示 below 演示如何实现这里功能。

使用代码

示例代码 below 演示如何创建 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 objectvar IFrameObj; function callToServer(targetURL) 
{
 if (!document.createElement) 
 {
 returntrue;
 }
 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 calledtry {
 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);
 returnfalse;
 }
 if (IFrameObj.contentDocument) 
 {
 // For NS6 IFrameDoc = IFrameObj.contentDocument; 
 } 
 elseif (IFrameObj.contentWindow) 
 {
 // For IE5.5 and IE6 IFrameDoc = IFrameObj.contentWindow.document;
 } 
 elseif (IFrameObj.document) 
 {
 // For IE5 IFrameDoc = IFrameObj.document;
 }
 else {
 returntrue;
 }
 IFrameDoc.location.replace(URL);
 returnfalse;
}// 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 existsif (document.getElementById("Rating")!= null)
 {
 // Populate the dropDown of Rating, after initializing it Rating.options.length = 0;
 PopulateDropDown(ratingList, Rating);
 } 
 }
}

Server  CAL  pos  POST  调用  Posting  
相关文章