Ajax之一 简介篇(下)

简介: Ajax之一 简介篇(下)

1.3 Asp.Net AJAX的组成原理

   Ajax实际上是JavaScript、CSS、DOM、XmlHttpRequest四种技术的集合体,其中,XmlHttpRequest是Ajax技术的核心对象,可以说,正是通过它实现了以异步方式获取服务器数据;DOM是文档对象模型,通过Dom,我们可以方便地定位一个Html/Xml文档任意部分并执行相关操作。


   Ajax的基本原理为:XmlHttpRequst从服务器(数据服务器或Web服务器)获取数据到客户端的内存中,然后JavaScript根据实际需要对这些资源进行处理,并通过CSS和DOM实现界面布局呈现给浏览器,如下图所示:



1.4 Asp.Net AJAX页面的生命周期

      图1-7说明了ASP.Net AJAX的基本结构。使用AJAX的网页可以持续地跟服务器交换数据,而标准的网页则需要由两个步骤(一个是请求,另一个是响应)来完成这个工作。Asp.Net AJAX对通信的双方都有帮助。客户端脚本库(比如由ScriptManager控件动态读入的那一些,你很快就会看到相关的内容了)不仅能够帮助浏览器与Web服务器之间进行通信,而且还能使客户端编程更加简单。Asp.Net AJAX服务器端程序集不仅接收和处理XMLHttpRequest调用,而且还实现了一些方便使用的服务器端控件。因此,程序员不必花大力气就可以让客户端与服务器端交换数据了。

在第一次请求某个使用了Asp.Net AJAX的页面时(图1-7的一步和第二步),Asp.Net AJAX客户端框架(图1-7客户端组件中最下面的那一层)就会从服务器发送到浏览器上。此后从该AJAX应用程序的同一个页面向服务器发送的请求就可以做成能够返回文本或Xml的Http请求了(图1-7中的第三步和第四步)。Asp.Net页面可以使用整页回发或异步请求这两种方式来完成不同的任务。


项目一:建立没有AJAX的简单的Asp.Net页面

首先建立一个没有使用AJAX功能的简单页面,该页面只需要一个标签控件和一个服务器端按钮控件。页面图1-8所示:

点击按钮页面上的按钮后会显示当前计算机日期和时间


按钮的代码如下:


this.Label1.Text=DateTime.Now.ToString();


在单击按钮之前,页面的代码如程序清单1-1所示。


程序清单1-1 没有使用AJAX页面的输出

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" >
<head><title>
       先不使用Ajax~ ~
</title></head>
<body>
   <form name="form1" method="post"action="Default.aspx" id="form1">
<div>
<input type="hidden"name="__VIEWSTATE" id="__VIEWSTATE"value="/wEPDwUKLTE2MjY5MTY1NWRkKfm6OIMZfbs+3tpO9GBopfjT6KU=" />
</div>
<div>
       <inputtype="hidden" name="__EVENTVALIDATION"id="__EVENTVALIDATION"value="/wEWAgKE3ZiMDQKM54rGBlokgLCFwQ87mkrenlsqIGO+FMV/" />
</div>
   <div>
       <span id="Label1"style="display:inline-block;width:234px;">Label</span><br/>
       <input type="submit" name="Button1" value="不使用Ajax,获取日期和时间"id="Button1" /></div>
   </form>
</body>
</html>

      这段代码没有什么可以解释的,它有几个ViewState和传送回Default.apsx页面的普通窗体。终端用户单击页面上的按钮时,会执行服务器回传的完整过程,重新处理整个页面,并返回给客户的浏览器。


项目二:建立没有AJAX的简单的Asp.Net页面

      1.在项目一的基础上,需要添加两个服务器控件:一个是标签控件Label2,一个是按钮控件Button2。除此之外,还需要添加两个Asp.Net AJAX控件。


      从Visual Studio 2005的工具箱的AJAX Extensio选项卡上,把一个ScriptManager服务器控件添加到页面的顶部;另外添加一个UpdatePanel控件,在UpdatePanel中包含第二个标签控件和按钮控件。


UpdatePanel控件是一个模板服务器控件,允许在其中包含任意多项(与其他Asp.Net 模板服务器控件一样)。


建立好的页面如图1-9所示:

按钮二的单击事件代码为:

Label2.Text=DateTime.Now.ToString();

1.      在运行程序后,查看页面源码,会看到元素会被下面的代码替换掉(那些URL在系统中可能会有所不同)。

<scriptsrc="/1-2/WebResource.axd?d=fOO_tIUYLZr0MQe-ihoh8w2&amp;t=633869615980000000"type="text/javascript"></script>
<scriptsrc="/1-2/ScriptResource.axd?d=Ysmd6E17nA_vGxCDNUyY9K0gWQte7RXhxn4gtGSEVxCAmqJc6AuQI_z6wyjQ4dhukF3hI8QkjBsfpSLMbjanHM43_GvFMX58f9j5k7cYojg1&amp;t=634051109080000000"type="text/javascript"></script>
<script src="/1-2/ScriptResource.axd?d=Ysmd6E17nA_vGxCDNUyY9K0gWQte7RXhxn4gtGSEVxCAmqJc6AuQI_z6wyjQ4dhukF3hI8QkjBsfpSLMbjanHKMNeNF_n2zX19hbq55X-OWMm6W9r4fna9Gax_LKmJkf0&amp;t=634051109080000000"type="text/javascript"></script>

      Asp.Net AJAX生成了一些用来初始化Ajax框架某些部分的JavaScript代码。


      ScriptManager控件必须放在任何一个要使用Asp.Net AJAX的页面上。


   


2.      运行效果:如果单击Button1,进行整个页面的会送,就会在响应中得到这些代码,后退按钮会变绿;如果单击Button2,则会部分刷新页面,后退按钮不会刷新,仍然为灰色。



@        本章总结


1.      本章介绍了Asp.Net AJAX,解释了它与Ajax以及Asp.Net 2.0之间的关系。


2.      指导如何安装相关Ajax软件和添加类库集。


3.      编写了一个使用Ajax的web应用程序,并学习了两个关键服务器控件ScriptManager控件和UpdatePanel控件。


目录
相关文章
|
8月前
|
开发框架 前端开发 JavaScript
Ajax之一 简介篇(上)
Ajax之一 简介篇
38 0
|
10天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 允许网页仅更新部分内容,无需完全重载,它是异步JavaScript和XML技术的结合,加速了动态网页的交互。通过后台数据交换,实现页面的即时更新,如微博、Google地图等应用皆有运用。
|
14天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX**是异步JavaScript和XML的缩写,它让网页能无需整体刷新即可更新部分内容。通过后台数据交换,实现动态、快速的用户体验。在不全载页面的情况下,AJAX可实现局部更新,常见应用如微博、地图和社交网络。在传统网页中,内容更新需完全重载页面。
|
18天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 是异步JavaScript和XML的组合,用于无需全面刷新页面即可动态更新内容的技术。它实现网页局部更新,提升用户体验,常用于微博、地图应用等。例如,Google地图允许平滑缩放和拖动,而不需重新加载页面,这就是AJAX的应用。
|
1天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX**是异步JavaScript和XML技术,用于创建快速动态网页,无需完全刷新页面即可更新内容。通过后台数据交换实现局部更新,常见于应用如微博、Google地图。传统网页必须整体重载来显示新内容。
|
24天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 是异步JavaScript和XML的缩写,它实现了网页局部更新,无需整体刷新。通过后台数据交换,AJAX创建快速动态页面,常见应用如微博、Google地图和社交平台。传统网页更新需完整重载。
|
30天前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 是异步JavaScript和XML技术,用于不完全刷新页面而更新内容。它实现网页动态交互,允许后台数据交换,常见于如新浪微博、Google地图等应用中,提升用户体验。
|
1月前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX**是异步JavaScript和XML的组合,用于不完全刷新页面而更新内容的技术。它实现动态、快速的网页交互,比如在Google地图和微博中看到的无缝滚动和定位更新。传统网页需整体重载,而AJAX则仅交换少量数据实现局部刷新,提升了用户体验。
|
1月前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 是一种利用 JavaScript 和 XML 实现网页局部更新的技术,无需完全刷新页面。它促成异步数据交换,让像微博、Google 地图这样的应用能动态更新内容,提升用户体验。在传统网页中,内容更新需加载整个页面。
|
1月前
|
XML 前端开发 JavaScript
AJAX 简介
**AJAX** 是异步JavaScript和XML技术,用于不刷新整页而更新网页内容。它后台交换少量数据实现异步更新,常见于如微博、Google地图等应用中。