手机版

Ajax学习笔记——三种Ajax实现方法[推荐]

时间:2021-11-01 来源:互联网 编辑:宝哥软件园 浏览:

Ajax :异步JavaScript和xml、异步js脚本和Xml经常被用来实现本地页面的异步刷新,这对提升用户体验有很大帮助。Xml在多语言语言中有优势,但Ajax技术实际上是用Json对象代替XML来处理数据。

(一)Ajax的历史.去理解知识。

Ajax属于Web前端开发技术,与javascript关系密切。Ajax是一种实现异步通信而不刷新的技术,这种技术可以通过多种方式实现。浏览器鼻祖网景最早发明了LiveScript脚本语言,以丰富网页元素的表达形式。使网页呈现动态效果。JavaScript语言是在所有后续的修订和升级之后诞生的。同时,微软也看到了互联网的前景,开始涉足互联网行业,推出了JScript语言。不幸的是,它不像JavaScript那样成熟,发展缓慢。最终,微软在互联网上的决心促成了微软对NS漫长而曲折的收购过程.

这里,动态超文本标记语言将javascript放在Dom树的元素节点中,为元素提供动态显示行为。

(Web前端开发的两个思路:a . JavaScript XHR CSS b . Flash-browser插件Flex(Adobe);Silverlight4.0(微软)

1.Ajax:以微软的XHR(XMLHttpRequest)为核心——Ajax。

2.Flash :微媒体-由Adobe - flex收购(涵盖了ActionScript和富互联网应用的结合)。

3.微软为对抗flex推出的SilverLight: SilverLight。

备注:

为了在后台与服务器异步通信,微软在IE中增加了两个组件:负责与服务器通信的:(xmlHTTPRequest)和XML处理组件。使用XML作为数据交换的载体在多语言处理方面具有优势,但XML的处理成本较高。事实上,在Ajax中,Json对象通常用于在客户端浏览器和服务器之间传输数据。

网页生成过程实际上是由服务器端的一组程序完成的,所以为了在客户端的JS语言和服务器端的C#语言之间传输数据,Net提供了Json序列化器和反序列化器来提供服务器端C#对象和Json对象之间的转换,而在浏览器端,可以使用eval()函数来获取从服务器传输的Json字符串,并将其转换为Json对象。

(Ajax解决了哪些问题?

众所周知,当客户端向服务器请求页面时,服务器首先动态计算并生成页面,然后将其发送给客户端。客户端浏览器按顺序编译和显示页面。

在没有Ajax的情况下,如果页面有用户认证控件,当客户端浏览器呈现用户认证控件时,会等待服务器的认证结果,然后页面元素收到结果后可以继续呈现。在此身份验证过程中,通常会执行读取数据库等操作,这称为同步模式。但是,这种模式会导致网页呈现假死状态。

使用Ajax后,也是一个验证控件。在客户端提交验证请求后,它将继续按顺序呈现其他元素。获得验证结果后,javascript修改内存中的DOM对象并呈现给用户(注意:只修改内存中的DOM对象,客户端接收到的页面文件不做修改)。这样,使用异步模式,就不会有假死,客户端也节省了等待服务器返回结果时的时间开销。

(4) Ajax实现(对于3中的Ajax实现,需要说明的是: Ajax能够达到的效果,可以通过WebService来实现。).

1.js中的Ajax异步调用: a.new b.onreadystatechange(处理responseText) c.open(获取模式和发布模式)d.send(同步调用3360 a . new . open(获取模式和发布模式)c.send d.responseText)。

//ajax.html

!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title Ajax of JAVAScript jQuery/title/head dya href=' JAVAScript 3360 getdata();'JavaScript-Ajax : Click me/ABR/br/br/input id=' BTN ' type=' button ' value=' jQuery-Ajax 3360 Clike me '/HR/div id=' show '/div脚本类型=' text/JavaScript '函数getData(){//创建XMLHttpRequest通信对象var xhrif(窗口. ActiveXObject) { //标准情况下,只能有两个客户端报表对象处理通信过程xhr=新的activexoobject('微软.XMLHTTP’);}elseif(窗口. XMLHttpRequest){ xhr=new XMLHttpRequest();}else {thrownew Error('此浏览器不支持Ajax’);} var elem=文档。getelementbyid(' show ');//用来显示处理结果//使用状态改变时事件处理结果xhr。onreadystatechange=function(){ if(xhr。readyState==4){//readyState表示服务器响应状态。4: 响应接收完毕if (xhr.status==200) { //status表示超文本传送协议(超文本传输协议的缩写)请求的状态xhr.responseText//从请求中回应中获得数据串var obj=eval('(' JSON ')');//借助评价评价将数据串转化为对象,在客户端浏览器必须解析为射流研究…对象艾伦。innerhtml=' span ' obj。名称'/span ';}}}//通过打开设置请求方式xhr.open('get ',' json.ashx ',true);//默认为真的假的表示同步方式//发送请求xhr。发送(null);/* 同步方式,假的表示不适用异步方式xhr.open('get ',' json.ashx ',false);xhr。发送(null);//处理结果警报(xhr。response text);*/}/script script src=' http : jquery-1。4 .2 .js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){//ready函数,脚本加载完即执行,也可以用$(.$('#btn ').点击.)();加载$('#btn ').单击(函数showData() { //按钮上添加单击事件事件,事件处理方法为show data()$(“# show”).load(' jquery。ashx’);//从jquery.ashx中获取数据元素(innerHTML的内容), 并显示在差异中});});/脚本/正文/html然后还需要在项目中,添加类似于json.ashx一般处理程序,用于提供相关数据(如: 表格日历的绘制,去数据库验证等操作)

//json.ashx

%@ WebHandler语言=' c# ' Class=' Json ' %使用系统使用系统Webpublic类Json : IHttpHandler { public void process request(HttpContext context){ context .响应。内容类型='文本/纯文本;//对于静态内容,需要禁用浏览器的缓存,否则老是旧结果语境。响应。缓存。设置缓存能力. NoCache);字符串名称='迈克字符串JSonformat=' { \ ' name ' : \ ' { 0 } \ ' } ';//{{、}}是为了避免和数据中的{冲突而采用的特殊转义符字符串json=字符串。格式(jsonFormat,名称);语境。响应。输出。写入(JSON);} public bool IsReuse { get { return false;}}}//jquery.ashx

%@ WebHandler语言=' c# ' Class=' jquery ' %使用系统使用系统Webpublic类jquery : IHttpHandler { public void process request(HttpContext context){ context .响应。内容类型='文本/纯文本;语境。响应。缓存。设置缓存能力. NoCache);现在日期时间=日期时间。现在;字符串jquery format=' span { 0 }/span ';字符串jquery=字符串。格式(jqueryFormat,现在);语境回应。write(jquery);} public bool IsReuse { get { return false;}}}2.1 使用AjaxPro2:

a.添加AjaxPro2类库(AjaxPro2.dll)网络配置中添加配置文件c.在应用程序代码中创建类库文件(cs文件)提供埃阿斯服务,并在页面对应的后台铯文件中注册Ajax(页面加载事件中d .在应用程序代码中的类库文件(cs文件中)编写带有埃阿斯标签的处理方法e.在前台的文件文件中使用脚本处理结果(修改内存中的数字正射影像图对象)并显示在页面上

//b.webconfig中添加配置文件

位置路径=' aja xpro '系统。webhttphandlersadd动词='* '路径='* '。ashx' type='AjaxPro .AjaxHandlerFactory,AjaxPro.2'//httpHandlers!-如果您需要在登录页面上运行Ajax。网专业方法,您可能需要在此启用您自己的授权配置。- !- authorizationdeny users='?//授权-/system.web/location//c .在应用程序代码中创建类库文件(cs文件)提供埃阿斯服务,并在页面对应的后台铯文件中注册Ajax(页面加载事件中)

//default.aspx.cs文件

受保护的无效页面_加载(对象发送方,EventArgs e){AjaxPro .实用程序。RegisterTypeForAjax(类型为(日历服务));//AjaxPro会根据注册的类型自动生成脚本}//d .在应用程序代码中的类库文件(cs文件中)编写带有埃阿斯标签的处理方法

//日历服务。铯

使用系统;使用系统。集合。通用;使用系统Linq .使用系统Webpublic类日历服务{[AJaxpro .AjaxMethod]publicbool save(字符串日期、字符串平铺、字符串详细信息){系统.线程。线程。睡眠(5000);//用来测试异步returntrue//这里为简单,直接返回true}}//e .在前台的文件文件中使用脚本处理结果(修改内存中的数字正射影像图对象)并显示在页面上

//default.aspx文件

% @ Page Language=' c# ' AutoEventWireup=' true ' CodeFile=' Default。aspx。cs ' Inherits=' _ Default ' %!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title/head dyform id=' form 1 ' runat=' server ' div日期:输入id=' date '类型=' text '/br/标题:输入id=' title ' type=' text '/br/详情: textarer id=' detail ' cols=' 80 ' row=' 5 '/textarehr/input id=' BTN ' type=' button ' value='确定//div脚本src=' http : jquery-1。4 .2 .js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ $(' # BTN ')).单击(函数(){var date=$('#date ')).val();var title=$('#title ').val();var detail=$('#detail ').val();//由马上结贴生成的射流研究…代理,很像C#中类库的使用,其中功能(结果)是异步的结果处理方法CalendarServices.save(日期、标题、详细信息、函数(结果){if (result.error!=null) { //服务器上出现异常警报(结果。错误。消息);}if (result.value) { //服务器铯文件中的方法返回永真警报('服务器返回"真的!");}});});});/script/div/form/body/html2.2 .以前使用的老板Ajax(维护老项目可能用到,其实与第2种很类似): a .引用埃阿斯框架类库b. webconfig中添加配置c.在应用程序代码中添加埃阿斯服务类,并在特许测量员文件中注册Ajax(页面加载事件中d .在应用程序代码中的特许测量员文件中带埃阿斯标签的处理方法e.按钮绑定触发射流研究…的方法联合材料处理方法

//a .引用埃阿斯框架的类库Ajax.dll

//b. webconfig添加配置

httpHandlersadd动词='开机自检,获取'路径='ajax/* .ashx' type='Ajax .PageHandlerFactory,Ajax'//httpHandlers//c .在特许测量员文件中注册Ajax(页面加载事件中)

Ajax .效用。RegisterTypeForJax(类型为(SysBase _ UserEdIt));//SysBase_UserEdit是页面文件名称//d .在应用程序代码中的特许测量员文件中带埃阿斯标签的处理方法

[Ajax .Ajax方法]公共数据集getRoleData(int Roleid){ DataSet ds=new DataSet();ds=r.SelectRoleData(字符串。格式('和id={0} ',Roleid));返回ds;}//e .按钮绑定触发射流研究…的方法

这个“DDLRole”。属性。添加(' ' onpropertychange ',' oncminputpropertychange();');//在页面加载事件中基于属性为按钮绑定方法,在文件文件中手动添加也可以//f. JS处理方法

脚本函数onCommandInputPropertyChange(){ if(事件。属性名==' value '){ var cmdInput=event。加速;if (cmdInput.value!=0){//alert(cmdinput。值);BindRoleName(cmdinput。值);} } } //绑定角色名函数BindRoleName(RoLeid){//SysBase _ UserEdIt是文件页面的名称SysBase _ UserEdIt。GetRoleDate(RoleID,get _ all name);}函数get_AllName(响应){ var all name=document。getelementbyid(' DDLAjax ');所有名字。长度=0;if (response.value!=null){ var ds=响应。价值;if(ds!=null类型的(ds)==' object '){ var name=ds .表[0]。行[0]。rolenamevar id=ds .表[0]。行[0]。id;AllName.options.add(新选项(名称,id));} } } /script3 .VS2008集成的Ajax:

a.VS2005的话需要安装插件(微软ASP。NET 2.0 AJAX扩展b)紧挨着形式元素放置控件控件c.在要刷新的桌子元素首位处,使用更新区域和ContentTemplate包起来d.在桌子元素结尾处的内容模板和更新区域之间放置引发元素,注册埃阿斯触发按钮e.引用类库Ajax2 f.VS2005需要配置配置文件

//d .在桌子元素结尾处的内容模板和更新区域之间放置引发元素,注册埃阿斯触发按钮(搜索,删除均为按钮)

triggersap : asynncpostback触发器控件id=' aspnetpage 1 '/ASP : asyncpostback触发器控件ID=' BTN _搜索'/ASP : asyncpostback触发器控件ID=' BTN _删除'/触发器//f . vs . 2005需要配置配置文件

httpHandlers!-调用AjaxPro.2 -添加动词='开机自检,获取'路径='ajaxpro/* .ashx' type='AjaxPro .' AjaxHandlerFactory,AjaxPro.2 '移除动词='* '路径='* '。asmx'/add动词='* '路径='* '。asmx " validate=" false " type=" System .系统脚本处理工厂网络。扩展,版本=1.0.61025.0,区域性=中性,公钥标记=31bf 3856 ad 364 e 35 '/add verb=' * ' path=' * _ app service。axd ' validate=' false ' type=' System .系统脚本处理工厂网络。扩展,版本=1.0.61025.0,区域性=中性,公钥标记=31bf 3856 ad 364 e 35 '/add动词='GET,HEAD '路径='ScriptResource.axd '类型='系统.系统网络。扩展,版本=1.0.61025.0,区域性=中性,公钥标记=31bf 3856 ad 364 e 35 ' validate=' false '//httpHandlers=========================================================================分割线============================

关于第一种: Js中的埃阿斯异步调用,补充点东东,不单独开篇了

关于参数传递:

1 .获取方式传参,参数保存在统一资源定位器中,例如:

xhr.open('get ',' json.ashx?name=xxx ',true);xhr。发送(null);

在服务端(json.ashx后台代码), 可以用上下文对象类型的参数对象语境来获取,获取方式语境。请求。查询字符串['name'].等等(自己在调试状态下看)

2 .员额方式传参,参数保存在请求包的包体(正文)中,例如:

xhr.open('post ',' json.ashx ',true);xhr。发送(' XXX ');

或者xhr。发送('名称=XXX ');

相应的服务器端(json.ashx后台代码), 针对2中'非键值对'、'键值对'有两种获取方法:

非键值对: 用语境。请求输入流。获取,如:

系统。流流=上下文请求。输入流系统。流阅读器sr=新系统。流阅读器;string strParam=Sr . ReadToEnd();

其中涉及编码转换的,自己在调整下。

键值对: 用语境。请求。表单['名称].获取

以上这篇埃阿斯学习笔记- 3种埃阿斯的实现方法【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

版权声明:Ajax学习笔记——三种Ajax实现方法[推荐]是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。