`
akakori
  • 浏览: 12941 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

[转]ASP.NET Ajax编程技术学习

 
阅读更多

转自博客园

前言:从现在开始我们学习ASP.NET AJAX Ajax 技术现在应用非常广泛,只要我们上的一些大型网站,都用到了这个技术, AJAX 最终解释的意思是:实现网页的无刷新效果,使网页显示出更美好的页面,使用户体验能够最好。 

1. 什么是AJAX

(1) AJAX ”Asynchronous JavaScript and XML”中文的意思就是:异步JavaScript XML ,指一种创建交互式网页应用程序的网页开发技术。 Ajax 并非缩写词,而是由 Jesse James Guiett 创造的名词

(2) 不是指一种单一的技术,而是有机的利用了一系列相关的技术: web 标准 (Standards-Based Presention)+XHTML+CSS 的表示。

 1) 使用 Dom(Document Object Model) 进行动态显示及交互。

 2) 使用 XML XSLT 进行数据交互及相关操作。

 3) 使用 XMLHttpRequest 进行异步数据查询,检索。

(3) 简单理解为: JavaScript+XMLHttpRequest+CSS+ 服务器端的集合。

2. 普通网页请求回执过程( 请求响应模式 )

3. Ajax Web Application Model

4. Ajax优点

(1) AJAX的本质是一个浏览器端的提示信息。

(2) AJAX技术之主要目的在于局部交换客户端及服务器间的数据。

(3) 这个技术的主角是 XMLHttpRequest 的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的 Refresh without Reload( 轻刷新 )

(4) 与服务器之间的沟通,完全是通过 JavaScript 来实现的。

(5) 使用 XMLHttpRequest 本身传送的数据量很小,所以反应会很快,也就是让网络程序更像一个桌面应用程序。

(6) Ajax就是运用 JavaScript 在后台悄悄帮你去跟服务器要资料,最后再有 JavaScript 或者 Dom 来帮你呈现结果,因为所有动作都是由 JavaScript 代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦。

5. XMLHttpRequest

(1) Ajax应用程序的中心就是它。

(2) XMLHttpRequest对象在 IE 浏览器和非 IE 浏览器中创建的方法不同。

(3) 简而言之,它可以异步从服务器端读取 txt 或者 xml 数据。

(4)  IE 和非 IE 中的创建方法是:

//根据不同的浏览器使用响应的方式来创建异步对象 

复制代码
 1
 function
 createXmlHttp() {

 2
 
 3
     xhobj = false
;

 4
 
 5
     try
 {

 6
 
 7
         xhobj = new
 ActiveXObject("Msxml2.XMLHTTP"); //
 iemsxml3.0+ 

 8
 
 9
     } catch
 (e) {

10
 
11
         try
 {

12
 
13
             xhobj = new
 ActiveXObject("Microsoft.XMLHTTP"); //
iemsxml2.6 

14
 
15
         } catch
 (e2) {

16
 
17
             xhobj = false
;

18
 
19
         }

20
 
21
     }

22
 
23
     if
 (!xhobj && typeof
 XMLHttpRequest != 'undefined') {//
 Firefox, Opera 8.0+, Safari,谷歌浏览器 

24
 
25
         xhobj = new
 XMLHttpRequest();

26
 
27
     }

28
 
29
     return
 xhobj;

30
 
31
 }
复制代码

6. 创建XMLHttpRequest 对象

(1) 同步使用 XMLHttpRequest 对象

按照下面的模式可以同步XMLHttpRequest 对象

 1) 创建对象;—— new (叫一个助手过来)

 2) 创建请求;—— open( 告诉他要去做的事情 )

 3) 发送请求;—— send (让其去干某一件事)

(2) 添加一个 WebForm 页面,命名为 FirstAjaxForFun.aspx, 再添加一个一般处理程序 FirstAjaxForFun.ashx ,在 aspx 中写入如下代码:

 

复制代码
 1
   <title>Ajax页面实现无刷新</title>
 2
 
 3
     <script src="
common/common.js
"
 type="
text/javascript
"
></script>
 4
 
 5
     <script type="
text/javascript
"
>
 6
 
 7
         function GetDate() {

 8
 
 9
             var
 xhr = false
;

10
 
11
             //
1.创建异步对象

12
 
13
             xhr = createXmlHttp();

14
 
15
             //
2.设置请求参数

16
 
17
             xhr.open("
GET
"
, "
FirstAjaxForFun.ashx
"
, true
);

18
 
19
             //
3.设置回调函数(这个回调函数主要用来检测服务器是否将数据发送给异步对象的)

20
 
21
             xhr.onreadystatechange = function () {

22
 
23
                 //
获得服务器响应的数据

24
 
25
                 //
alert(xhr.readystate);

26
 
27
                 //
当服务器已经将数据发回到浏览器了,如果返回的响应报文状态码为200,才代表服务器运行正确。

28
 
29
                 if
 (xhr.readystate == 4
) {

30
 
31
                     if
 (xhr.status == 200
) {

32
 
33
                         gel("
MyDiv
"
).innerHTML = xhr.responseText;

34
 
35
                         //
document.getElementById("MyDiv").innerHTML = xhr.responseText;

36
 
37
                     }

38
 
39
                     else
 {

40
 
41
                         alert("
系统繁忙..请联系管理员
"
);

42
 
43
                     }   }  }

44
 
45
             //
异步对象发送请求

46
 
47
             xhr.send(null
);

48
 
49
         }

50
 
51
     </script>
52
 
53
     <input type="
button
"
 value="
GetDate()
"
 onclick="
GetDate()
"
 />
54
 
55
     <div id="
MyDiv
"
></div>
56
 
57
 在.ashx里面写入如下代码:

58
 
59
    System.Threading.Thread.Sleep(2000
);

60
 
61
    int
 a=0
;

62
 
63
    int
 c = 1
 / a;

64
 
65
    context.Response.Write("
<h1>Hello World
"
 + DateTime.Now + "
</h1>
"
);
复制代码

(3) 先来创建 XMLHttpRequest 对象

 1)  IE,FireFox,Safari Opera 中创建该对象的 JavaScript 对象

   var xhr=new XMLHttpRequest();

 2) 在IE5/6中的代码为:

var xmlRequest=new ActiveXObject("Microsoft.XmlHttp");

(4) XMLHttpRequest对象的方法

方法

说明

abort

取消请求

open

需要使用多个参数,第一个设置方法属性,第二个设置目标URL ,第三个设置同步 (false) 还是异步 (true) 发送请求

send

发送请求到服务器

setRequestHeader

添加自定义Http 头到请求

getAllResponseHeader

获取Http 响应头的整个列表

getResponseHeader

仅获取指定的Http 响应头

 (5) 为XMLHttpRequest对象设置请求参数

  1)设置参数(Get方式)

xhr.open("GET", "FirstAjaxForFun.ashx", true)

  2)Post方式

xhr.open("POST", "LoginByAjax.aspx", true);

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

  3)设置浏览器不使用缓存

  xhr.setRequestHeader("If-Modified-Since", "0");

(6) 发送请求

xhr.send(null);

xhr.send("isPostback=1&txtName=" + txtName.value + "&txtPwd=" + txtPwd.value);

(7) 异步使用XMLHttpRequest对象

1) 异步使用XMLHttpRequest 对象时,必须使用 .onreadystatechange 事件,使用模式应该是以下几点:

a) 创建该对象, -new

b) 设置readystateChange 事件触发一个回调函数; -onreadystateChange

c) 打开请求;-open

d) 发送请求; -send

e) 在回调函数中检索readystate 属性,看数据是否准备就绪 ( 是否等于 4)

i. 如果没有准备好,隔一段时间再次检查,因为数据没有下载完成,我们无法使用它的属性和方法。

ii. 如果已经准备好,就继续往下执行。

(8) 编写回调函数

1) 在xhr.send 之前添加设置回调函数代码

Xhr.onreadystatechange=watching;

2) 回调函数

  xhr.onreadystatechange = function () { //设置回调函数

                //alert(xhr.readyState);

                //当服务器已经将数据发回到浏览器的异步对象了

                if (xhr.readyState == 4) {

                    //如果返回的响应报文状态吗为200,才代表服务器运行正常

                    if (xhr.status == 200) {

                        gel("msgDiv").innerHTML = xhr.responseText; 

                    }

                    else {

                        alert("系统繁忙,请联系管理员~~");

                    }

                }

            }

(9) readyState属性

1) readystate属性指出了 XMLHttpRequest 对象在发送 / 接收数据过程中所处的几个状态, XMLHttpRequest 对象会经历 5 种不同的状态。

a) 0:未初始化,对象已经创建,但是还没有初始化,既还没有调用 open 方法。

b) 1:已打开,对象已经创建并初始化,但还未调用 send 方法。

c) 2:已发送,已经调用了 send 方法,但是该对象正在等待状态码和头的返回。

d) 3:正在接受,已经接受了部分数据,但还是不能使用该对象属性和方法,因此状态和响应头不完整

e) 4:已加载,所有数据接受完毕。

(10) xmlHttpRequest对象常用属性

1)回调函数:用户定义,系统调用

属性

说明

onreadystatechange

返回或者设置异步请求的事件处理程序

readyState

返回状态码:0 :未初始化, 1 :打开, 2 :发送, 3 :正在接收, 4 :已加载

responseText

使用字符串返回Http 响应

responseXML

使用XML Dom 对象返回 HTTP 响应

status

返回Http 状态码

 

(11) 如何使用Json 格式的代码

1) 在ashx 页面中写入如下代码

context.Response.Write("{'date':'I Love You'}");

2) 在aspx 页面中写入如下代码:

  xhr.onreadystatechange = function () { //设置回调函数

                //alert(xhr.readyState);

                //当服务器已经将数据发回到浏览器的异步对象了

                if (xhr.readyState == 4) {

                    //如果返回的响应报文状态吗为200,才代表服务器运行正常

                    if (xhr.status == 200) {

                        //var s = "{ 'date': 'I Love You' }";

                        //eval解析器,将JS代码解析成了Json结构

                        var json = eval("(" + xhr.responseText + ")");

                        alert(json.date);                    

  }

                    else {

                        alert("系统繁忙,请联系管理员~~");

                    }

                }

            }

分享到:
评论

相关推荐

    ASP.NET AJAX编程参考手册代码_涵盖ASP.NET 3.5及2.0的程序代码

    本书"ASP.NET AJAX编程参考手册代码"涵盖了ASP.NET 3.5和2.0两个版本的程序代码,这对于开发者来说是一份宝贵的资源。通过这本书,你可以学习到如何在ASP.NET环境中集成AJAX功能,包括以下几个核心知识点: 1. **...

    完全手册ASP.NET AJAX实用开发详解 源码

    本书从易到难、由浅入深、循序渐进系统地介绍了ASP.NET AJAX(C#)知识点和基于AJAX的Web应用系统的开发技术。全书通俗易懂,大量的实例供读者更加深刻地巩固所学习的知识,使读者更好地进行开发实践。 本书共分为15...

    ASP.NET Ajax程序设计 源码 免费

    本资源包含了ASP.NET AJAX程序设计的源码,这对学习和理解这一技术具有极大的帮助。 首先,我们要了解ASP.NET AJAX的核心组件。这包括: 1. **Microsoft AJAX Library**:这是客户端JavaScript库,提供了与服务器...

    ASP.NET Ajax客户端编程

    ASP.NET AJAX客户端编程是微软开发的一种技术,它允许开发者创建高度交互性和响应式的Web应用程序,类似于桌面应用的用户体验。在ASP.NET AJAX框架中,重点在于提高网页的异步处理能力,减少不必要的页面刷新,从而...

    完全手册:ASP.net.Ajax电子教程

    **ASP.NET AJAX 全面解析** ASP.NET AJAX(Asynchronous JavaScript and XML)是微软为.NET Framework提供的一种技术,...通过深入学习《完全手册:ASP.NET AJAX电子教程》,你可以掌握这一技术,提升Web开发能力。

    ASP.NET AJAX入门系列教程

     ASP.NET 在2007年初推出了其第一个正式版本,并将Atlas更名为ASP.NET AJAX,对应服务器端和客户端分别对应有ASP.NET服务器端编程模型和ASP.NET客户端编程模型,前者包含ASP.NET 2.0 AJAX Extensions和,后者包含...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 12

    ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    客户端 ajax asp.net ajax

    **客户端AJAX与ASP.NET AJAX** 客户端AJAX(Asynchronous JavaScript and XML)是Web开发中的一...通过研究这些文件,可以学习到如何设计和实现一个使用AJAX的交互式Web界面,以及如何与ASP.NET服务器端进行高效通信。

    ASP.NET Ajax开发(pdf)

    综上所述,这个PDF学习资料涵盖了ASP.NET AJAX开发的关键概念和技术,包括核心组件、编程模型、客户端库、集成策略以及性能优化。无论你是初学者还是有经验的开发者,这份资源都能帮助你深入理解和应用ASP.NET AJAX...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 7

    ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    微软ASP.NET AJAX框架剖析

    ASP.NET AJAX框架是微软针对AJAX(Asynchronous JavaScript and XML)技术开发的一个全面的Web开发框架,旨在提供一个高效、易于使用的开发环境,以创建以用户为中心的Web应用程序。该框架于2007年1月正式发布,作为...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 11

    ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 14

    ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 8

    ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从客户端...

    ASP.NET AJAX客户端编程之旅

    这个压缩包文件“ASP.NET AJAX客户端编程之旅”显然是一个关于学习和实践ASP.NET AJAX客户端编程的资源集合。 在ASP.NET AJAX中,核心组件包括ASP.NET AJAX库(ScriptManager、UpdatePanel、Timer等)和AJAX控件...

    [ASP.NET AJAX编程参考手册代码——涵盖ASP.NET 3.5及2.0 ]源文件

    这个压缩包包含的源文件主要是针对ASP.NET 3.5和2.0版本的AJAX编程示例,是学习和理解ASP.NET AJAX编程的宝贵资源。 在ASP.NET 3.5中,AJAX支持被集成到了核心框架内,通过System.Web.Extensions命名空间提供。这...

    asp.net AJAX博客源码

    ASP.NET AJAX博客源码是一个基于Web服务(Web Service)和.NET AJAX技术的博客系统实现,主要目的是为了提供一种异步交互的用户体验。该系统利用AJAX(Asynchronous JavaScript and XML)技术,允许用户在不刷新整个...

    asp.net ajax留言板

    ASP.NET AJAX留言板是一种基于微软ASP.NET框架和AJAX(Asynchronous JavaScript and XML)技术实现的交互式用户界面组件。在网页应用中,AJAX技术允许数据在后台无刷新地异步加载,从而提供了更加流畅、高效的用户...

    Asp.net Ajax框架教程

    ASP.NET AJAX框架是微软提供的一种用于构建富交互Web应用程序的技术,它允许开发者在不刷新整个页面的情况下更新网页的特定部分,提高用户体验。本教程详细介绍了ASP.NET AJAX框架的关键组件和用法,涵盖了一系列...

    Asp.Net Ajax GridView的实现

    Asp.Net AJAX GridView 是一种强大的数据展示控件,它结合了ASP.NET的服务器端功能与AJAX技术的优势,提供了一种高效、响应迅速且用户体验优良的方式,用于在Web应用程序中展示和操作数据。这个控件使得开发人员能够...

Global site tag (gtag.js) - Google Analytics