什么是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



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

相关文章推荐

Ajax软件开发技术第8章.pptx

  • 2017-09-30 13:04
  • 1.51MB
  • 下载

jsp页面通过ajax向后台传参实现收藏功能

好久没写文章,之前的项目转成毕设了所以又逼着自己推了推进度。 这次主要是填上次的坑。 上一篇写到了做的web页面用于展示。但是还有很多问题没有解决,比如分页显示,比如如何将标记的结果传给后台。这次...

Ajax页面载入,等待特效

  • 2017-09-11 11:37
  • 84KB
  • 下载

cropbox + springmvc +ajax 裁剪上传

最近用到了裁剪上传,用最简单的方式进行实现。发现好多用jcrop的,那个是根据坐标切割原图,而cropbox是转成base64码。 接下来看实现cropbox.js 从网上下下来的 ,代码很少就直接...

传智-韩顺平-ajax技术

  • 2017-09-11 00:10
  • 971KB
  • 下载

ajax提交中文到servlet

Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室

思路 消息显示区 发消息 板块 消息显示 消息发送 优化 显示非重复性的数据 优化显示 加上滚动条 每次都显示最新消息 完整代码 前端代码 数据库表结构 服务器端代码 总结与展望 总结 展望为更好的运...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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