前端面试题总结(Ajax部分)

六、Ajax
1、Ajax是什么?如何创建一个 Ajax？
2、同步和异步的区别?
3、如何解决跨域问题?
4、页面编码和被请求的资源编码如果不一致如何处理？
5、简述 ajax 的过程。
6、阐述一下异步加载。
7、请解释一下 JavaScript 的同源策略。
8、GET 和 POST 的区别，何时使用 POST？
9、ajax是什么?ajax的交互模型?同步和异步的区别?如何解决跨域问题?
10、 Ajax 的最大的特点是什么。
11、ajax 的缺点
12、ajax 请求的时候 get 和 post 方式的区别
13、解释 jsonp 的原理，以及为什么不是真正的 ajax
14、什么是 Ajax 和 JSON，它们的优缺点。
15、http 常见的状态码有那些？分别代表是什么意思？
16、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
17、ajax 请求的时候 get 和 post 方式的区别
18、ajax 请求时，如何解释 json 数据
19、.javascript 的本地对象，内置对象和宿主对象
20、为什么利用多个域名来存储网站资源会更有效？
21、请说出三种减低页面加载时间的方法
22、HTTP 状态码都有那些。

六、 Ajax
1 、Ajax 是什么? ? 如何创建一个 Ajax ？
Ajax 并不算是一种新的技术，全称是 asynchronousjavascript and xml，可以说是已
有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，早
期的浏览器并不能原生支持 ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后
来的浏览器提供了对 ajax 的原生支持
使用ajax原生方式发送请求主要通过 XMLHttpRequest( 标准浏览器 ) 、
ActiveXObject(IE 浏览器)对象实现异步通信效果
基本步骤：

var xhr =null;//创建对象
if(window.XMLHttpRequest){
xhr= new XMLHttpRequest();
}else{
xhr= new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(“方式”,”地址”,”标志位”);//初始化请求
xhr.setRequestHeader(“”,””);//设置 http头信息
xhr.onreadystatechange=function(){}//指定回调函数
xhr.send();//发送请求

js 框架（jQuery/EXTJS 等）提供的 ajax API 对原生的 ajax 进行了封装，熟悉了基础
理论，再学习别的框架就会得心应手，好多都是换汤不换药的内容
2 、同步和异步的区别? ?
同步：阻塞的
-张三叫李四去吃饭，李四一直忙得不停，张三一直等着，直到李四忙完两个人一块去吃饭
=浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返
回数据，浏览器才能显示页面
异步：非阻塞的
-张三叫李四去吃饭，李四在忙，张三说了一声然后自己就去吃饭了，李四忙完后自己去吃
=浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），
服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，局部更新
3 、如何解决跨域问题? ?
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容，所以
基于这一点，可以动态创建 script 标签，使用标签的 src 属性访问 js 文件的形式获取js
脚本，并且这个 js 脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为
了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的
数据，这就是解决跨域问题的主流解决方案
4 、页面编码和被请求的资源编码如果不一致如何处理？
对于 ajax 请求传递的参数，如果是 get 请求方式，参数如果传递中文，在有些浏览器
会乱码，不同的浏览器对参数编码的处理方式不同，所以对于 get 请求的参数需要使用
encodeURIComponent 函数对参数进行编码处理，后台开发语言都有相应的解码 api。对于 post 请求不需要
进行编码
5 、简述 x ajax 的过程。

创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
创建一个新的 HTTP请求,并指定该 HTTP 请求的方法、URL 及验证信息
设置响应 HTTP请求状态变化的函数
发送 HTTP请求
获取异步调用返回的数据
使用 JavaScript 和 DOM实现局部刷新
6 、阐述一下异步加载。
异步加载的方案：动态插入 script标签
通过ajax 去获取js 代码，然后通过 eval 执行
script 标签上添加 defer 或者async 属性
创建并插入 iframe，让它异步执行 js
7、请解释一下 JavaScript 的同源策略。
同源策略是客户端脚本（尤其是 Javascript）的重要的安全度量标准。它最早出自
Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的
是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源
的窗口和文档的属性。
8 、 GET和POST 的区别，何时使用POST ？
GET：一般用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，一般在
2000 个字符，有的浏览器是 8000 个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制
在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
9 、ajax是什么?ajax的交互模型? 同步和异步的区别? ?如何解决跨域问题 ?
1.通过异步模式，提升了用户体验
2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
Ajax 在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下
的服务器负载。
10、Ajax 的最大的特点是什么。
Ajax 可以实现异步通信效果，实现页面局部刷新，带来更好的用户体验；按需获取数
据，节约带宽资源；
11 、ajax 的缺点
1、ajax 不支持浏览器 back 按钮。
2、安全问题 AJAX 暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
12 、ajax 请求的时候 get 和post 方式的区别
get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中，
如果传递中文参数，需要自己进行编码操作，安全性较低。
post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http
请求体中，数据不会暴漏在 url地址中。
13 、解释 jsonp 的原理，以及为什么不是真正的 ajax
Jsonp 并不是一种数据格式，而 json 是一种数据格式，jsonp 是用来解决跨域获取数据
的一种解决方案，具体是通过动态创建 script 标签，然后通过标签的 src 属性获取 js 文件
中的 js 脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些
返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是 ajax 技术
14 、什么是 Ajax 和JSON ，它们的优缺点。
Ajax 是全称是 asynchronous JavaScript andXML，即异步 JavaScript 和 xml，用于在
Web 页面中实现异步数据交互，实现页面局部刷新。
优点：可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量，避免用
户不断刷新或者跳转页面，提高用户体验
缺点：对搜索引擎不友好；要实现 ajax 下的前后退功能成本较大；可能造成请求数的
增加跨域问题限制；
JSON 是一种轻量级的数据交换格式，ECMA 的一个子集
优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类
型（数组、对象、字符串、数字）
15 、p http 常见的状态码有那些？分别代表是什么意思？
200- 请求成功
301- 资源（网页等）被永久转移到其它 URL
404- 请求的资源（网页等）不存在
500- 内部服务器错误
16入、一个页面从输入 L URL 到页面加载显示完成，这个过程中都发生了什么？
分为 4 个步骤：
当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源
的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS
查询。这能使浏览器获得请求对应的 IP地址。
浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包
括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间
传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由
客户端发出该请求已经被接受的报文。
一旦TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远
程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正
确的响应。
此时，Web 服务器提供资源服务，客户端开始下载资源。
17 、ajax 请求的时候 get和post 方式的区别
get 一般用来进行查询操作，url 地址有长度限制，请求的参数都暴露在 url 地址当中，
如果传递中文参数，需要自己进行编码操作，安全性较低。
post 请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于 http请求体中，数据不会暴漏在 url地址中。
18 、ajax 请求时，如何解释 n json 数据
使用 eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用 JSON.parse()更靠谱，对
数据的安全性更好。
19 、javascript 的本地对象，内置对象和宿主对象
本地对象为独立于宿主环境的 ECMAScript 提供的对象，包括 Array Object RegExp 等
可以 new实例化的对象
内置对象为 Gload，Math等不可以实例化的(他们也是本地对象，内置对象是本地对象
的一个子集)
宿主对象为所有的非本地对象，所有的 BOM 和 DOM 对象都是宿主对象，如浏览器自带的
document,window等对象
20 、为什么利用多个域名来存储网站资源会更有效？
确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他郁
闷访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。
21 、请说出三种减低页面加载时间的方法
1、压缩 css、js 文件
2、合并 js、css 文件，减少 http 请求
3、外部 js、css 文件放在最底下
4、减少 dom 操作，尽可能用变量替代不必要的 dom 操作
22 、HTTP 状态码都有那些。
200OK //客户端请求成功
400BadRequest //客户端请求有语法错误，不能被服务器所理解
403Forbidden //服务器收到请求，但是拒绝提供服务
404NotFound //请求资源不存在，输入了错误的 URL
500Internal ServerError //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

前端面试题总结(Ajax部分)相关推荐

前端面试题（AJAX）
AJAX 1,Ajax 是什么? 如何创建一个Ajax? ajax的全称:Asynchronous Javascript And XML.异步传输+js+xml. 所谓异步,在这里简单地解释就是:向服 ...
addeventlistener不支持ajax_十万个Web前端面试题之AJAX、axios、fetch的区别
来自灵魂的拷问你知道AJAX.axios.fetch的区别吗? 小白回答 AJAX用来请求数据的吧,另外axios和fetch是啥? 老鸟回答 AJAX Gmail开发人员发现IE里面有个XMLHT ...
前端面试题整理（定期更新）
前言因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
Web前端面试题集锦
Web前端面试题集锦前端开发面试知识点大纲: 注意转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...
array 前端面试题_web前端开发面试题汇总
前端面试题汇总第一部分HTML&CSS 1. 浏览器分类浏览器:IE,Chrome,FireFox,Safari,Opera. 内核:Trident,Gecko,Presto,Webkit ...
前端周报：前端面试题及答案总结；JavaScript参数传递的深入理解
1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...
【前端】前端面试题整理
前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离关于浏览器内核(渲染引擎) 浏览 ...
前端面试题汇总（jQuery）
前端面试题汇总(jQuery) 1 你觉得jQuery或zepto源码有哪些写的好的地⽅ jquery源码封装在⼀个匿名函数的⾃执⾏环境中,有助于防⽌变量的全局污染,然后通过传⼊window对象参数, ...
前端面试题汇总（JS 基础篇）
前端面试题汇总(JS 基础篇)** 1.javascript 的 typeof 返回哪些数据类型** object number function boolean underfind stringty ...

前端面试题总结(Ajax部分)

前端面试题总结(Ajax部分)相关推荐

最新文章

热门文章