本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> Jquery_Ajax_Javascript
立即购买视频教程 揭开AJAX神秘的面纱(AJAX个人学习笔记)
夜鹰教程网 来源:www.yyjcw.com 日期:2016-10-28 13:49:16
写这个学习笔记,只是记载一下自己的学习经过和体会,把一些学习重点记录下来,以备今后的巩固复习及应用,很多知识点没有详细介绍,所以并不完全适用于初学者,如果你是初学者,最好选择一本AJAX学习的书籍,然后与这篇学习笔记对照学习,效果会更好。

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



AJAX技术是多种计算机技术的结晶,它的名称来自:Asynchronism(异步)、JavaScript、And、XML这4个单词首字母,即异步JavaScript请求处理XML技术。简单的描述就是数据异步传输网页局部刷新的技术。AJAX很流行,WEB程序设计中如果不应用AJAX技术,可以说是不完善的设计。就好象黑白电视机与彩电一样,AJAX就是后者,是一种技术更新的革命!
本人学习AJAX时间并不长,仅10余天,不能说百分之百掌握,但也有所领悟。现在把自己的学习经过和体会写下来,与君共分享。
一、学习经过:
AJAX技术的文章和书籍很多,视频也不少,可以说是近两年最热的技术。但大多书籍介绍的全而不细,或是重点不突出,给人一种云山雾罩的感觉!这其中不乏清华大学等知名教授写的书。本人就有此方面的亲身体会,我先是下载了传智播客ajax视频教程,看了几节就看不下去了,后来又买了一本AJAX技术的书,很厚的一本60元人民币。也是天很热,耐心看了八天实在看不下去了,感觉AJAX技术很深奥,无法真正领会,就放弃了,去登山、游泳、下海、和美眉聊天、游戏,过起较为靡烂的幸福生活。后来,天气凉爽了,闲暇之余又想起AJAX这件事,于是就买来几瓶冰镇啤酒,几袋小食品,一袋瓜子,在家里边看边饮,好生自在!没有想到的是,这一看却是一通百通,AJAX技术就这样在一天时间里掌握了,而且还有自己对AJAX技术的独到领悟:AJAX应用很简单,完全可以不用编码或少量编码。
二、学习体会及重点
学习应用的语言和工具软件:本人是自学C#语言的,所以开发环境是NET框架下(ASP.NET),开发工具采用VS2008(VS2005也可以)。
学习重点:
AJAX控件的安装,特别是AJAX Control Toolkit部分的安装,详见我的博客日志,有较为详细的介绍,这里就不多说了,唯一提醒的是:VS2008和VS2005在AJAX控件安装和使用上有点区别,但不大!
1、AJAX控件5个基本控件的介绍
这是微软所提供的AJAX最基本的五大控件,也是最实用的。使用它,你完全可以不用编写任何代码,只是简单的设置一下相关属性,就可以实现AJAX异步数据更新的效果。这是让学习AJAX技术的人最为心动的,是一种傻瓜式的应用,效果不错。如果你想在以前编写的程序中应用AJAX技术,用这五大基本控件,可以在十几分钟内搞定。下面具体介绍一下:
(1)ScriptManager是脚本管理器,负责管理页面中的Ajax控件的有关脚本资源。在一个Web页面中只能有一个ScriptManager,在任何情况下使用ASP.NET Ajax控件必须在页面中添加一个ScriptManager。(这个控件一般不需设置,如果想了解具体属和和事件,可以查找有关资料。)
ScriptManager控件的前台代码形式如下所示:


复制代码 代码如下:
<asp:ScriptManager ID="asm1" runat=” server” >
<AuthenticationService Path="" />
<ProfileService LoadProperties="" Path="" />
<Scripts>
<asp:ScriptReference />
</Scripts>
<Services>
<asp:ServiceReference Path="" />
</Services>
</asp:ScriptManager>

下面重点介绍一下容易出错的一些属性和方法:
1、ScriptMode属性:指定发送模式。一个枚举属性,四个值:Auto、Debug、Release、Inherit。
Auto:默认值。即根据Web.config中retail配置节的值来决定发送脚本的模式。如果retail节点值为true,即将发布模式的脚本发送至客户端,否则发送调试版本。
Debug:当retail属性值为false时,ScriptManager控件将Debug版本的脚本发送至客户端。
Release:当retail属性值为false时,ScriptManager控件将Release版本的脚本发送至客户端。
Inherit:与Auto用法相同,但一般不用。
2、Services属性:用以指定当前页面所引用的WEB服务,使用<asp:ServiceReference>节点可以注册WEB服务,ScritpManage控件将为每一个注册的Web服务生成客户端代理。
(2)ScriptManagerProxy是ScriptManager的扩展,是专门为使用了母版页或用户控件的工程中使用的脚本管理器。当工程页面中已使用了ScriptManager,那么在母版页或用户控件中就可以使用一个ScriptManagerProxy来代理ScripManager的工作。属性上基本与ScriptManager控件一样。
(3)UpdatePanel是使用最广泛的Ajax控件,在页面中嵌入UpdatePanel,就可以实现页面的局部刷新。页面中可以有多个UpdatePanel,UpdataPanel之间也可以相互嵌套。(应用重点)
Updatapanel就是实现页面局部刷新的控件,UpdatePanel控件的前台代码如下所示:
复制代码 代码如下:
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate> //模板
内容模板 放置内容的区域
</ContentTemplate>
<Triggers> //设置提交服务器的方式:异步或同步
<asp:AsyncPostBackTrigger ControlID="" EventName="" /> //指设置异步模式及controlID(引发更新的控件ID)和EventName(引发更新事件名称)
<asp:PostBackTrigger ControlID="" /> //指同步模式,一般不设置这个,可以不写这行代码,因为ajax实现的就是异步更新,同步就失去了意义!
</Triggers>
</asp:UpdatePanel>

重要属性和事件:
ChildrenAsTriggers:当UpdateMode属性值为Conditional时,设定UpdatePanel中的子控件的异步请求服务器是否会引起UpdatePanel的更新。
RenderMode:表示UpdatePanel解释至前台HTML代码样式,默认值为Block即解释为<div></div>,当该属性设置为Inline时,UpdatePanel被解释为<span></span>
Triggers:设定触发当前UpdatePanel更新的控件和事件。(这个是重点)
UpdateMode:设定当前UpdatePancl的更新模式:Always和Conditional。当设定为Always时,UpdatePanel不管当前是否存在Trigger都会更新。当设定为Conditional时,只有当前UpdatePancl设定了Trigger或ChildTrigger时,当前UpdatePanel控件才会更新或提交页面,或者当服务器端调用Update()方法时才会更新UpdatePanel.
需要特别说明的属性和事件:
Trigger属性:指示当前UpdatePanel使用的提交服务器方式,有同步提交或异步提交两种。同步提交只需要指定触发提交的控件ID,同步提交将会提交整个页面。异步提交需要设定触发异步提交的控件ID和服务器端的事件。
页面中多个UpdatePanel共存:当页面上有多个UpdatePanel共存时,需要设定页面上所有的UpdatePanel控件的UpdateMode属性为Conditional,否则只要任何一个UpdatePanel局部更新被触发,将会更新所有页面上的UpdatePanel。原因很简单,页面上所有的UpdatePanel控件的UpdateMode默认为Always。
多个UpdatePanel的嵌套使用:当多个UpdatePanel控件嵌套使用时,处于并列的UpdatePanel更新时互不影响。但当两个UpdatePanel相互嵌套时,处于内层的UpdatePanel局部更新时并不会影响到处层的UpdatePanel,但是外层的UpdatePanel局部更新时会更新所有嵌套在它内部的UpdatePanel。
(4)顾名思义UpdateProgress执行的是页面局部刷新过程中的工作。UpdateProgress可以提供一个刷新过程中用户状态的友好信息,如向客户提示“正在加载数据”等。
UpdateProgress控件前台代码非常简单,如下所示:
复制代码 代码如下:
<asp:UpdateProgress runat="server" ID="upg1">
<ProgressTemplate> //模板
<div alige=”ecnter” style=”width:1100px”> //以下代码是显示的信息或图片部分
<img src=”image/loading.gif” align=middle />
</div>
</ProgressTemplate>
</asp:UpdateProgress>

重点属性:
AssociatedUpdatePanelID:设定触发UpdateProgress的UpdatePanel的ID,一般用于页面中具有多个UpdatePanel的情况。
DisplayAfter:进度信息显示多少毫秒数。
DynamicLayout:布尔值属性,设定当前UpdateProgress是否动态绘制,而不是直接解释在前台。

(5)在WinForm的开发中,很多程序员都被Timer控件的功能所倾倒。Timer控件可以定期的触发一些事件,比如提交整个页面或刷新部分页面等。
Timer控件的定义相当简单,只需声明控件即可,代码如下所示:
<asp:Timer runat="server" ID="timer1" Interval="1000" OnTick="timer1_Tick"></asp:Timer>
重点属性:
Enabled:是否启动Timer控件,并触发Tick事件。
Interval:Timer控件触发Tick事件的间隔事件,单位ms.
Tick:Timer控件在设定Enabled属性为true时,每隔Interval属性限定的时间执行事件。
提示:一般把Timer控件放置在UpdatePanel之处,不然局部更新时又会重新设置间隔时间。前台代码:
复制代码 代码如下:
<asp:ScriptManager ID=”ScriptManagel” runat=”server”></asp:ScriptManager>
<asp:Timer ID=”Timer1” runat=”server” onTick=”Timer1_Tick” Interval=”1000” >
</asp:Timer>
<asp:UpdatePanel runat="server" ID="udp1">
<ContentTemplate>
内容模板 放置内容的区域
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>

2、AJAX基本原理及案例代码
AJAX技术:我的理解就是JavaScritp前后台参数传递的技术,这里参数可以是参数值或数据流。学习AJAX基本原理,有助于对AJAX扩展控件的应用,是不会缺少的一部分。
下面列举两个AJAX最常用的方式,以便学习者体会AJAX应用原理。如初学者对部分代码不能理解,可以查找相关命令及资料!
应用方式一:
在日常的ASP.NET Ajax实现中,这种方式是最简单的、最常用的开发方式。这种方式典型的实现步骤如下所示:
创建XMLHttpRequest对象,请求特定的Ajax处理页面。
Ajax处理页面在Page_Load事件中,接收XMLHttpRequest对象的异步请求。
Ajax处理页面根据请求内容,做出相应的回应,回应可以采用this.Response.Write或this.Response.OutPutStream将响应文本或响应的XML Document放入Response对象的方式。
前台JavaScript脚本通过XMLHttpRequest对象的responseText或responseXml来接收服务器回应,并动态修改页面内容,从而实现Ajax异步无刷新应用。

本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/20063.htm

复制链接 网友评论 收藏本文 关闭此页
上一条: ajax 开发守则 10条说明  下一条: Ajax Control Toolkit 34个服务器端控件…
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
ajax 清除缓存的两种方法
js日历控件点击日期显示在文本框中…
HTML、JS与FLASH 之间的静态传值方…
主题:ajax请求JSP,为什么GET就是…
javascript 改变iframe(框架)的方…
javascript取鼠标当前坐标
推荐一款网页软键盘 很漂亮的哦
ajax session过期问题的几个解决方…
js文字间隔停顿向上滚动效果
ajax 服务器文本框自动填值
js技术技巧收藏(200例)---1
ajax 数据库中随机读取5条数据动态…
主题:这是否是个捷径?Ajax利用S…
揭开AJAX神秘的面纱(AJAX个人学习…
常用的JS后台导航菜单
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
js处理键盘事件(keydown event)…
Web前端技术疑点难点汇总
Asp.Net Core2.0允许跨域请求设置…
XMLHttpRequest请求中的跨域问题
原生js节点的操作 创建、添加、移…
VUE2.0组件:父组件子组件之间值的…
JavaScript是世界上最流行的脚本语…
js正则表达式表单验证详解
js正则表达式大全
详细且实用的JS正则表达式大全
EcmaScript5中扩展了叫bind的方法…
attachEvent和addEventListener的…
addEventListener的使用方式
通过构造器的方式来创建函数
为什么需要addEventListener
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3