前端面试题总结（四）ajax篇

1、什么是AJAX，为什么要使用Ajax（请谈一下你对Ajax的认识）

• 什么是ajax：
  • AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
• Ajax包含下列技术：

1. 1. 基于web标准（standards-basedpresentation）XHTML+CSS的表示；
   2. 使用 DOM（Document ObjectModel）进行动态显示及交互；
   3. 使用 XML 和 XSLT 进行数据交换及相关操作；
   4. 使用 XMLHttpRequest 进行异步数据查询、检索；
   5. 使用 JavaScript 将所有的东西绑定在一起。

2、为什么要用ajax：

• Ajax应用程序的优势在于：
  1. 通过异步模式，提升了用户体验
  2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
  3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
• AJAX最大的特点是什么。
  • Ajax可以实现动态不刷新（局部刷新）
  • 就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

3、请介绍一下XMLhttprequest对象。

• Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

4、AJAX技术体系的组成部分有哪些。

• HTML，css，dom，xml，xmlHttpRequest，javascript

5、AJAX应用和传统Web应用有什么不同。

1. 在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击”Submit”按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。
2. 因为服务器每次都会返回一个新的页面， 所以传统的web应用有可能很慢而且用户交互不友好。
3. 使用AJAX技术， 就可以使Javascript通过XMLHttpRequest对象直接与服务器进行交互。
4. 通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

6、AJAX请求总共有多少种CALLBACK。

Ajax请求总共有八种Callback

1. 1. onSuccess
   2. onFailure
   3. onUninitialized
   4. onLoading
   5. onLoaded
   6. onInteractive
   7. onComplete
   8. onException

7.Ajax和javascript的区别。

1. javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它是利用了一系列相关的技术其中就包括javascript。
2. Javascript是由网景公司开发的一种脚本语言，它和sun公司的java语言是没有任何关系的，它们相似的名称只是一种行销策略。
3. 在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容。
4. 在 Ajax应用中信息是如何在浏览器和服务器之间传递的
5. 通过XML数据或者字符串

8、在浏览器端如何得到服务器端响应的XML数据。

• XMLHttpRequest对象的responseXMl属性

9、 XMLHttpRequest对象在IE和Firefox中创建方式有没有不同。

• 有，IE中通过new ActiveXObject()得到，Firefox中通过newXMLHttpRequest()得到

10、介绍一下XMLHttpRequest对象的常用方法和属性。

1. open(“method”,”URL”) 建立对服务器的调用，第一个参数是HTTP请求    方式可以为GET，POST或任何服务器所支持的您想调用的方式。第二个参数是请求页面的URL。
2. send()方法，发送具体请求
3. abort()方法，停止当前请求
4. readyState属性   请求的状态 有5个可取值0=未初始化 ，1=正在加载，2=以加载，3=交互中，4=完成
5. responseText 属性  服务器的响应，表示为一个串
6. reponseXML 属性 服务器的响应，表示为XML
7. status   服务器的HTTP状态码，200对应ok  400对应not found

11、什么是XML

• XML是扩展标记语言，能够用一系列简单的标记描述数据

12、XML的解析方式

• 常用的用dom解析和sax解析。dom解析是一次性读取xml文件并将其构造为DOM对象供程序使用，优点是操作方便，但是比较耗内存。Sax是按事件驱动的方式解析的，占用内存少，但是编程复杂

13、你采用的是什么框架（架包）
这题是必问的，一般也是最开始就会问到。
在java中比较流行的有 dojo, Prototype , JQuery, Dwr, extjs  等等

14、如果熟悉某种ajax框架，他可能会问到怎样在程序中使用这种框架

• DWR框架介绍
  • DWR(DirectWeb Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).
  • DWR的实现原理是通过反射，将java翻译成javascript，然后利用回调机制，从而实现了javascript调用Java代码

15、介绍一下Prototype的$()函数，$F()函数，$A()函数都是什么作用

• $() 方法是在DOM中使用过于频繁的document.getElementById() 方法的一个便利的简写，就像这个DOM方法一样，这个方法返回参数传入的id的那个元素。
• $F()函数是另一个大收欢迎的“快捷键”，它能用于返回任何表单输入控件的值，比如textbox,drop-down list。这个方法也能用元素id或元素本身做为参数。
• $A()函数能把它接收到的单个的参数转换成一个Array对象。

16、介绍一下XMLHttpRequest对象

1. 通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
2. AJAX开始流行始于Google在2005年使用的”Google Suggest”。
3. “Google Suggest”就是使用XMLHttpRequest对象来创建动态的Web接口：
4. 当用户开始输入google的搜索框，Javascript发送用户输入的字符到服务器，然后服务器返回一个建议列表。
5. XMLHttpRequest对象在IE5.0+, Safari 1.2, Mozilla1.0/Firefox, Opera 8+ 和NetScapt7 开始被支持。

17、AJAX的全称是什么？ 介绍一下AJAX？

• AJAX的全称是Asynchronous JavaScript And XML.
• AJAX是2005年由Google发起并流行起来的编程方法， AJAX不是一个新的编程语言，但是它是一个使用已有标准的新的编程技术。
• 使用AJAX可以创建更好，更快，更用户界面友好的Web应用。
• AJAX技术基于Javascript和HTTP Request.

18、Ajax主要包含了哪些技术？

1. Ajax（Asynchronous JavaScript + XML）的定义
2. 基于web标准（standards-based presentation）XHTML+CSS的表示；
3. 使用 DOM（Document Object Model）进行动态显示及交互；
4. 使用 XML 和 XSLT 进行数据交换及相关操作；
5. 使用XMLHttpRequest 进行异步数据查询、检索；
6. 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。
7. 类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。
8. AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

19、AJAX都有哪些优点和缺点？

• 优点：

1. 1. 最大的一点是页面无刷新，用户的体验非常好。
   2. 使用异步方式与服务器通信，具有更加迅速的响应能力。
   3. 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
   4. 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

• ajax的缺点：

1. 1. ajax不支持浏览器back按钮。
   2. 安全问题 AJAX暴露了与服务器交互的细节。
   3. 对搜索引擎的支持比较弱。
   4. 破坏了程序的异常机制。
   5. 不容易调试。

20、如何解决跨域问题？

• jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面。
• 举例(jsonp)：
  • 动态的创建script标签，通过标签引入一个js文件，这个文件载入成功后会执行我们在url参数中指定的函数，并把我们需要的json数据作为参数传入。
  • 优点：兼容性好，简单易用，支持浏览器与服务器双向通行。
  • 缺点：只支持get请求。
• 由于同源策略的限制，xmlhttprequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现，然后在服务器端输出json数据并执行回调函数，从而解决跨域的数据请求。

21、json的了解？

1. json是一种轻量级的数据交换格式。基于JavaScript的一个子集。数据格式简单，易于读写，占用宽带小。
2. 格式：采用键值对。（{“name”:”张三”,”age”,”21″}）。

22、flash和ajax的区别？

• flash适合处理多媒体、矢量图形、访问机器；对css、处理文本上不足，不容易被搜索。
• ajax对css、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。
• 共同点：与服务器的无刷新传递消息、可以检测用户离线和在线状态、操作DOM。

23、ajax请求时get和post的区别？

1. get在url后面，post在虚拟载体内。
2. get有大小限制。
3. get没有post安全。
4. 应用不同，一个是论坛等只需要请求，一个是类似修改密码的。

24、jsonp和ajax的区别？

• jsonp是动态创建script标签，回调函数。
• ajax是页面无刷新请求数据操作。

25、ajax的工作原理？

1. 创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）。
2. 判断数据传输方式(get/post)。
3. 打开连接（open()）。
4. 发送send()。
5. 等待响应（onreadystatechange）
6. 判断响应状态status（200-300之间或者304(缓存)执行回调函数）。

　　原理：Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

26、XML和JSON的区别？

1. json数据的体积小，传递速度更快。
2. json与JavaScript交互更加方便，更加容易解析处理，更好的数据交互。
3. json对数据的描述性比XML较差。
4. json的速度要远远快于xml。

27、解释一下同源策略？

• 概念：同源策略是客户端脚本（尤其是JavaScript）的重要安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
• 同源策略是指：协议、端口、域名相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

28、为什么会有同源策略？

• 我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。
• 一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
• http,ftp:协议
• 主机名；localhost
• 端口名：80:http协议的默认端口
• https:默认端口是8083
• 同源策略带来的麻烦：ajax在不同域名下的请求无法实现，
• 如果说想要请求其他来源的js文件，或者json数据，那么可以通过jsonp来解决

29、Ajax的最大的特点是什么。

• Ajax可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；

30、解释jsonp的原理，以及为什么不是真正的ajax？

• Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术。

31、什么是Ajax和JSON，它们的优缺点。

• Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新。
• 优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
• 缺点：对搜索引擎不友好；要实现ajax下的前后退功能成本较大；可能造成请求数的增加跨域问题限制；
• JSON是一种轻量级的数据交换格式，ECMA的一个子集
• 优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

32、页面编码和被请求的资源编码如果不一致如何处理？

• 对于ajax请求传递的参数，如果是get请求方式，参数如果传递中文，在有些浏览器会乱码，不同的浏览器对参数编码的处理方式不同，所以对于get请求的参数需要使用encodeURIComponent函数对参数进行编码处理，后台开发语言都有相应的解码api。对于post请求不需要进行编码。

本文章出自小小菜鸟学web，转载请注明