Ajax 介绍

Ajax的关键技术:  异步处理数据

使用XHTML(HTML)和CSS构建标准化的展示层

使用DOM(document object model)进行动态显示和交互

使用XML和XSLT进行数据交换和操纵

使用XMLHttpRequest异步获取数据

使用JavaScript将所有元素绑定在一起

应用范畴:

局部刷新。

获取其它网页的内容。

需要异步读取的地方。

缺点:

不被搜索引擎支持。

不支持浏览器的后退功能。

纯粹的JavaScript语言。

AJAX数据处理的实现机制

AJAX的主要应用是异步获取后台数据和局部刷新。

异步获取数据的原理是:通过Ajax技术把网络上或服务器上的数据下载到 客户端的内存中,然后使用JavaScript语言根据实际需要整合这些资源, 并用CSS和DOM实现对界面的布局。

AJAX处理数据的特点就是异步调用和按需索取。

异步读取实现的原理是:当用户选择某项功能时,这项功能调用过程中页 面不会出现中断,用户此时可以浏览其它内容,而非传统的白屏等待页面。

异步的意思与多线程类似,使用XMLHttp可以在后台运行用户的操作,而用 户在前台感觉不到数据在交互,如此Ajax就可以实现异步调用功能.这样 就不会中断用户的操作,也不会刷屏,让用户休验Web2.0时代的页面特色。

按需索取实现的原理是:将服务器端的数据根据需要分成多个多页,然后客 户端需要哪个内容,则使用XMLHttp加载哪个网页,最后用Response.Write 返回索取的数据。

一般处理程序: XX.ashx   没有前台,只有后台,输出数据(提供所需要的数据)

Html网页里面提供外壳,一般处理程序-->.ashx  提供数据   需要哪个内容就去找哪个一般处理程序

Ajax中异步获取数据的流程有4步:

1.创建异步对象。2.加载要获取的服务器页面。3.判断异步调用的状态。 4.发送异步请求。

其中: 加载(Open)和发送(Send)是异步请求的两个主要方法。 异步返回的数据在判断状态的事件中获取。

加载服务器的方法Open(): xmlhttp.Open(Method,url,ayac);

其中Method表示向服务器发送请求的 HTTP方法,此参数主要有两种值(get、post)。

url:表示请求的服务器地址,如果是XML文件则写出文件相对网站的路径。

ayac:是否使用异步方式获取数据(true则xmlhttp将异步调用对象)。

发送异步请求方法Send(): xmlhttp.Send()/xmlhttp.Send(null);

Send有两种形式,一种带参数,一种不 带参数。如果发送请求参数已经在URL中则Send参数设为null或不写。

有关状态的属性有3个:

readyState:表示请求的状态,共有5个,这些状态的顺序及代表值如下: 0(未初始化)->1(正在加载)->2(已加载)->3(交互中)->4(完成)

status:服务器响应HTTP状态码(200对应OK,404对应NoT Found)。

异步返回值的属性有3个:

responseText:以字符串形式返回服务器的响应。

responseXML:以XML形式返回服务器的响应。

responseBody:因为服务器的响应包括head、body等全部信息所以可以 使用此属性只获取相应的body部分信息。

onreadystatechange事件:此事件以属性的方式存在于XMLHttp 对象中,当创建完XMLHttp对象后,需要为对象指定一个方法 用来监视请求状态的变化. xmlhttp.onreadystatechange=proce;

其中proce是一个自定义的javascript方法,一旦指定了这个 事件的方法,就可以在proce方法中判断请求的状态,并可以 根据状态号执行不同状态时期的客户端处理。

Get: 注意:

使用open()方法的时候在地址栏传递参数open(‘get’, 'target.aspx?name=raoqi&&pass=123');

send();

Post: 注意:

当使用post方式的时候必须要设置一下属性用来统一编码 xmlHttp.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8;'); send('name=raoqi&&pass=123');

上一篇:HTML5 3D动画效果


下一篇:7款超酷HTML5 3D动画精选应用及源码