大众计算机学习网

专门提供各种电脑教程

最最简单的不用任何组件的Asp.net+Ajax无刷新实例

Admin | 2009-2-24 15:09:03 | 被阅次数 | 5852

  昨天中午,俺认识一个高手,他的QQ昵称是“Leo”,至于他的QQ号码,未经许可,不便透露。

  俺之前很想学习Ajax无刷新技术,但,始终都是望而却步,以为很难!

  之前,俺也曾经使用过VS2005自带的一个无刷新技术控件(叫什么名称忘记了)进行练习,但是呢,该控件,死板得狠,大凡将控件放入其内,均可实现无刷新,貌似非常方便;其方便之处也可以说就在这里了,但是,却非常死板,任何欲使用无刷新的地方,都必须使用该控件;不仅如此,如果你一不小心,将这个控件弄到别的地方或者删除了,那么,页面将会变得一塌糊涂;此外,还需要在配置文件web.config添加引用,在Bin目录里面放它的DLL控件等等,一切的一切,方便倒是有了,遗憾的是,没有任何灵活性,不利于新手学习无刷新技术。

  为此,俺抛弃了自带的这个控件,开始步入了亲手编写无刷新代码的征途;

  几经琢磨,不得要领;长时间自学,还是对无刷新技术望而却步;幸好,昨天深得高人相助,终于弄明白了无刷新技术到底怎么一回事情。

  下面,俺将最简单的无刷新技术与大家分享;

  注意,下面我所说的这无刷新技术,不要任何组件,只要您的VS2005能够正常运行,条件就满足了。

  下面我们就一起来学习一下“Hello World”世界上最为简单的无刷新技术。

  ①无刷新技术所需要的文件

  1、.aspx文件一个(本例的为:Default.aspx)

  2、.js文件一个(本例的为:HelloWorld.js)

  3、.ashx文件一个(本例的为:HelloWorld.ashx)

  就这样拉,只需要三个文件,就能实现无刷新了;

  注意,JS文件和ASPX文件,可以合并成为一个文件,但是,本例为了方便大家从结果上来理解,因此,俺特意分解为两个单独的文件;此外,ashx文件,是一个后台文件;平时,我们创建一个ASPX文件时,都会自带一个CS文件,前者为前台文件,后者为后台文件;而ashx文件,没有前台文件,它相当于一个后台文件,主要用来接收无刷新技术的请求,并响应请求结果的。

  ②文件的建立

  以下的这三个文件,最好都放在同一级目录下。

  1、建立.aspx文件

  下面,通过您的VS2005,创建一个Default.aspx文件,在该文件内,只需要一个控件:

  控件:

  //onclick="CallServer()"该代码用来调用JS文件里面的CallServer()函数,以实现无刷新;

  2、建立.js文件

  文件名称可取为与本例相同,如HelloWorld.js,记住,该文件可以通过VS2005直接创建;

  文件代码如下:

  // JScript 文件
var xmlHttp= false
try
{
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
  try
  {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch(e2)
  {
    xmlHttp = false;
    }
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined')
{
  xmlHttp = new XMLHttpRequest();
}

function OnMessageBack()
{
   //判断请求状态及HTTP状态是否都能满足条件

  if (xmlhttp .readystate==4 && xmlhttp .status==200)

  {
    //将返回的文本打印到页面上
    document .write (xmlhttp .responsetext);

   }
}

function CallServer()
{
  var url ="HelloWorld.ashx"
  xmlHttp.open("GET", url, false);
  xmlHttp.onreadystatechange = UpdatePage;
  xmlHttp.send(null); 
}

function UpdatePage()
{
  if (xmlHttp.readyState < 4)
  {
  }
  if (xmlHttp.readyState == 4)
  {
    var response = xmlHttp.responseText
    alert(response)
 }
}

  3、建立.ashx文件

  如:HelloWorld.ashx,通过VS2005可创建。

  代码非常简单,如下:

using System;
using System.Web;

public class HelloWorldr : IHttpHandler
{
    public void ProcessRequest (HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        context.Response.Write("大众计算机学习网欢迎您");
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

  ④程序的运行

  以上文件建立好了之后,现在我们来看一下如何运行这些文件;

  首先在Default.aspx文件的头部,添加JS文件的引入,如:

  

  这样做的目的是:让这个控件能找到CallServer()函数。

  到这里,就全部结束了,是不是,很简单的,当您运行网站的时候,就会看到如下图的无刷新效果

  下面我们来总结一下,其运行的顺序;在Default.aspx页面中,只有一个在客户端运行的按钮,当我们点击它的时候,就会执行JS文件中的CallServer()函数,该函数对服务器端的HelloWorld.ashx文件进行请求;

  接收到请求的服务器端的HelloWorld.ashx文件,所做的事情就是最为简单的事情,那就是向客户端输出信息:

  context.Response.ContentType = "text/plain";
        context.Response.Write("大众计算机学习网欢迎您");

  最后,收到响应信息的客户端的JS文件,所要做的事情就是,将字符通过对话框显示出来:

  var response = xmlHttp.responseText
  alert(response)

  没了,本文到这里就说完了;本文虽然非常简单,但是对于新手理解无刷新技术,尤其是在不需要任何组件、第三方软件的时候,尤为重要。希望本文对您有所帮助。