使用XMLHTTP实现[执行操作不刷新页面]

ASP.NET每次都会把整个页面提交到服务器，每次都要刷新页面,哪怕是一个很小的操作.比较烦人.那么有没有一种方法可以在执行操作的时候不刷新页面呢,答案是肯定的.我们就用现在比较流行的AJAX所使用的原理来实现执行页面操作而不刷新页面.

下面是一个例子,这个例子运行效果是这样的,页面上有一个文本框和一个BUTTON,当在文本框中输入内容,然后电击BUTTON的时候,执行后台的操作,用弹出式对话框返回结果.

1.建立一个JScript文件:MyRequest.js

   function PostRequest(url,data)
{
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 xmlhttp.Open("POST",url,false);
 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 xmlhttp.send(data);
 return xmlhttp.responseText;
}
function GetRequest(url)
{
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 xmlhttp.Open("GET",url,false);
 xmlhttp.send();
 return xmlhttp.responseText;
} 
//提交客户端DataStore数据
//url--目的URL
//datastr--要提交的DataStore XML字符串
//action--页面的Action代码
function Execute(url,action,data,method)
{
    var result = "";
 var acturl = (url == "#" ? window.location.href:url);
 var tg = "RequestData";
 if (acturl.indexOf("?") > 0)
  {acturl = acturl + "&IsExec=True&RequestAction=" + action;}
 else
  {acturl = acturl + "?IsExec=True&RequestAction=" + action;}
 if (method == "POST")
     {result = PostRequest(acturl,tg+"="+data);}
 else
  {result = GetRequest(acturl+"&"+tg+"="+data);}
  
 return new ExecuteResult(result,url,action,data,method);
}
 

//调用一个URL，Post DataStore,返回一个DataStore对象

Execute.Get=function(action)
{ var ds = _GetSubmitDs(arguments,1);
 return Execute("#",action,ds,"GET");
}
Execute.Post=function(action)
{ var ds = _GetSubmitDs(arguments,1);
 return Execute("#",action,ds,"POST");
}
Execute.GetUrl=function(url,action)
{ var ds = _GetSubmitDs(arguments,2);
 return Execute(url,action,ds,"GET");
}
Execute.PostUrl=function(url,action)
{ var ds = _GetSubmitDs(arguments,2);
 return Execute(url,action,ds,"POST");
}
function ExecuteResult(rtndata,url,action,data,method)
{
    this.ResponseData = rtndata;
    this.ExecuteUrl = url;
    this.ExecuteAction = action;
    this.RequestData = data;
    this.RequestType = method;
}
function _GetSubmitDs(params,from)
{ 
 var ret="";
 var count = params.length;
 if(count>from)
  for(var i=from;i<count;i++)
  { 
      ret +="|"+params[i];
  }
 return ret;
}

2.要调用JS的ASPX页面的编码

   2.1 首先在要调用的aspx页面加入对JS文件的引用(注释符号中间的代码)

  <!--<SCRIPT language="JScript" src="/Meteor/js/MyRequest.js"></SCRIPT>-->

   2.2 然后指定在页面最顶端被<%%>符号括起来的代码中加入codePage=“936“

   这里介绍以下CodePage 

CodePage：可读/可写。整型。定义用于在浏览器中显示页内容的代码页。代码页是字符集的数字值，不同的语言使用不同的代码页。例如，ANSI代码页为1252，日文代码页为932，简体中文代码页为936。一般情况下，当你上传到国外网页空间，或者提取数据库记录等出现乱码时，就采用这种方法解决。

  2.3 在ASPX页面放两个HTML控件

        一个INPUT输入框id=txt_input

        和一个BUTTON   id =btn_Sub,onclick = “DoPost();“

 2.4 在次页面定义一个被BUTTON调用的JS函数

      function DoPost() 

    {

         var txt = document.all("txt_input").value;

         var ret = Execute.Post("post",txt); alert(ret.ResponseData);

    }

3.ASPX.cs后台代码

   private string  requestData ;

   private string  requestAction ;

   private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   if(requestAction == "post")
   {

    Response.Write("执行成功了哈哈："+this.requestData);
    Response.End();
   }
   
  }
  private void GetRequest()//此方法在OnInit方法中调用
  {
   requestData = Request.Form["RequestData"];
   requestAction = Request.QueryString["RequestAction"];
  }