什么是Ajax

最新推荐文章于 2023-04-12 21:22:56 发布

chitry_

最新推荐文章于 2023-04-12 21:22:56 发布

阅读量472

点赞数

分类专栏： Web启示录 [基础篇] 文章标签： Ajax JSP Web前端互联网

本文链接：https://blog.csdn.net/qq_29025139/article/details/46795781

版权

Web启示录 [基础篇] 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

//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