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 serviceasmx文件,这里我们给web service取得名字是SampleService,所以生成的名字是SampleService.asmx,在浏览器里我们看到的样子是这样的
ajax-1-3.JPG

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

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

None.gif [WebService(Namespace  =   " http://tempuri.org/ " )]
None.gif[WebServiceBinding(ConformsTo 
=  WsiProfiles.BasicProfile1_1)]
ExpandedBlockStart.gif
public   class  SampleService : System.Web.Services.WebService  {
ExpandedSubBlockStart.gif    
public SampleService () {
InBlock.gif        
//Uncomment the following line if using designed components 
InBlock.gif        
//InitializeComponent(); 
ExpandedSubBlockEnd.gif
    }

InBlock.gif    [WebMethod]
ExpandedSubBlockStart.gif    
public string SayHello(string name) {
InBlock.gif        
return "Hello "+name;
ExpandedSubBlockEnd.gif    }

InBlock.gif    
ExpandedBlockEnd.gif}

None.gif

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

None.gif [WebService(Namespace  =   " http://tempuri.org/ " )]
None.gif[WebServiceBinding(ConformsTo 
=  WsiProfiles.BasicProfile1_1)]
None.gif[System.Web.Script.Services.ScriptService ()]
ExpandedBlockStart.gif
public   class  SampleService : System.Web.Services.WebService  {
ExpandedSubBlockStart.gif    
public SampleService () {
InBlock.gif        
//Uncomment the following line if using designed components 
InBlock.gif        
//InitializeComponent(); 
ExpandedSubBlockEnd.gif
    }

InBlock.gif    [WebMethod]
ExpandedSubBlockStart.gif    
public string SayHello(string name) {
InBlock.gif        
return "Hello "+name;
ExpandedSubBlockEnd.gif    }

InBlock.gif    
ExpandedBlockEnd.gif}

None.gif

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

ajax-1-5.JPG

 

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

 

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

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

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


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

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

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

InBlock.gif
InBlock.gif
function OnComplete(arg)
ExpandedSubBlockStart.gif
{
InBlock.gif    document.getElementById(
"Text2").innerText=arg;
ExpandedSubBlockEnd.gif}

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

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

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

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

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

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

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

my blog


本文转自 lu xu 博客园博客,原文链接: http://www.cnblogs.com/dotLive/archive/2007/03/11/670690.html   ,如需转载请自行联系原作者
相关文章
|
26天前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
13 0
|
4月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
32 0
|
4月前
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
470 0
|
1月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
52 1
|
1月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
15 0
|
1月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
13 1
|
1月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
22 1
|
2月前
|
前端开发 PHP 数据安全/隐私保护
【PHP学习】—利用ajax原理实现密码修改功能(九)
【PHP学习】—利用ajax原理实现密码修改功能(九)
|
2月前
|
前端开发 JavaScript PHP
【PHP学习】—利用ajax原理实现登录功能(八)
【PHP学习】—利用ajax原理实现登录功能(八)
|
3月前
|
开发框架 前端开发 .NET
用ajax和asp.net实现智能搜索功能
用ajax和asp.net实现智能搜索功能
32 0