Ajax常见面试题

怼烎@ 2022-08-19 11:26 133阅读 0赞

1.  AJAX应用和传统Web应用有什么不同？  
    在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。因为服务器每次都会返回一个新的页面， 所以传统的web应用有可能很慢而且用户交互不友好。使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。
2.  介绍一下XMLHttpRequest对象  
    通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。AJAX开始流行始于Google在2005年使用的”Google Suggest”。 “Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口：当用户开始输入google的搜索框，Javascript发送用户输入的字符到服务器，然后服务器返回一个建议列表。XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla 1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。
3.  AJAX的全称是什么？ 介绍一下AJAX  
    AJAX的全称是Asynchronous JavaScript And XML. AJAX是2005年由Google发起并流行起来的编程方法， AJAX不是一个新的编程语言，但是它是一个使用已有标准的新的编程技术。使用AJAX可以创建更好，更快，更用户界面友好的Web应用。AJAX技术基于Javascript和HTTP Request.
4.  不同浏览器创建XMLHttpRequest 方法有什么不同？  
    XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。  
    对于Internet Explorer浏览器：  
    xmlhttp\_request = new ActiveXObject(”Msxml2.XMLHTTP.3.0″); //3.0或4.0, 5.0  
    xmlhttp\_request = new ActiveXObject(”Msxml2.XMLHTTP”);  
    xmlhttp\_request = new ActiveXObject(”Microsoft.XMLHTTP”);  
    由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。  
    对于Mozilla﹑Netscape﹑Safari等浏览器  
    创建XMLHttpRequest 方法如下：xmlhttp\_request = new XMLHttpRequest();  
    如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。 为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。  
    xmlhttp\_request = new XMLHttpRequest();  
    xmlhttp\_request.overrideMimeType(’text/xml’);  
    在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：  
    try\{  
    if( window.ActiveXObject )\{  
    for( var i = 5; i; i– )\{  
    try\{  
    if( i == 2 )\{  
    xmlhttp\_request = new ActiveXObject( “Microsoft.XMLHTTP” ); \}  
    else\{  
    xmlhttp\_request = new ActiveXObject( “Msxml2.XMLHTTP.” + i + “.0″ );  
    xmlhttp\_request.setRequestHeader(”Content-Type”,”text/xml”);  
    xmlhttp\_request.setRequestHeader(”Charset”,”gb2312″); \}  
    break;\}  
    catch(e)\{  
    xmlhttp\_request = false; \} \} \}  
    else if( window.XMLHttpRequest )  
    \{ xmlhttp\_request = new XMLHttpRequest();  
    if (xmlhttp\_request.overrideMimeType)  
    \{ xmlhttp\_request.overrideMimeType(’text/xml’); \} \} \}  
    catch(e)\{ xmlhttp\_request = false; \}  
    发送请求了  
    可以调用HTTP请求类的open()和send()方法，如下所示：  
    xmlhttp\_request.open(’GET’, URL, true);  
    xmlhttp\_request.send(null);  
    open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。  
    第二个参数是请求页面的URL。  
    第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是”AJAX”中的”A”。  
    服务器的响应  
    这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：  
    xmlhttp\_request.onreadystatechange =FunctionName;  
    FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：  
    xmlhttp\_request.onreadystatechange = function()\{  
    // JavaScript代码段  
    \};  
    首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。  
    readyState的取值如下：  
    0 (未初始化)  
    1 (正在装载)  
    2 (装载完毕)  
    3 (交互中)  
    4 (完成)  
    所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：  
    if (http\_request.readyState == 4) \{ // 收到完整的服务器响应 \}  
    else \{ // 没有收到完整的服务器响应 \}  
    当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。  
    处理从服务器得到的数据  
    有两种方式可以得到这些数据：  
    (1) 以文本字符串的方式返回服务器的响应  
    (2) 以XMLDocument对象方式返回响应
5.  AJAX都有哪些有点和缺点？  
    传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。  
    与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于 XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。  
    使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。  
    Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像 DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。  
    对应用Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为\[4\]。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）  
    一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中\#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。  
    进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 \[5\]，没有恰当的预读数据 \[6\]，或者对XMLHttpRequest的不恰当处理\[7\]，都会使用户感到延迟，这是用户不欲看到的，也是他们无法理解的\[8\]。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。  
    一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax;  
    用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事;  
    Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;  
    对串流媒体的支持没有FLASH、Java Applet好
6.  AJAX的优缺点都有什么？  
    1．最大的一点是页面无刷新，用户的体验非常好。  
    2、使用异步方式与服务器通信，具有更加迅速的响应能力。  
    3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。  
    4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。  
    ajax的缺点  
    1、ajax不支持浏览器back按钮。  
    2、安全问题 AJAX暴露了与服务器交互的细节。  
    3、对搜索引擎的支持比较弱。  
    4、破坏了程序的异常机制。  
    5、不容易调试。
7.  Ajax的工作原理？  
    Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。
8.  介绍一下XMLHttpRequest对象的常用方法和属性？  
    open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求 方式可以为GET，POST或任何服务器所支持的您想调用的方式。  
    第二个参数是请求页面的URL。  
    send()方法，发送具体请求  
    abort()方法，停止当前请求  
    readyState属性 请求的状态 有5个可取值 0=未初始化 ，1=正在加载  
    2=以加载，3=交互中，4=完成  
    responseText 属性 服务器的响应，表示为一个串  
    reponseXML 属性 服务器的响应，表示为XML  
    status 服务器的HTTP状态码，200对应ok 400对应not found
9.  Ajax和javascript的区别？  
    javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。  
    Javascript是由网景公司开发的一种脚本语言，它和sun公司的java语言是没有任何关系的，它们相似的名称只是一种行销策略。  
    在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容。  
    Javascript的特性  
    1，控制文档的外观和内容  
    2，与HTML表单的交互  
    3,与用户的交互