Ajax面试题汇总 #

1、Ajax 是什么? 如何创建一个 Ajax？ #

Ajax 全称是 asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步交互，实现页面的局部刷新。

基本步骤 4 步走：（创建对象、建立连接、发送数据、接收数据）

// 1、要创建一个XMLHttpRequest 对象
var xhr = new XMLHttpRequest()

// 2、建立连接
xhr.open("type 提交方式", "url  提交的地址")
// 设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

// 3、发送数据、get请求发送空，post请求则传递实际数据
xhr.send()

// 4、接收服务器的数据
xhr.onreadystatechange=function(){
  if(xhr.readyState == 4){ // 响应完成了
    if(xhr.status == 200){ // 响应成功了
      // xhr.responseText 属性接收服务端返回的数据
    }
  }
}

2、同步和异步的区别? #

同步：阻塞的；异步：非阻塞的。

3、如何解决跨域问题? #

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域

1. jsonp ，允许 script 加载第三方资源
2. 反向代理（nginx 服务内部配置 Access-Control-Allow-Origin *）
3. cors 前后端协作设置请求头部，Access-Control-Allow-Origin 等头部信息
4. iframe 嵌套通讯，postmessage

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

get 请求中的中文需要 encodeURIComponent 编码处理，post 请求不需要进行编码

5、阐述一下异步加载 JS #

1. 异步加载的方案： 动态插入 script 标签
2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe，让它异步执行 js

5、请解释一下 JavaScript 的同源策略 #

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

6、GET 和 POST 的区别，何时使用 POST？ #

• GET：一般用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，一般在 2000 个字符，有的浏览器是 8000 个字符
• POST：一般用于修改服务器上的资源，对所发送的信息没有限制

在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

7、ajax 的优点 #

1. 页面无刷新更新数据：Ajax最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验；
2. 异步与服务器通信：Ajax使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量；
3. 前端和后端负载平衡：Ajax可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能；
4. 基于标准被广泛支持：Ajax基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能；
5. 界面与应用分离：Ajax使Web中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

8、Ajax 的最大的特点是什么？ #

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

9、ajax 的缺点 #

1. Ajax干掉了Back和History功能，即对浏览器机制的破坏：在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现的 ，后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题；
2. Ajax的安全问题：Ajax技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等；
3. 对搜索引擎支持较弱：对搜索引擎的支持比较弱。如果使用不当，Ajax会增大网络数据的流量，从而降低整个系统的性能；
4. 破坏程序的异常处理机制：至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的；
5. 违背URL和资源定位的初衷：我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的；
6. Ajax不能很好支持移动设备：一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax；
7. 客户端过肥，太多客户端代码造成开发上的成本：编写复杂、容易出错；冗余代码比较多（层层包含js文件是Ajax的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准；
8. 如果用户禁用了JS，网站就取不到数据。

10、解释 jsonp 的原理，以及为什么不是真正的 ajax, 以及优缺点 #

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

优点：

完美解决在测试或者开发中获取不同域下的数据, 用户传递一个 callback 参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。简单来说数据的格式没有发生很大变化

缺点：

• jsonp 只支持 get 请求而不支持 post 请求, 也即是说如果想传给后台一个 json 格式的数据, 此时问题就来了, 浏览器会报一个 http 状态码 415 错误, 告诉你请求格式不正确, 这让我很蛋疼(在登录注册中需要给后台传一大串数据), 如果都用参数的形式拼接在 url 后面的话不太现实, 后台取值也会显得繁琐,
• 在登录模块中需要用到 session 来判断当前用户的登录状态, 这时候由于是跨域的原因, 前后台的取到的 session 是不一样的, 那么就不能就行 session 来判断.
• 由于 jsonp 存在安全性问题(不知 qq 空间的跨域是怎么解决的, 还是另有高招?)，后来考虑到上面的一系列问题, 采用的是后台进行设置允许跨域请求(但还是存在缺陷的, 实质上还是跨域, 如上面说的 session 问题). Header set Access-Control-Allow-Origin *为了防止 XSS 攻击我们的服务器， 我们可以限制域，比如 Access-Control-Allow-Origin: http://blog.csdn.net

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

Ajax 是全称是 asynchronous JavaScript andXML，即异步 JavaScript 和 xml，用于在 Web 页面中实现异步数据交互，实现页面局部刷新。

• 优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用户不断刷新或者跳转页面，提高用户体验
• 缺点：对搜索引擎不友好；要实现 ajax 下的前后退功能成本较大；可能造成请求数的增加跨域问题限制；

JSON 是一种轻量级的数据交换格式，ECMA 的一个子集

• 优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

12、什么是 json，优缺点 #

JSON (JavaScript Object Notation)是一种轻量级的数据交换格式，ECMA 的一个子集

优点：

• 数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小
• 易于解析这种语言, 客户端 javascript 可以简单的通过 eval()进行 JSON 数据的读取搜索
• 支持多种语言, 包括 ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, php, Python, Ruby 等语言服务器端语言, 便于服务器端的解析
• 在 PHP 世界, 已经有 PHP-JSON 和 JSON-PHP 出现了, 便于 PHP 序列化后的程序直接调用. PHP 服务器端的对象、数组等能够直接生 JSON 格式, 便于客户端的访问提取. 另外 PHP 的 PEAR 类已经提出了支持 (http://pear.php.net/pepr/pepr-proposal-show.php?id=198)
• 因为 JSON 格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护

缺点：

• 没有 XML 格式这么推广的深入人心和使用广泛, 没有 XML 那么通用性
• JSON 格式目前在 Web Service 中推广还属于初级阶段 PS: 据说 Google 的 Ajax 是使用 JSON+模板 做的

13、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ #

1. 浏览器地址栏输入 url
2. 浏览器会先查看浏览器缓存--系统缓存--路由缓存，如有存在缓存，就直接显示。如果没有，接着第三步
3. 域名解析（DNS）获取相应的 ip
4. 浏览器向服务器发起 tcp 连接，与浏览器建立 tcp 三次握手
5. 握手成功，浏览器向服务器发送 http 请求，请求数据包
6. 服务器请求数据，将数据返回到浏览器
7. 浏览器接收响应，读取页面内容，解析 html 源码，生成 DOM 树
8. 解析 css 样式. 浏览器渲染，js 交互绑定多个域名，数量不限；

14、XML 和 JSON 的区别？ #

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

15、同步加载、异步加载、延迟加载、预加载的区别 #

同步加载 #

平常默认用的都是同步加载。如：<script src="http://yourdomain.com/script.js"></script>同步模式又称阻塞模式，会阻止浏览器的后续处理，停止了后续的文件的解析，执行，如图像的渲染。流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来

异步加载 #

(function() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'http://yourdomain.com/script.js';
  var x = document.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);
})();

异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。 在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了。

同步加载流程是瀑布模型，异步加载流程是并发模型。

延迟加载（lazy loading） #

前面解决了异步加载（async loading）问题，再谈谈什么是延迟加载。 延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。 也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。 特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。 就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片

预加载 #

预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现。

16、HTTP 状态码 #

• 100 ? Continue ? 继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息
• 200 ? OK ? 正常返回信息
• 201 ? Created ? 请求成功并且服务器创建了新的资源
• 202 ? Accepted ? 服务器已接受请求，但尚未处理
• 301 ? Moved Permanently ? 请求的网页已永久移动到新位置。
• 302 Found ? 临时性重定向。
• 303 See Other ? 临时性重定向，且总是使用 GET 请求新的 URI。
• 304 ? Not Modified ? 自从上次请求后，请求的网页未修改过。
• 400 Bad Request ? 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
• 401 Unauthorized ? 请求未授权。
• 403 Forbidden ? 禁止访问。
• 404 Not Found ? 找不到如何与 URI 相匹配的资源。
• 500 Internal Server Error ? 最常见的服务器端错误。
• 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

17、ajax 加载的页面，跳转到另外一个页面再跳转回来，内容相同，如何节约读取请求? #

后台做缓存，读取缓存里面的数据、CDN

18、Ajax 实现的原理 #

浏览器提供的 XMLHttpRequest 对象

19、ajax 如何实现，readyState 的五种状态的含义？ #

• 0：（未初始化）还没有调用 send()方法
  此阶段确认 XMLHttpRequest 对象是否创建，并为调用 open()方法进行未初始化作好准备。值为 0 表示对象已经存在，否则浏览器会报错－－对象不存在。
• 1：（载入）已调用 send()方法，正在发送请求
  此阶段对 XMLHttpRequest 对象进行初始化，即调用 open()方法，根据参数(method, url, true)完成对象状态的设置。并调用 send()方法开始向服务端发送请求。值为 1 表示正在向服务端发送请求。
• 2：（载入完成）send()方法执行完成，已经接收到全部响应内容
  此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为 2 表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
• 3：（交互）正在解析响应内容
  此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的 MIME 类型把数据转换成能通过 responseBody、responseText 或 responseXML 属性存取的格式，为在客户端调用作好准备。状态 3 表示正在解析数据。
• 4：（完成）响应内容解析完成，可以在客户端调用了
  此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为 4 表示数据解析完毕，可以通过 XMLHttpRequest 对象的相应属性取得数据。

20、什么是RESTful？ #

REST 指的是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是 RESTful。

• GET
  get 方法在 Rest 中主要用于获取资源，能够发送参数，不过有限制，且参数都会以? 开头的形 式附加在 URL 尾部。 规范的 get 方法处理器应该是幂等的，也就是说对一个资源不论发送多少次 get 请求都不会更改数据或造成破坏。
• POST
  post 方法在 Rest 请求中主要用于添加资源，参数信息存放在请求报文的消息体中相对安全，且可发送较大信息
• PUT
  put 方法在 Rest 中主要用于更新资源，因为大多数浏览器不支持 put 和 delete，会自动将 put 和 delete 请求转化为 get 和 post. 因此为了使用 put 和 delete 方法, 需要以 post 发送请求，在表单中使用隐藏域发送真正的请求。 put 方法的参数是同 post 一样是存放在消息中的，同样具有安全性，可发送较大信息。 put 方法是幂等的，对同一 URL 资源做出的同一数据的任意次 put 请求其对数据的改变都是一致的。
• DELETE
  Delete 在 Rest 请求中主要用于删除资源，因为大多数浏览器不支持 put 和 delete，会自动将 put 和 delete 请求转化为 get 和 post。 因此为了使用 put 和 delete 方法, 需要以 post 发送请求，在表单中使用隐藏域发送真正的请求。 Delete 方法的参数同 post 一样存放在消息体中, 具有安全性，可发送较大信息 Delete 方法是幂等的，不论对同一个资源进行多少次 delete 请求都不会破坏数据

21、Ajax 和 Fetch 区别 #

• ajax 是使用 XMLHttpRequest 对象发起的，但是用起来很麻烦，所以 ES6 新规范就有了 fetch，fetch 发一个请求不用像 ajax 那样写一大堆代码。
• 使用 fetch 无法取消一个请求，这是因为 fetch 基于 Promise，而 Promise 无法做到这一点。
• 在默认情况下，fetch 不会接受或者发送 cookies
• fetch 没有办法原生监测请求的进度，而 XMLHttpRequest 可以
• fetch 只对网络请求报错，对 400，500 都当做成功的请求，需要封装去处理
• fetch 由于是 ES6 规范，兼容性上比不上 XMLHttpRequest

22、ajax是同步还是异步？ #

可以同步也可以异步，jquery默认为异步，也推荐异步执行。可通过async: true修改。