asp.net ajax的学习第一篇

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

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

 

由于工作的原因,要在自己的网页上使用无刷新技术,增加客户体验。开始学习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.gifContractedBlock.gif
public class SampleService : System.Web.Services.WebService dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif    
public SampleService () dot.gif{
InBlock.gif        
//Uncomment the following line if using designed components 
InBlock.gif        
//InitializeComponent(); 
ExpandedSubBlockEnd.gif
    }

InBlock.gif    [WebMethod]
ExpandedSubBlockStart.gifContractedSubBlock.gif    
public string SayHello(string name) dot.gif{
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.gifContractedBlock.gif
public class SampleService : System.Web.Services.WebService dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif    
public SampleService () dot.gif{
InBlock.gif        
//Uncomment the following line if using designed components 
InBlock.gif        
//InitializeComponent(); 
ExpandedSubBlockEnd.gif
    }

InBlock.gif    [WebMethod]
ExpandedSubBlockStart.gifContractedSubBlock.gif    
public string SayHello(string name) dot.gif{
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.gifContractedBlock.gif<%dot.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.gifContractedBlock.gif
<script language="javascript" type="text/javascript">dot.gif
InBlock.gif
// <!CDATA[
InBlock.gif

ExpandedSubBlockStart.gifContractedSubBlock.gif
function Button1_onclick() dot.gif{
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.gifContractedSubBlock.gif
dot.gif{
InBlock.gif    document.getElementById(
"Text2").innerText=arg;
ExpandedSubBlockEnd.gif}

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

InBlock.gif
InBlock.gif
function OnError(arg)
ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.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的视频讲座里找到的,我按照自己的记忆重新写的,可能有点不同,不过核心思想是一样的。例子下载

转载于:https://www.cnblogs.com/dotLive/archive/2007/03/11/670690.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/447960.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

insertSelective 和 insert 的区别

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1、selective的意思是&#xff1a;选择性。 2、insertSelective--选择性保存数据&#xff1b; 比如User里面有三个字段:id&#xff0c;n…

病从口入 这样吃小心癌症找上门

肿瘤专家估计&#xff0c;大约有35%的致癌物质是经过饮食&#xff0c;30%是经过吸烟侵入体内的。仅此两项已经占了致癌因素入侵人体的一半以上了。所以说&#xff0c;预防肿瘤&#xff0c;饮食首当其冲&#xff0c;第一步就要从入口的食物谈起。 食管癌&#xff1a;腌制的咸…

VUE插件总结

UI组件 element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 …

解决:No goals have been specified for this build. You must specify a valid lifecycle phase or a goal i

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 执行打包命令报错&#xff1a; No goals have been specified for this build. You must specify a valid lifecycle phase or a goa…

十个好习惯帮你理财省大钱

理财和收入高低其实是没有关系的&#xff0c;仅和生活习惯相关。有了好的理财方法&#xff0c;也可以攒下自己的钱&#xff0c;达到财务自由的境界。下面是一些理财的技巧? 1、定时积极的存款 怎样开源节流是理财的第一步。增加收入来源&#xff0c;算好该存的钱&#xff0…

生成随机码,保存随机文件.

PrivateFunction GetRandomizeNo()Function GetRandomizeNo() As Integer 功能说明:生成随机验证码 Dim RandomizeNo As Integer Randomize() RandomizeNo 9999 * Rnd() 1000 If (RandomizeNo).ToString.Length > 5 Then R…

解决:org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) ...

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题&#xff0c;即在mybatis中dao接口与mapper配置…

真实股市房市信托本质,金融故事三则:钱都去哪儿了?

什么叫做虚拟经济、泡沫经济、次贷危机、金融危机?看完本文这几个简短精辟故事&#xff0c;你就都知道了。 故事&#xff08;1&#xff09; 有一个商人到了一个山村&#xff0c;村子周围的山上全是猴子。 商人就和村子种地的农民说&#xff0c;我买猴子&#xff0c;100元一只…

Mac 远程命令工具

转载于:https://www.cnblogs.com/BrightMoon/p/4479375.html

Springboot Mybatis 整合(完整版)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 正题 本项目使用的环境&#xff1a; 开发工具&#xff1a;Intellij IDEA 2017.1.3 springboot: 1.5.6 jdk&#xff1a;1.8.0_161 maven…

OpenCL 第5课:向量相加

OpenCL程序分为两个部份&#xff0c;一部份是内核代码&#xff0c;负责具体算法。另一部份是主程序负责初始化OpenCL和准备数据。主程序加载内核代码&#xff0c;并按照即定方法进行运算。 内核代码可以写在主程序里面&#xff0c;也可以写在另一个文本文件里&#xff0c;有点…

同名的const 成员函数

如下代码&#xff1a;struct Derived{ void foo(string) { cout<<"ddd foo"<<endl; }; void foo(string) const { cout<<"ddd foo const"<<endl; };}; int _tmain(int argc, TCH…

springboot 中使用 Mybatis 注解 配置 详解

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 传参方式 使用不同的传参方式&#xff1a; 使用Param 之前博文中的项目使用了这种简单的传参方式&#xff1a; Insert("INSERT IN…

mongodb数据库的备份与恢复

先介绍下命令语法&#xff1a; ./mongodump -h 127.0.0.1:10001 -d lietou -o /usr/local/data -h&#xff1a;MongDB所在服务器地址&#xff0c;例如&#xff1a;127.0.0.1&#xff0c;当然也可以指定端口号&#xff1a;127.0.0.1:10001 -d&#xff1a;需要备份的数据库实例…

OpenCL 第6课:矩阵转置

上一节我们写了个一维向量相加的程序。这节我们来看一个44矩阵转置程序。 4X4矩阵我们采用二维数组进行存储&#xff0c;在程序设计上&#xff0c;我们让转置过程分4次转置完成&#xff0c;就是一次转一行。注意这里的OpenCL的工作维数是二维。&#xff08;当然用一维的方式也…

springboot 系列技术教程目录

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一、教程目录地址&#xff1a; springboot系列技术教程目录 二、教程内容&#xff1a; springboot2.X系列&#xff1a; springboot整…

OpenCL 第7课:旋转变换(1)

旋转是一个常用的处理功能。图片中所有的点以某一个点为轴&#xff0c;顺时或逆时方向旋转N个角度。我们利用OpenCL就可以对图片中所有的点进行并行转换&#xff0c;大大提高效率。 上两节中&#xff0c;我们编写了CL文件来传递数组的地址&#xff0c;这一节中我们会多加入几个…

WinForms多线程编程之摇奖程序

利用多线程模拟一个电脑摇奖程序&#xff0c;如图所示。在点击【滚动号码】&#xff0c;启动线程&#xff0c;对后台的电话号码进行循环显示&#xff1b;点击【开奖】按钮&#xff0c;关闭线程&#xff0c;此时显示在文本框中的电话号码即为中奖号码 using System;using System…

idea 版本控制忽略文件、文件夹设置

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 setting 中&#xff1a; 或者底部的 设置 忽略某个文件 后面选择框可以去选择 忽略某个文件夹 后面选择框可以去选择 忽略某种文件 后面…

Windows Azure HandBook (1) IaaS相关技术

《Windows Azure Platform 系列文章目录》 1.Microsoft Azure底层是否由System Center和Hyper-V构成? Microsoft Azure虽然支持Hyper-V的VHD直接上传至Azure云端进行管理&#xff0c;但是Azure底层技术是微软自己研发的、独有的技术&#xff0c;且不对外提供。如果客户想构建属…