刷面试题总结之关于Ajax

1、Ajax是什么？它最大的特点是？优缺点？

• Ajax即异步JavaScript和xml，主要用来实现客户端和服务器端的异步数据交互，实现页面的局部刷新。早期浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持。
• Ajax的最大的特点和优点：Ajax可以实现异步通信效果，实现页面局部刷新，避免用户不断刷新或者跳转页面，带来更好的用户体验；按需获取数据，节约带宽资源。
• Ajax的缺点：

        1、Ajax不支持浏览器back按钮；

        2、安全问题，Ajax暴露了与服务器交互的细节，诸如跨站点脚步攻击、SQL注入攻击；

        3、对搜索引擎的支持比较弱；

        4、Ajax不能很好支持移动设备。

2、如何创建一个Ajax？简述ajax的过程。ajax的交互模型？

• 1、创建XMLHttpRequest对象，也就是创建一个异步调用对象。
• 2、创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息（即请求报文行）

        xhr.open('get'，'5-register-get.php?name='+name);

• 3、设置请求报文头（Content-Type：请求资源的MIME类型）

        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');//get方式不需要

• 4、设置响应HTTP请求状态变化的函数
• 5、发送HTTP请求

        xhr.send(null);

• 6、获取异步调用返回的数据
• 7、使用JavaScript和DOM实现局部刷新

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

分为4个步骤：

• 1、当发送一个URL请求时（可能是Web页面还是Web页面上每个资源的URL），浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询，这能使浏览器获得请求对应的IP地址。
• 2、浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接，该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出已经被接受的请求报文。
• 3、一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求，远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
• 4、此时，Web服务器提供资源服务，客户端开始下载资源。

4、ajax请求时，如何解释json数据

• 使用eval()或者JSON.parse()。鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。

5、同步和异步的区别？

• 同步：阻塞的。张三叫李四去吃饭，李四一直忙个不停，张三一直等着，直到李四忙完两个一块去吃饭 = 浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示页面。
• 异步：非阻塞的。张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃 = 浏览器向服务器请求数据，服务器比较忙，浏览器可以自如干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新。

6、阐述一些异步加载。

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

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

• GET：一般用于信息获取，使用URL传递参数，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符。
• POST：提交的数据内容存在于http请求体中，数据不会暴露在url地址中，一般用于修改服务器上的资源，对所发送的信息没有限制。
• 在以下情况下，请使用POST请求：

        1、无法使用缓存文件（更新服务器上的文件或数据库）

        2、向服务器发送大量数据（POST没有数据量限制）

        3、发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

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

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

9、如何解决跨域问题？

• 理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域。
• 出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式，获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据。为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案。

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

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

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

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

12、为什么利用多个域名来存储网站资源会更有效？

• 确保用户在不同地区能用最快的速度打开网站；如果某个域名崩溃，用户也能通过域名访问网站；并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。

13、请说出三种减少页面加载时间的方法

• 1、减少http请求（合并文件，合并图片）
• 2、压缩css、js文件

       一般js、css文件中存在大量的空格、换行、注释，这些利于阅读，如果能够压缩掉，将会很有利于网络传输，这个压缩比率还是比较高的，一般都有百分之五十左右。这个代码压缩对于网页的加载还是很有用的。

• 3、外部js、css文件放在最底下

网页文件的载入是从上到下加载的，很多JavaScript脚本执行效率较低，或者在网页前面都不需要执行的，如果将这些脚本放置到页面比较靠前的位置，可能导致网站内容载入速度下降或加载不了，将这些脚本放置在网页文件末尾。一定要放置在前面的脚本要改用所谓的"后载入"方式加载，在主体网页加载完成后再加载，防止其影响到主体网页的加载速度。

• 4、减少dom操作，尽可能用变量替代不必要的dom操作
• 5、网址后加斜杠（如www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。）

14、JSON的优缺点

• JSON是一种轻量级的数据交换格式，ECMA的一个子集。
• 优点：

        1、轻量级、易于人的阅读和编写，json代码的良好结构，可以很直观地了解存的是什么内容。

        2、方便转换。有很多的json api提供了json字符串转成对象，对象转换成json串的方法。

        3、便于机器（javascript）解析。

        4、支持复合数据类型（数组、对象、字符串、数字）。

        5、方便于传输，较少冗余的字符。

• 缺点：

        1、没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性。

        2、JSON格式目前在Web Service中推广还属于初级阶段。

15、HTTP状态码有哪些？分别代表是什么意思？

• 100-199 用于指定客户端相应的某些动作
• 200-299 用于表示请求成功
• 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
• 400-499 用于指出客户端的错误
• 401 当前请求需要用户验证
• 403 服务器已经理解请求，但是拒绝执行它
• 500-599 用于支持服务器错误
• 503 服务不可用
• 200 OK //客户端请求成功
• 301 //资源（网页等）被永久转移到其它URL
• 400 Bad Request //客户端请求有语法错误，不能被服务器所理解
• 403 Forbidden //服务器收到请求，但是拒绝提供服务
• 404 Not Found //请求资源不存在，输入了错误的URL
• 500 Internal Server Error //内部服务器发生了不可预期的错误
• 503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

16、jq中ajax请求的步骤？怎么解决跨域的？

$.ajax({

Type:"get/post",

Url:"",

dataType:"jsonp",

Data:{},

Async:false//默认true异步，false同步

cache:false//默认true缓存，false不缓存

beforeSend:function(){},

Success:function(){},

Error:function(){}

})

17、get和post的区别？

• 客户端对服务器的请求类型主要有四种：

       GET（从服务器获取）

       POST（向服务器发送请求数据）

       PUT（更新）

       DELETE（删除）

• POST和GET区别：

       GET所有参数全部包装在URL中，明文显示，且服务器的访问日志会记录，非常不安全。

       POST的URL中只有资源路径，不包含参数，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全。所有         涉及用户隐私的数据都要用POST传输。

• GET：不同的浏览器和服务器不同，一般限制在2~8K之间，更加常见的是1k以内。
• POST：提交的数据比较大，大小靠服务器的设定值限制，PHP默认是2M。

18、ajax出现错误怎么调试？

JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错，可以通过捕捉error事件来获取出错的信息。

发送error可能有下面两种情况引起的，或者其它程序问题，需要我们认真仔细。

• 1、data："{}"，data为空也一定要传"{}"；不然返回的是xml格式的，并提示parsererror。
• 2、parsererror的异常和Header类型也有关系。及编码header（'Content-type:text/html;charset=utf-8'）；

19、json字符串和json对象怎么相互转化？

• JSON.parse()从一个字符串中解析出json对象
• JSON.stringify()从一个对象中解析出字符串

20、跨域的几种解决方式

• 1、通过jsonp跨域
• 2、通过修改document.domain来跨子域
• 3、使用window.name来进行跨域
• 4、使用HTML5中新引进的window.postMessage方法来跨域传送数据
• 5、CORS

核心思想：在服务器端通过检查请求头部的origin，从而决定请求应该成功还是失败。具体的方法是在服务端设置Response Header响应头中的Access-Control-Allow-Origin为对应的域名，实现了CORS（跨域资源共享），这里出于在安全性的考虑就是尽量不要用*，但对于一些不重要的数据则随意。

21、同源策略

• 1、同源，就是指两个页面具有相同的协议，主机（域名），端口，浏览器会对不同源的脚本或者文本的访问方式进行的限制。
• 2、页面中的链接，重定向以及表单提交不会受到同源策略的限制，允许跨域资源嵌入。

22、ajax的缺点（答出三点即可）

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

23、简述AJAX的交互模型，以及同步和异步的区别

• AJAX主要用于实现从服务器获取数据并局部刷新页面。其交互模型为，AJAX在浏览器引入一个执行引擎，它一边接收user请求，一边传送数据给服务器，并把服务器端返回的结果展现给user。
• 同步：脚本会停留并等待服务器发送回复然后继续。
• 异步：脚本不停留并处理可能的回复。

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

• open(”method“，”URL“)：建立对服务器的调用，第一个参数是HTTP请求方式（可以为GET，POST或任何服务器所支持的您想调用的方式），第二个参数是请求页面的URL；
• send()方法：发送具体请求；
• abort()方法：停止当前请求；
• readyState属性：请求的状态，有5个可取值

       （0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成）

• responseText 属性：服务器的响应，表示为一个串；
• responseXML属性：服务器的响应，表示为XML；
• status属性：服务器的HTTP状态码。

25、请写出5种常见的http状态码以及代表的意义

• 5种常见的http状态码以及代表的意义如下：

       200（OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。

       303（See Other）：告知客户端使用另一个URL来获取资源。

       400（Bad Request）：请求格式错误。

       1）语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求；

       2）请求参数有误。

       404（Not Found）：请求失败，请求所希望得到的资源未被服务器上发现。

       500（Internal Server Error）：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。

26、jsonp的原理？

就是利用<script>标签的src属性没有跨域限制的”漏洞“来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如：<script src=”http://www.example.net/api?paraml=1&param2=2“></script>，并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。

第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如：callback（{”name“:”hax“,”gender“:”Male“}）

这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

27、请尽可能详尽的解释ajax的工作原理

思路：先解释异步，再解释ajax如何使用

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。简单来说是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

28、Flash、Ajax各自的优缺点，在使用种如何取舍？

• Flax和Ajax对比

       Flash适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。

       Ajax对CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。

• 共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM。

29、异步加载

• 方案一：<script>标签的async="async"属性
• 方案二：<script>标签的defer="defer"属性
• 方案三：动态创建<script>标签
• 方案四：AJAX eval（使用AJAX得到脚本内容，然后通过eval_r（xmlhttp.responseText）来运行脚本）
• 方案五：iframe方式

30、ajax请求时，如何解释json数据

使用eval()或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。