前言:从现行反革命始于大家学习ASP.NET AJAX,Ajax本事今后应用尤其广阔,只要大家上的1部分巨型网址,都用到了那些才具,AJAX末精通释的意趣是:完成网页的无刷新职能,使网页展现出越来越美观好的页面,使用户体验能够最棒。 

1. 什么是AJAX

(一) AJAX:”Asynchronous JavaScript and XML”中文的意味就是:异步JavaScript和XML,指一种创制交互式网页应用程序的网页开拓本事。Ajax并非缩写词,而是由Jesse 詹姆士 Guiett创设的名词

(贰) 不是指一种单壹的本领,而是有机的运用了一文山会海相关的手艺:web标准(Standards-Based Presention)+XHTML+CSS的代表。

 一) 使用Dom(Document Object Model)进行动态展现及互相。

 二) 使用XML和XSLT举行多少交互及连锁操作。

 三) 使用XMLHttpRequest举办异步数据查询,检索。

(三) 简单明了为:JavaScript+XMLHttpRequest+CSS+服务器端的聚众。

贰. 一般性网页请求回执进程(请求响应方式)

图片 1

3. Ajax Web Application Model

图片 2

4. Ajax优点

(一) AJAX的原形是一个浏览器端的提醒音信。

(二) AJAX本事之根本目的在于有的沟通客户端及服务器间的多寡。

(三) 这些才干的支柱是XMLHttpRequest的最重点特征,在于能够不用重新载入整个版面来更新资料,也正是所谓的Refresh without Reload(轻刷新)。

(肆) 与服务器之间的联系,完全是经过JavaScript来促成的。

(5) 使用XMLHttpRequest本人传送的数据量十分的小,所以反应会异常的快,也正是让网络程序更像二个桌面应用程序。

(六) Ajax正是选拔JavaScript在后台悄悄帮您去跟服务器要资料,最终再有JavaScript大概Dom来帮你表现结果,因为兼具动作都是由JavaScript代劳,所以省去了网页重载的劳顿,使用者也感受不到等候的悲苦。

5. XMLHttpRequest

(1) Ajax应用程序的着力正是它。

(2) XMLHttpRequest对象在IE浏览器和非IE浏览器中创设的诀窍不一样。

(3) 简单来讲,它能够异步从服务器端读取txt可能xml数据。

(肆) 在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对象

(壹) 同步运用XMLHttpRequest对象

遵守上边的格局能够同步XMLHttpRequest对象

 一) 创制对象;——new(叫二个助手过来)

 二) 创立请求;——open(告诉她要去做的政工)

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

(二) 增加一个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>");

(叁) 先来创制XMLHttpRequest对象

 一) 在IE,FireFox,Safari和Opera中开创该对象的JavaScript对象

   var xhr=new XMLHttpRequest();

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

var xmlRequest=new ActiveXObject(“Microsoft.XmlHttp”);

(4) XMLHttpRequest对象的法子

方法

说明

abort

取消请求

open

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

send

发送请求到服务器

setRequestHeader

添加自定义Http头到请求

getAllResponseHeader

获取Http响应头的整个列表

getResponseHeader

仅获取指定的Http响应头

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

  一)设置参数(Get格局)

xhr.open(“GET”, “FirstAjaxForFun.ashx”, true)

  2)Post方式

xhr.open(“POST”, “LoginByAjax.aspx”, true);

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

  三)设置浏览器不接纳缓存

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

(6) 发送请求

xhr.send(null);

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

(柒) 异步使用XMLHttpRequest对象

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

a) 创造该目标, -new

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

c) 张开请求;-open

d) 发送请求; -send

e) 在回调函数中检索readystate属性,看数量是或不是准备伏贴(是还是不是等于4)

i. 假若未有安不忘危好,隔1段时间再度检查,因为数量尚未下载完结,大家不可能使用它的性质和方法。

ii. 固然已经准备好,就连任往下试行。

(8) 编写回调函数

壹) 在xhr.send此前增加设置回调函数代码

Xhr.onreadystatechange=watching;

二) 回调函数

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

                //alert(xhr.readyState);

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

                if (xhr.readyState == 4) {

                    //借使重临的响应报文状态吧为200,才代表服务器运营如常

                    if (xhr.status == 200) {

                        gel(“msgDiv”).innerHTML = xhr.responseText; 

                    }

                    else {

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

                    }

                }

            }

(9) readyState属性

一) readystate属性提议了XMLHttpRequest对象在殡葬/接收数据进程中所处的几个情形,XMLHttpRequest对象会经历八种分化的情形。

a) 0:未初步化,对象已经创造,不过还从未起头化,既还尚未调用open方法。

b) 一:已张开,对象已经创设并早先化,但还未调用send方法。

c) 二:已发送,已经调用了send方法,可是该目的正在等待状态码和头的回来。

d) 3:正在承受,已经接受了壹些数码,但依旧不能够利用该目的属性和措施,因而状态和响应头不完全

e) 四:已加载,全部数据接受落成。

(拾) xmlHttpRequest对象常用属性

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

属性

说明

onreadystatechange

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

readyState

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

responseText

使用字符串返回Http响应

responseXML

使用XML Dom对象返回HTTP响应

status

返回Http状态码

 

(1壹) 怎么着使用Json格式的代码

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

context.Response.Write(“{‘date’:’I Love You’}”);

二) 在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(“系统繁忙,请联系管理员~~”);

                    }

                }

            }

相关文章

网站地图xml地图