什么是Ajax

原创 2015年07月07日 23:11:38


//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对象的属性:

具体使用方法,自己查API


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对象的属性:

具体使用方法,自己查API


11、XMLHttpRequest对象的方法:

具体使用自己查API



版权声明:本文为博主原创文章,未经博主允许不得转载。

java jsp ajax

  • 2017年12月07日 08:39
  • 3.44MB
  • 下载

jQuery源码阅读(十四)---aJax 模块与异步队列联系

关于ajax,jQuery做了封装,并且考虑了很多浏览器兼容问题,以及跨域问题。当然,这种异步操作离不开我们之前分析的延迟对象。所以这一次,主要是对ajax模块中对于延迟对象的应用进行分析。$.aja...

oracle+ssm+ajax+Bootstrap

  • 2017年11月20日 20:45
  • 1.15MB
  • 下载

Bootstrap 分页插件 ajax获取数据显示

bootstrap-paginator

Ajax请求永远是304的解决方案

我之前写了一个NavigationService,用来做页面的Ajax导航,但是今天发现一个问题,在IE下面,发现Ajax的请求不会真正的被发送到服务器端,在IE里面,返回的永远是304。这个应该是I...
  • puncha
  • puncha
  • 2014年01月07日 16:50
  • 6421

Asp+Ajax无刷新用户登录实例代码

  • 2017年11月07日 12:57
  • 21KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:什么是Ajax
举报原因:
原因补充:

(最多只允许输入30个字)