//2014.08.27 14:53:12
1、基于XML的异步JavaScript,简称 Ajax
(Asynchronous JavaScript and XML的缩写)。
允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
2、
Ajax:一种不用刷新整个页面便可与服务器通讯的办法(主要得益于XMLHTTP组件XMLHTTPRequest对象)
#我们来总结一下
不用刷新整个页面便可与服务器通讯的办法:
*
Flash
*
Java applet
*
框架:<frameset /> 如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊
动整个页面
隐藏的iframe
*
XMLHttpRequest
:
该对象是对 JavaScript 的一个扩展,可使网页与服务器进行通信。
是创建
Ajax 应用
的最佳选择。实际上通常把 Ajax 当成
XMLHttpRequest
对象的代名词 。
3、
Ajax并不是一项新技术,其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
实质上,Ajax 还是一种JavaScript编程语言(扩展),JavaScript是一种黏合剂,使Ajax应用的各部分集成在一起。
4、Ajax的工作原理:
AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介(相当于加了个中间层,使用户操作与服务器响应异步化),并不是所有的用户请求都提交给服务器,一些数据验证和数据处理等,都交给Ajax引擎来做,只有确定需要从服务器读取新数据时,再由Ajax引擎带向服务器提交请求。从而消除了网络交互过程中的处理—等待—处理—等待缺点。
#我们理解一下什么是同步和异步:
举个例子:普通B/S模式(同步) AJAX技术(异步)
* 同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
* 异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕
同步是指:发送方发出数据后,等接收方发回响应以后才发下一个
数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下
个数据包的通讯方式
Ajax的核心是JavaScript对象XmlHttpRequest(Ajax引擎
)。
该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。
简而言XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
5、在Ajax中,JavaScript主要被用来传递用户界面上的数据到服务器端并返回结果。
XMLHttpRequest对象用来响应通过HTTP传递的数据,一旦数据返回到客户端就可以立刻使用DOM将数据放到网页上。
6、Ajax未出现以前,基于Web的应用必须提交整个页面才能验证数据,或者要依赖复杂的JavaScript来检查表单,尽管有些检查很简单,可以使用JS编写,但是另外一些检查则不然,完全靠JS是办不到的。而且,客户端编写的每一个验证例程都必须在服务器上一某种方式重写,因为用户有可能禁用JavaScript。
Ajax出现以后,利用Ajax,可以不受这个限制,不再只是编写简单的客户端验证和重复的逻辑。如果你想提高用户体验,可以简单的调用为服务器编写的验证例程。大多数情况这个逻辑编写起来更简单,测试页更容易。
一般会建议从验证开始使用Ajax。
7、Ajax优点:减少了用户等待服务器响应的时间浪费(或说无状态连接的痛苦)
可以排除下载冗余HTML的需要
提高进程速度
8、Ajax缺点:
AJAX大量使用了Javascript和AJAX引擎,其最大的问题在于跨浏览器的
兼容问题。
AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;难以确定当期数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。即,页面不刷新,服务器进行操作完毕后,要在页面上给出提示。
对流媒体的支持没有FLASH、Java Applet好。
一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。
9、Ajax引擎:XMLHttpRequest对象时整个Ajax开发的基础,它具有慈宁宫客户端到服务器端异步发送http请求的能力。
XMLHttpRequest对象由JavaScript创建并使用,最早在微软的IE5中以ActiveX控件的形式出现。非W3C标准。是以,使用的最大问题在于创建XMLHttpRequest对象时候浏览器的兼容。而在实现XMLHttpRequest对象的时候,不同浏览器之间是兼容的。
#为解决创建XMLHttpRequest对象时候浏览器的兼容问题,使用JavaScript的try-catch程序块来尝试不同的途径创建对象:
function createXmlHttpRequest(){
var xmlHttp;
try{ //实现Firefox, Opera 8.0+, Safari等浏览器的兼容问题
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //实现Internet Explorer的兼容问题
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{//实现其他浏览器的兼容问题
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
或者:
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
XMLHttpRequest 对象方法
if (typeof XMLHttpRequest == 'undefined') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for (var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("No XML component installed!")
}
}
function createXMLHttpRequest() {
try {
//以Mozilla方式创建
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
//以IE方式创建
if (window.ActiveXObject) {
return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
}
}
catch (ex) {}
return false;
};
如此,便可以通过 “var req = createXMLHttpRequest()”来得到Ajax的引擎对象了。
10、XMLHttpRequest对象的属性:
11、XMLHttpRequest对象的方法:
具体使用自己查API
//2014.08.27 14:53:12
1、基于XML的异步JavaScript,简称 Ajax
(Asynchronous JavaScript and XML的缩写)。
允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
2、
Ajax:一种不用刷新整个页面便可与服务器通讯的办法(主要得益于XMLHTTP组件XMLHTTPRequest对象)
#我们来总结一下
不用刷新整个页面便可与服务器通讯的办法:
*
Flash
*
Java applet
*
框架:<frameset /> 如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊
动整个页面
隐藏的iframe
*
XMLHttpRequest
:
该对象是对 JavaScript 的一个扩展,可使网页与服务器进行通信。
是创建
Ajax 应用
的最佳选择。实际上通常把 Ajax 当成
XMLHttpRequest
对象的代名词 。
3、
Ajax并不是一项新技术,其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
实质上,Ajax 还是一种JavaScript编程语言(扩展),JavaScript是一种黏合剂,使Ajax应用的各部分集成在一起。
4、Ajax的工作原理:
AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介(相当于加了个中间层,使用户操作与服务器响应异步化),并不是所有的用户请求都提交给服务器,一些数据验证和数据处理等,都交给Ajax引擎来做,只有确定需要从服务器读取新数据时,再由Ajax引擎带向服务器提交请求。从而消除了网络交互过程中的处理—等待—处理—等待缺点。
#我们理解一下什么是同步和异步:
举个例子:普通B/S模式(同步) AJAX技术(异步)
* 同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
* 异步: 请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕
同步是指:发送方发出数据后,等接收方发回响应以后才发下一个
数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下
个数据包的通讯方式
Ajax的核心是JavaScript对象XmlHttpRequest(Ajax引擎
)。
该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。
简而言XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
5、在Ajax中,JavaScript主要被用来传递用户界面上的数据到服务器端并返回结果。
XMLHttpRequest对象用来响应通过HTTP传递的数据,一旦数据返回到客户端就可以立刻使用DOM将数据放到网页上。
6、Ajax未出现以前,基于Web的应用必须提交整个页面才能验证数据,或者要依赖复杂的JavaScript来检查表单,尽管有些检查很简单,可以使用JS编写,但是另外一些检查则不然,完全靠JS是办不到的。而且,客户端编写的每一个验证例程都必须在服务器上一某种方式重写,因为用户有可能禁用JavaScript。
Ajax出现以后,利用Ajax,可以不受这个限制,不再只是编写简单的客户端验证和重复的逻辑。如果你想提高用户体验,可以简单的调用为服务器编写的验证例程。大多数情况这个逻辑编写起来更简单,测试页更容易。
一般会建议从验证开始使用Ajax。
7、Ajax优点:减少了用户等待服务器响应的时间浪费(或说无状态连接的痛苦)
可以排除下载冗余HTML的需要
提高进程速度
8、Ajax缺点:
AJAX大量使用了Javascript和AJAX引擎,其最大的问题在于跨浏览器的
兼容问题。
AJAX更新页面内容的时候并没有刷新整个页面,因此,网页的后退功能是失效的;难以确定当期数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。即,页面不刷新,服务器进行操作完毕后,要在页面上给出提示。
对流媒体的支持没有FLASH、Java Applet好。
一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。
9、Ajax引擎:XMLHttpRequest对象时整个Ajax开发的基础,它具有慈宁宫客户端到服务器端异步发送http请求的能力。
XMLHttpRequest对象由JavaScript创建并使用,最早在微软的IE5中以ActiveX控件的形式出现。非W3C标准。是以,使用的最大问题在于创建XMLHttpRequest对象时候浏览器的兼容。而在实现XMLHttpRequest对象的时候,不同浏览器之间是兼容的。
#为解决创建XMLHttpRequest对象时候浏览器的兼容问题,使用JavaScript的try-catch程序块来尝试不同的途径创建对象:
function createXmlHttpRequest(){
var xmlHttp;
try{ //实现Firefox, Opera 8.0+, Safari等浏览器的兼容问题
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //实现Internet Explorer的兼容问题
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{//实现其他浏览器的兼容问题
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
或者:
var xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
var xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
XMLHttpRequest 对象方法
if (typeof XMLHttpRequest == 'undefined') {
XMLHttpRequest = function () {
var msxmls = ['MSXML3', 'MSXML2', 'Microsoft']
for (var i=0; i < msxmls.length; i++) {
try {
return new ActiveXObject(msxmls[i]+'.XMLHTTP')
} catch (e) { }
}
throw new Error("No XML component installed!")
}
}
function createXMLHttpRequest() {
try {
//以Mozilla方式创建
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
//以IE方式创建
if (window.ActiveXObject) {
return new ActiveXObject(getXMLPrefix() + ".XmlHttp");
}
}
catch (ex) {}
return false;
};
如此,便可以通过 “var req = createXMLHttpRequest()”来得到Ajax的引擎对象了。
10、XMLHttpRequest对象的属性:
11、XMLHttpRequest对象的方法:
具体使用自己查API