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控件。


目录
相关文章
|
开发框架 前端开发 JavaScript
Ajax之一 简介篇(上)
Ajax之一 简介篇
56 0
|
2月前
|
XML JSON 前端开发
jQuery - AJAX 简介
jQuery - AJAX 简介
14 0
|
2月前
|
XML JSON 前端开发
jQuery - AJAX 简介
jQuery - AJAX 简介
10 0
|
XML 前端开发 JavaScript
|
XML 前端开发 JavaScript
ajax简介(异步与同步)|学习笔记
快速学习ajax简介(异步与同步)
104 0
|
XML JSON 前端开发
前端 JS 之 AJAX 简介及使用
AJAX 是一个缩写,它的全名是 Asynchronous JavaScript and XML,意思就是异步 JavaScript 和 XML,即用JavaScript执行异步网络请求
179 0
前端 JS 之 AJAX 简介及使用
|
XML 前端开发 JavaScript
ajax简介(异步与同步)|学习笔记
快速学习ajax简介(异步与同步)
|
XML 存储 JSON
JSON格式和Ajax简介
JSON格式和Ajax简介
177 0
|
XML 前端开发 JavaScript
ajax简介(异步与同步)|学习笔记
快速学习ajax简介(异步与同步)
|
前端开发 关系型数据库
ADF_ADF Faces系列2_使用JSF开发基于Ajax的用户界面:ADF Faces富客户端组件简介(Part2)
2013-05-01 Created By BaoXinjian 一、摘要 待整理 待整理 待整理 待整理 待整理 待整理 Thanks and Regards ERP技术讨论群: 288307890 技术交流,技术讨论,欢迎加入 Technology Blog Create...
747 0