ScriptManager的作用,这个不言而喻,它是整个的ASP.NET AJAX的核心
创建一个名为SimpleAjaxService.asmx的WebService,代码如下
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
///SimpleAjaxService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class SimpleAjaxService : System.Web.Services.WebService
{
Random random = new Random(DateTime.Now.Millisecond);
[WebMethod]
public string GetRandomString(int min, int max, string prefix)
{
return prefix + random.Next(min, max);
}
}
在页面中引入这个WebService,有两种方法,
一种是在页面添加ScriptManager,Load事件中添加如下代码
ServiceReference serviceRef = new ServiceReference("SimpleAjaxService.asmx");
ScriptManager.GetCurrent(this).Services.Add(serviceRef);
另外一种方式是,在前台代码中添加如下代码
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Demo10/SimpleAjaxService.asmx" />
</Services>
</asp:ScriptManager>
在页面中添加如下代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScriptModeAndPath.aspx.cs" Inherits="Demo10_ScriptModeAndPath" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function getRandomString() {
SimpleAjaxService.GetRandomString(0, 100, "Hello_", onSucceeded);
}
function onSucceeded(result) {
alert(result);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/Demo10/SimpleAjaxService.asmx" />
</Services>
</asp:ScriptManager>
<input type="button" value="Get Random String" onclick="getRandomString()" />
</form>
</body>
</html>
这里不用多解释,前面有一讲“客户端调用WebService”已经讲的很多啦
这时,我们在使用HttpWatch观察它加载的内容的时候,就会发现有很多带着注释和格式的js代码,因为这时,我们的项目是在debug模式下运行的,
我们做如下修改
在web.config中找到system.web节点下的compilation,设置其<compilation debug="false">,这样我们的项目就出于一个发布模式,我们再次刷新页面,观察它引入的脚本文件,就是没有格式和代码注释,并且经过混淆的代码,对比引入文件的大小,回发下在发布模式下引入的代码小了很多很多,
还有一种方式,就是改变页面中的ScriptManager的ScriptMode,区别就是在web.config中配置,它是全局的,在页面中的ScriptManager设置,它是局限于当前页面的,ScriptManager默认是Auto,等于web.config中的配置
在ScriptManager中,除了可以引入Service,还可以引入Scripts,方式如下
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release">
<Services>
<asp:ServiceReference Path="~/Demo10/SimpleAjaxService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/Demo10/SomeScript.js" />
</Scripts>
</asp:ScriptManager>
除了可以引入js文件,我们还可以引入程序集中的Resource,方式如下
<asp:ScriptReference Name="Menu.js" Assembly="System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" ScriptMode="Debug" />
这,需要提供它的两个属性,资源名和一个完整的命名
SriptManager还可以配置一个ScriptPath,可以配置一个目录,系统将会把这个路径当作一个基础路径去寻找js文件
创建一个名为TimeConsumingScript.ashx的一般处理程序
using System;
using System.Web;
using System.Threading;
public class TimeConsumingScript : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.Write("// script code here");
Thread.Sleep(2000);
}
public bool IsReusable
{
get
{
return false;
}
}
}
然后创建一个aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoadScriptBeforeUI.aspx.cs" Inherits="Demo10_LoadScriptBeforeUI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
var startLoading = new Date();//页面开始加载的时间
function pageLoad() {
alert("Page loaded in " + (new Date() - startLoading) + " ms");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Demo10/TimeConsumingScript.ashx" />
</Scripts>
</asp:ScriptManager>
UI Loaded in
<script language="javascript" type="text/javascript">
document.write(new Date() - startLoading);//当前时间减去开始加载的事件
</script>
ms.
</form>
</body>
</html>
我们发现,页面上显示了我们加载页面使用了两秒多一点的事件,因为我们在那个一般处理程序中,线程停止了两秒钟
我们对ScriptManager做如下处理
<asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="false">
<Scripts>
<asp:ScriptReference Path="~/Demo10/TimeConsumingScript.ashx" />
</Scripts>
</asp:ScriptManager>
我们把他的LoadScriptBeforeUI设置为false,再刷新页面,发现页面中显示的加载时间显示的很少,这时我们打开页面源代码,可以看到,脚本被加载到了页面代码的尾部,在form结束之前,同时我们看到,windows.onload事件,仍然是在页面全部加载完以后才被调用的
注意:如果我们在设计的时候,用户会在页面刚接在的时候,做一些操作,会调用我们加载的Script,则如果我们设置了LoadScriptBeforeUI设置为false,则会产生一些错误