控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

ASP.NET Ajax编程技术学习

作者:未知 出处:cnblog 2012年08月28日 阅读:

 从现在开始我们学习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中的创建方法是:
 
//根据不同的浏览器使用响应的方式来创建异步对象 
function createXmlHttp() {
 
     xhobj = false;
 
     try {
 
         xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // iemsxml3.0+ 
 
     } catch (e) {
 
         try {
 
             xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //iemsxml2.6 
 
         } catch (e2) {
 
             xhobj = false;
 
         }
 
     }
 
     if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari,谷歌浏览器 
 
         xhobj = new XMLHttpRequest();
 
     }
 
     return xhobj;
 
 }
 
创建XMLHttpRequest对象
 
(1) 同步使用XMLHttpRequest对象
 
按照下面的模式可以同步XMLHttpRequest对象
 
 1) 创建对象;——new(叫一个助手过来)
 
 2) 创建请求;——open(告诉他要去做的事情)
 
 3) 发送请求;——send(让其去干某一件事)
 
(2) 添加一个WebForm页面,命名为FirstAjaxForFun.aspx,再添加一个一般处理程序FirstAjaxForFun.ashx,在aspx中写入如下代码
<title>Ajax页面实现无刷新</title>
 
     <script src="common/common.js" type="text/javascript"></script>
 
     <script type="text/javascript">
 
         function GetDate() {
 
             var xhr = false;
 
             //1.创建异步对象
 
             xhr = createXmlHttp();
 
             //2.设置请求参数
 
             xhr.open("GET", "FirstAjaxForFun.ashx", true);
 
             //3.设置回调函数(这个回调函数主要用来检测服务器是否将数据发送给异步对象的)
 
             xhr.onreadystatechange = function () {
 
                 //获得服务器响应的数据
 
                 //alert(xhr.readystate);
 
                 //当服务器已经将数据发回到浏览器了,如果返回的响应报文状态码为200,才代表服务器运行正确。
 
                 if (xhr.readystate == 4) {
 
                     if (xhr.status == 200) {
 
                         gel("MyDiv").innerHTML = xhr.responseText;
 
                         //document.getElementById("MyDiv").innerHTML = xhr.responseText;
 
                     }
 
                     else {
 
                         alert("系统繁忙..请联系管理员");
 
                     }   }  }
 
             //异步对象发送请求
 
             xhr.send(null);
 
         }
 
     </script>
 
     <input type="button" value="GetDate()" onclick="GetDate()" />
 
     <div id="MyDiv"></div>
 
 在.ashx里面写入如下代码:
 
    System.Threading.Thread.Sleep(2000);
 
    int a=0;
 
    int c = 1 / a;
 
    context.Response.Write("<h1>Hello World" + DateTime.Now + "</h1>");
先来创建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对象常用属性

属性

说明

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("系统繁忙,请联系管理员~~");
 
                    }
 
                }
 
            }
 

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统