面试题 —— Ajax的基本原理总结

一时失言乱红尘 2022-05-16 00:05 169阅读 0赞

前两天面试的时候，面试官问我，你掌握的技能是Ajax，那你给我讲一下它的基本原理吧！

妈呀，瞬间脑子空白。当时在门口背了好久的网络知识点，一时竟然说不吃话，只记得什么异步通信，同步数据，面试官的笑让我不寒而栗…………今天整体的整理一遍Ajax的知识点吧。

--------------------

**Ajax** 的全称是**Asynchronous JavaScript and XML**（异步的JavaScript 和 XML），其中，Asynchronous 是 **异步** 的意思，它有别于传统web开发中采用的同步的方式。

--------------------

## **关于同步和异步** ##

异步传输是面向字符的传输，它的单位是字符；  
而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

同步的话，必须这个操作完了才会执行下一步，在等待期间浏览器会挂起不能执行任何接下来的js代码；异步则是【告诉】浏览器去做，【告诉】是一瞬间的事情，然后就继续执行下一步了，等到结果返回来了，浏览器会通知js执行相应的回调。

--------------------

## **ajax所包含的技术** ##

1.使用CSS和XHTML来表示。  
2. 使用DOM模型来交互和动态显示。  
3.使用XMLHttpRequest来和服务器进行异步通信。(最重要)  
4.使用javascript来绑定和调用。

在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

--------------------

## **ajax原理和XmlHttpRequest对象** ##

Ajax相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

**Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。**这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

**XMLHttpRequest是ajax的核心机制**，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

首先，需要先了解XMLHttpRequest这个对象的**属性**和**方法**：

属性：

![这里写图片描述][20160922205136182]

方法：

![这里写图片描述][20160922205159776]

对这个对象有了静态了了解，知道它长的什么样子，有什么功能了，下边该我们使用它了，当然这里我也用五步法写出代码来：

**第一步：创建XMLHttpRuquest对象；  
第二步：注册回调方法  
第三步：设置和服务器交互的相应参数  
第四步：设置向服务器端发送的数据，启动和服务器端的交互  
第五步：判断和服务器端的交互是否完成，还要判断服务器端是否返回正确的数据**

//类的构建定义，主要职责就是新建XMLHttpRequest对象 
    var MyXMLHttpRequest=function(){   
        var xmlhttprequest;  
        if(window.XMLHttpRequest){  
            xmlhttprequest=new XMLHttpRequest();  
            if(xmlhttprequest.overrideMimeType){  
                xmlhttprequest.overrideMimeType("text/xml");  
            }  
        }else if(window.ActiveXObject){  
            var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
            for(var i=0;i<activeName.length;i++){  
                try{  
                    xmlhttprequest=new ActiveXObject(activeName[i]);  
                    break;  
                }catch(e){  
    
                }  
            }  
        }  
    
        if(xmlhttprequest == undefined || xmlhttprequest == null){  
            alert("XMLHttpRequest对象创建失败！！");  
        }else{  
            this.xmlhttp=xmlhttprequest;  
        }  
    
        //用户发送请求的方法 
        MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){   
            if(this.xmlhttp!=undefined && this.xmlhttp!=null){  
                method=method.toUpperCase();  
                if(method!="GET" && method!="POST"){  
                    alert("HTTP的请求方法必须为GET或POST!!!");  
                    return;  
                }  
                if(url==null || url==undefined){  
                    alert("HTTP的请求地址必须设置！");  
                    return ;  
                }  
                var tempxmlhttp=this.xmlhttp;  
                this.xmlhttp.onreadystatechange=function(){   
                    if(tempxmlhttp.readyState==4){  
                        if(temxmlhttp.status==200){  
                            var responseText=temxmlhttp.responseText;  
                            var responseXML=temxmlhttp.reponseXML;  
                            if(callback==undefined || callback==null){  
                                alert("没有设置处理数据正确返回的方法");  
                                alert("返回的数据：" + responseText);  
                            }else{  
                                callback(responseText,responseXML);  
                            }  
                        }else{  
                            if(failback==undefined ||failback==null){  
                                alert("没有设置处理数据返回失败的处理方法！");  
                                alert("HTTP的响应码：" + tempxmlhttp.status + ",响应码的文本信息：" + tempxmlhttp.statusText);  
                            }else{  
                                failback(tempxmlhttp.status,tempxmlhttp.statusText);  
                            }  
                        }  
                    }  
                }  
    
                //解决缓存的转换 
                if(url.indexOf("?")>=0){  
                    url=url + "&t=" + (new Date()).valueOf();  
                }else{  
                    url=url+"?+="+(new Date()).valueOf();  
                }  
    
                //解决跨域的问题 
                if(url.indexOf("http://")>=0){  
                    url.replace("?","&");  
                    url="Proxy?url=" +url;  
                }  
                this.xmlhttp.open(method,url,true);  
    
                //如果是POST方式，需要设置请求头 
                if(method=="POST"){  
                    this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");  
                }  
                this.xmlhttp.send(data);  
        }else{  
            alert("XMLHttpRequest对象创建失败，无法发送数据！");  
        }  
        MyXMLHttpRequest.prototype.abort=function(){   
            this.xmlhttp.abort();  
        }  
      }  
    }  
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34
         35
         36
         37
         38
         39
         40
         41
         42
         43
         44
         45
         46
         47
         48
         49
         50
         51
         52
         53
         54
         55
         56
         57
         58
         59
         60
         61
         62
         63
         64
         65
         66
         67
         68
         69
         70
         71
         72
         73
         74
         75
         76
         77
         78
         79
         80
         81
         82
         83
         84
         85
         86
         87
         88

--------------------

## **ajax的优点** ##

Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：

**<1>.无刷新更新数据。**  
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

**<2>.异步与服务器通信**。  
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

**<3>.前端和后端负载平衡。**  
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

**<4>.基于标准被广泛支持。**  
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

**<5>.界面与应用分离。**  
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

--------------------

## **AJAX的缺点** ##

**<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。**  
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。

**<2>.AJAX的安全问题。**  
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

**<3>.对搜索引擎支持较弱。**  
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

**<4>.破坏程序的异常处理机制。**  
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。

**<5>.违背URL和资源定位的初衷。**  
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

**<6>.AJAX不能很好支持移动设备**。  
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。

**<7>.客户端过肥，太多客户端代码造成开发上的成本。**  
编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

--------------------

## **AJAX注意点及适用和不适用场景** ##

**注意点**

Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

**Ajax适用场景**

<1>.表单驱动的交互  
<2>.深层次的树的导航  
<3>.快速的用户与用户间的交流响应  
<4>.类似投票、yes/no等无关痛痒的场景  
<5>.对数据进行过滤和操纵相关数据的场景  
<6>.普通的文本输入提示和自动完成的场景

**Ajax不适用场景**

<1>.部分简单的表单  
<2>.搜索  
<3>.基本的导航  
<4>.替换大量的文本  
<5>.对呈现的操纵

[20160922205136182]: /images/20220516/bc82d02b66d74d0f92606979c9654796.png
[20160922205159776]: /images/20220516/da4a21a2f997418f90ba58668122d3ed.png