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()；

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