ASP.NET AJAX 学习笔记〈一〉

最新推荐文章于 2024-10-11 17:39:47 发布

anxia2039

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量113

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/x1incn/archive/2009/01/12/1373923.html

版权

AJAX 简单介绍:

AJAX是由JavaScript、XML、CSS、DOM等技术组成,其中XMLHttpRequest对象是AJAX的核心,该对象由JavaScript创建,负责在后台以异步的方式让客户端与服务器交互.

代码演示:

Default.aspx <head>部分:

< script type = " text/javascript " >
     var xmlHttp;

     function checkUsername() {
         var username = document.getElementById( " txtUsername " ).value;
        xmlHttp = getXMLHttpObject();
         // 指明服务器端响应后的回调函数.
        xmlHttp.onreadystatechange = callBack_CheckUsername;
         // 连接到服务器端.
        xmlHttp.open( " get " , " CheckUsername.aspx?username= " + username, true );
         // 发送请求.
        xmlHttp.send( null );
    }

     // 根据浏览器的不同创建xmlHttp对象.
     function getXMLHttpObject() {
         try {
            xmlHttp = new XMLHttpRequest();
        }
         catch (e) {
             try {
                xmlHttp = new ActiveXObject( " Msxml2.XMLHTTP " );
            }
             catch (e) {
                xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );
            }
        }
         return xmlHttp;
    }

     function callBack_CheckUsername() {
         // 状态为4即服务器端成功返回.
         if (xmlHttp.readyState == 4 ) {
             var checkResult = document.getElementById( " checkResult " );
             // responseText为服务器端返回的字符串.
            checkResult.innerHTML = xmlHttp.responseText == " true " ? "" : " Please choose another name. " ;
        }
    }
< / script>

<body>部分:

< input id ="txtUsername" type ="text" onblur ="checkUsername()" />
< div id ="checkResult" ></ div >

CheckUsername.aspx.cs :

protected void Page_Load( object sender, EventArgs e)
{
    Response.Clear();
    Response.Write(Request.QueryString[ " username " ] == " admin " ? " false " : " true " );
    Response.End();
}

结果预览:

AJAX技术给用户带来了流畅友好的体验,同时发现以上JS代码实现起来比较麻烦.
如何来简化这些操作,其实我们可以使用ASP.NET AJAX框架,或者说直接在客户端就能调用服务器页面方法.

ASP.NET AJAX 框架简单介绍:

ASP.NET AJAX可分为Microsoft AJAX Library(客户端部分),AJAX Extensions AJAX Control Toolkit(服务器端部分)两个部分.
Microsoft AJAX Library: 它包括类似于ASP.NET服务器端控件一样良好封装,可运用于各种主流浏览器之上的客户端组件.
AJAX Extensions,包括由开发者社区共同创建的AJAX Control Toolkit,则是ASP.NET服务器端组件的扩展.

代码演示:

分别以WebService、PageMethods两种方式调用服务器端方法.

WebService方式:

SayHelloService.asmx:

using System.Web.Services;

namespace AJAXExercise
{
    [WebService(Namespace = " http://tempuri.org/ " )]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem( false )]
    [System.Web.Script.Services.ScriptService]
     public class SayHelloService : System.Web.Services.WebService
    {

        [WebMethod]
         public string SayHello( string name)
        {
             return " Hello " + name;
        }
    }
    //类和方法上面的ScriptService、WebMethod是客户端访问到该WebService所必需的.
}

Default.aspx <body>部分:

ScriptManager控件是ASP.NET AJAX的核心,用来将ASP.NET AJAX框架所需要的JavaScript文件、自定义的ASP.NET AJAX客户端组件以及该页面将要调用的Web Service的客户端代理发送到客户端.
<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="JScript.js" />
    </Scripts>
    <Services>
        <asp:ServiceReference Path="SayHelloService.asmx" />
    </Services>
</asp:ScriptManager>
<input id="txtName" type="text" />
<input type="button" value="Say Hello" onclick="sayHello()" />
<div id="show"></div>

JScript.js:

function sayHello() {
    /*
        别忘了前面的命名空间,我这里的是AJAXExercise.
        通过ASP.NET AJAX框架,可以使用$get("")来代替document.getElementById("")
        SayHello传递的第1个参数是name,第2个参数是指明服务器端成功返回后的回调函数.还
        可以指明第3个参数即失败后要调用的回调函数.
    */
    AJAXExercise.SayHelloService.SayHello($get( " txtName " ).value, succeeded);
}

function succeeded(result) {
    $get( " show " ).innerHTML = result;
}

PageMethods方式:
Default.aspx <body>部分

注意EnablePageMethods属性需要设置为true.
< asp:ScriptManager ID ="ScriptManager1" runat ="server" EnablePageMethods ="True" />
< input id ="txtUsername" type ="text" />
< input type ="button" value ="Say Hello" onclick ="sayHello()" />
< div id ="show" ></ div >

Default.aspx <head>部分

< script type = " text/javascript " >
     function sayHello() {
        PageMethods.SayHello($get( " txtName " ).value, succeeded);
    }
     function succeeded(result) {
        $get("show").innerHTML = result;
    }
< / script>

Default.aspx.cs :

protected void Page_Load( object sender, EventArgs e)
{

}

[System.Web.Services.WebMethod]
//该方法必须为static.
public static string SayHello( string name)
{
return " Hello " + name;
}

两种方式,结果预览: