asp.net ajax的学习第一篇

自己理解的asp.net ajax的核心思想： javascript 调用web service

 

由于工作的原因，要在自己的网页上使用无刷新技术，增加客户体验。开始学习asp.net ajax，到了asp.net ajax的大本营(ajax.asp.net)找了些视频看,给我的最初印象是：asp.net ajax实现无刷新就是利用javascript调用web service。（刚开始学习ajax的知识，可能会火星一下，请高手们见谅）

 

大家做网站网页开发的人都知道，javascript是在客户端执行的，执行的时候页面不会postback信息到服务端，在页面上修改呈现信息时，浏览器也不会整体刷新页面，而只是根据javascript的操作来修改一个页面上其中一个地方的内容，比如把text框里的文本修改一下。而asp.net ajax也利用了这一点，实现了页面无刷新的功能，那页面又如何能把需要服务器端进行操作的结果反馈到本地呢？ Asp.net ajax的方法是使用javascript调用服务器端的web service。

 

我还是比较喜欢用一个例子来加以说明，这样比较清晰明了。

开发环境：windows xp sp2+visual studio2005 sp1+asp.net ajax

安装asp.net ajax 只要到ajax.asp.net上下载一个安装文档安装一下就可以了，不需要什么配置。

1.       安装完asp.net ajax后，打开visual studio,新建web site,可以看到下面的图像
ajax-1-1.JPG

在模板中我们可以发现多了一个叫做ASP.NET AJAX-Enabled Web Site的模板，我们选择这个模板新建一个web site,使用这个模板建的网站，跟普通建站模板的区别是在web.config里，大家有兴趣可以研究一下这个config文件，这样我们可以手工建一个支持asp.net ajax的网站了。

首先我们给这个网站新建一个web service，如图：

ajax-1-2.JPG

建完这个web serivce，我们在浏览器里运行web service的asmx文件，这里我们给web service取得名字是SampleService，所以生成的名字是SampleService.asmx，在浏览器里我们看到的样子是这样的
ajax-1-3.JPG

这是一个标准的web service的asmx页面，可以用来测试一下我们建的web service里提供的SayHello函数，这时我们如果在地址后面加上一个/js 就可以看到下面的错误页面
ajax-1-4.JPG

现在我们回过头来看web service的.cs文件，我们看到web service的类是这么写的：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class SampleService : System.Web.Services.WebService {
    public SampleService () {
        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }
    [WebMethod]
    public string SayHello(string name) {
        return "Hello "+name;
    }
    
}

接着我们在这个类申明上加上一句：[System.Web.Script.Services.ScriptService ()]，变成下面的代码：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService ()]
public class SampleService : System.Web.Services.WebService {
    public SampleService () {
        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }
    [WebMethod]
    public string SayHello(string name) {
        return "Hello "+name;
    }
    
}

重新编译一下网站，这时候我们再浏览这个.asmx文件并在后面加上/js,就会看到如下情况：

ajax-1-5.JPG

 

它会让你下载一个js文件，保存这个文件，并用记事本打开它，可以看到js调用web service的代码：）

 

接着我们打开default.aspx这时候在页面上已经存在一个asp.net ajax使用必须的ScriptManager控件（如果没有就手工添加一个，哈哈），我们在页面上放置两个input text和一个input button (这些是标准的html控件)并给ScriptManger控件添加一些代码：

     <asp:ScriptManager ID="ScriptManager1" runat="server" >
            <Services>
                <asp:ServiceReference Path="SampleService.asmx" />
            </Services>
        </asp:ScriptManager>

这里指定了客户端需要调用web service的页面.


接着给button控件增加一个客户端的click事件，最后完成全部代码是这样的：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[

function Button1_onclick() {
    ret=SampleService.SayHello(document.getElementById ("Text1").value,OnComplete,OnTimeOut,OnError);
    return(true);
}

function OnComplete(arg)
{
    document.getElementById("Text2").innerText=arg;
}

function OnTimeOut(arg)
{
    alert("TimeOut raise when calling SayHello.");
}

function OnError(arg)
{
    alert("Error raise when calling SayHello.");
}

// ]]>
</script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" >
            <Services>
                <asp:ServiceReference Path="SampleService.asmx" />
            </Services>
        </asp:ScriptManager>
        <div>
            <br />
            <br />
            <input id="Text1" style="width: 200px" type="text" />
            <br />
            <input id="Button1" style="width: 205px" type="button" value="Say Hello" onclick="return Button1_onclick()" /><br />
            <input id="Text2" style="width: 317px" type="text" />
        </div>
    </form>
</body>
</html>

这里注意一下button1的Button1_onclick()事件的实现。

可以看出，针对defaul.aspx页面，我们这里全部使用了客户端代码，但调用到了服务端的执行代码和返回结果，从而实现了页面无刷新的修改，这应该就是asp.net ajax的核心思想了吧！！

这个例子可以在ajax.asp.net的视频讲座里找到的，我按照自己的记忆重新写的，可能有点不同，不过核心思想是一样的。例子下载

路漫漫其修远兮 吾将上下而求索

posted @ 2007-03-11 00:25 .Live 阅读(1505) 评论(10)  编辑 收藏 网摘

  回复  引用  查看    
#1楼 2007-03-11 14:19 | 惘思      
写得不错,期待后面的文章!
  回复  引用  查看    
#2楼 [楼主]2007-03-11 19:53 | .Live      
http://mail.163.com/ :"超快速度 创新Ajax技术, 同等网络环境下, 页面响应时间最高减少90％"
只是不知道网易统计的得准确不准确
[r]
  回复  引用    
#3楼 2007-03-11 22:11 | 所心所欲 [未注册用户]
看了有了新的体会 谢谢了

  回复  引用  查看    
#4楼 2007-03-19 17:09 | OK_008      
听说现在ajax比较火呀！


  回复  引用  查看    
#5楼 2007-03-22 16:16 | 菜菜陈熙尚      
function Button1_onclick() {
ret=SampleService.SayHello(document.getElementById ("Text1").value,OnComplete,OnTimeOut,OnError);
return(true);
}
怎么我的ret是显示undefined,
这里的ret不是返回值吗？
  回复  引用  查看    
#6楼 [楼主]2007-03-22 17:15 | .Live      
@菜菜陈熙尚
你是自己从头写的，还是直接运行我的例子？

  回复  引用  查看    
#7楼 2007-03-22 17:42 | 菜菜陈熙尚      
是直接运行你的~
alert(ret);
把ret打出来，就是undefined
  回复  引用  查看    
#8楼 [楼主]2007-03-23 12:15 | .Live      
@菜菜陈熙尚
那个ret不是返回值，，SampleService.SayHello的范围值，其实是付值给function OnComplete(arg)的参数 arg了，所以arg才是返回值，
那个ret没有意义，删除也是可以的，谢谢。
  回复  引用    
#9楼 2008-07-18 01:47 | Georgecheung [未注册用户]
个人觉得，ajax第一步肯定是要用到xmlHttpRequest，
没有用到xmlHttpRequest,怎么称之为ajax?

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

闪存

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
"五向定位"职业成长路线公开课(上海、南京、大连)
Google站内搜索


相关链接:

最新IT新闻:
微软发布Silverlight 2 向开源社区示好
金融危机下 IT产业人人自危
微软中国研发集团2009财年校园招聘启动
Silverlight 2正式版SDK可以下载了
IBM扩大研究规模 在上海成立研究院