1、什么是Ajac,Ajax有什么优点和缺点?
Ajax是“Asynchronous JavaScript and XML”的缩写。通过XmlHTTPRequest对象来向服务器发异步请求,从服务器获得数据。
优点:1、页面无刷新
2、异步方式与服务器通信
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,Ajax 的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
缺点:1、Ajax 不支持浏览器 back 按钮。
2、安全问题 Ajax 暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
2、请介绍一下 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
3、Ajax 的实现流程是怎样的?
1、创建 XMLHTTPRequest 对象,也就是创建一个异步调用对象.
2、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息.
3、设置响应 HTTP 请求状态变化的函数.
4、发送 HTTP 请求.
5、获取异步调用返回的数据.
6、使用 JavaScript 和 DOM 实现局部刷新.
<script type="text/javascript">
var HTTPRequest;
function checkUsername() {
//创建 XMLHTTPRequest 对象
if(window.XMLHTTPRequest) {
//在 IE6 以上的版本以及其他内核的浏览器(Mozilla)等
HTTPRequest = new XMLHTTPRequest();
}else if(window.ActiveXObject) {
//在 IE6 以下的版本
HTTPRequest = new ActiveXObject();
}
//创建 HTTP 请求
HTTPRequest.open("POST", "Servlet1", true);
//因为我使用的是 post 方式,所以需要设置消息头
HTTPRequest.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
//指定回调函数
HTTPRequest.onreadystatechange = response22;
//得到文本框的数据
var name = document.getElementById("username").value;
//发送 HTTP 请求,把要检测的用户名传递进去
HTTPRequest.send("username=" + name);
}
//接收服务器响应数据
function response22() {
//判断请求状态码是否是 4【数据接收完成】
if(HTTPRequest.readyState==4) {
//再判断状态码是否为 200【200 是成功的】
if(HTTPRequest.status==200) {
//得到服务端返回的文本数据
var text = HTTPRequest.responseText;
//把服务端返回的数据写在 div 上
var div = document.getElementById("result");
div.innerText = text;
}
}
}
</script>
4、Ajax 接收到的数据类型有哪些,数据如何处理?
接收到的数据类型
String / JSON 字符串 / 二进制数据流
JSON 字符串反序列化后, 转成引用类型使用
String 直接使用
前端用 Blob 转换
如何处理数据
1、字符串转对象
第一种方式:eval();
var data='{"student" : [{"name":" 张 三 ","age":"11"} , {"name":" 李 四
","age":"11"},{"name":"王五","age":"11"}]}’;
eval(’(“+data+”)’);
第二种方式:JSON.parse();
var data='{"student" : [{"name":" 张 三 ","age":"11"} , {"name":" 李 四
","age":"11"},{"name":"王五","age":"11"}]}’;
JSON.parse(data);
parse()与 eval()区别
eval()方法不会去检查给的字符串时候符合 json 的格式~同时如果给的字符串中存在 js
代 码 eval()也会一并执行~比如:
var data='{"student" : [{"name":" 张 三 ","age":"11"} , {"name":" 李 四
","age":"alert(11)"},{"name":"王五","age":"11"}]}’;
此时执行 eval 方法后会先弹出一个提示框输出 11 的字符串;这时候使用 JSON.parse()就会报错,显示错误信息为当前字符串不符合 json 格式;即
JSON.parse()方法会检查需要转换的字符串是否符合 json 格式
相比而言 eval()方法是很不安全,特别是当涉及到第三方时我们需要确保传给 eval()
的参数是我们可以控制的,不然里面插入比如 window.location~指向一个恶意的连接总的来说,
还是推荐使用 JSON.parse()来实现 json 格式字符串的解析
5、Ajax 注意事项及适用和不适用场景
Ajax 开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应,没有恰当的预读数据,或者对 XMLHTTPRequest 的不恰当处理,都会使用户感到延迟,这是用户不希望看到的,也是他们无法理解的。通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
Ajax 适用场景
1、表单驱动的交互
2、深层次的树的导航
3、快速的用户与用户间的交流响应
4、类似投票、yes/no 等无关痛痒的场景
5、对数据进行过滤和操纵相关数据的场景
6、普通的文本输入提示和自动完成的场景
Ajax 不适用场景
1、部分简单的表单
2、搜索
3、基本的导航
4、替换大量的文本
5、对呈现的操纵
6、HTTP 与 HTTPS 的区别
1、HTTPS 协议需要到 CA (Certificate Authority,证书颁发机构)申请证书,一般免
费证书较少,因而需要一定费用。(以前网易官网是 HTTP,而网易邮箱是 HTTPS 。
2、HTTP 是超文本传输协议,信息是明文传输,HTTPS 则是具有安全性的 SSL 加密传输协
议
3、HTTP 和 HTTPS 使用的是完全不同的连接方式,用的端口也不一样,前者是 80,后者
是 443
4、HTTP 的连接很简单,是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密
传输、身份认证的网络协议,比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输
和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
7、常见的 HTTP 状态码以及代表的意义
100 => 正在初始化(一般是看不到的)
101 => 正在切换协议(websocket 浏览器提供的)
202 => 表示接受
301 => 永久重定向/永久转移
302 => 临时重定向/临时转移(一般用来做服务器负载均衡)
303 => 该状态码表示由于请求对应的资源存在着另一个URI,应使用GET方法定向获取请求的资源, 303和302状态码有着相同的功能,但是303明确表示客户端应当采用get方法获取资源,这点与302状态码有区别。
比如,当使用post方法访问CGI程序,其执行后的处理结果为希望客户端能以get方法重定向到另一个uri上去时,返回303状态码。虽然302也可实现相同的功能,但这里使用302状态码是最理想的。
304 => 本次获取的内容是读取缓存中的数据,会每次去服务器校验
401 => 未认证,没有登录网站
403 => 禁止访问,没有权限
502 => 充当网关或代理的服务器,从远端服务器接收到了一个无效的请求
503 => 服务器超负荷(假设一台服务器只能承受 10000 人,当第 10001 人访问的时候,如果服务器没有做负载均衡,那么这个人的网络状态码就是 503)
505 => 服务器不支持请求的 HTTP 协议的版本,无法完成处理。
8、为什么会有跨域的问题出现,如何解决跨域问题
什么是跨域
指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对javascript 施加的安全限制,防止他人恶意攻击网站.比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。
解决方式
1、jsonp
原理:动态创建一个 script 标签。利用 script 标签的 src 属性不受同源策略限制。因为
所有的 src 属性和 href 属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤
1、去创建一个 script 标签
2、script 的 src 属性设置接口地址
3、接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
4、通过定义函数名去接收后台返回数据
//去创建一个 script 标签
var script = document.createElement("script");
//script 的 src 属性设置接口地址 并带一个 callback 回调函数名称
script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据 function jsonpCallback(data){
//注意 jsonp 返回的数据是 json 对象可以直接使用
//Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。
}
2、 CORS:跨域资源共享
原理:服务器设置 Access-Control-Allow-OriginHTTP 响应头之后,浏览器将会允许跨域请求
限制:浏览器需要支持 HTML5,可以支持 POST,PUT 等方法兼容 ie9 以上需要后台设置
Access-Control-Allow-Origin: * //允许所有域名访问,或者
Access-Control-Allow-Origin: a.com //只允许所有域名访问
3、反向代理
4、window+iframe
9、解释 jsonp 的原理
什么是 jsonp,jsonp 的作用
jsonp 并不是一种数据格式,而 json 是一种数据格式,jsonp 是用来解决跨域获取数据的一种解决方案
具体原理
是通过动态创建 script 标签,然后通过标签的 src 属性获取 js 文件中的 js 脚本,该脚本的内容是一个函数调用,参数就是服务器返回的数据,为了处理这些返回的数据,需要事先在页面定义好回调函数,本质上使用的并不是 Ajax 技术,Ajax 请求受同源策略的影响,不允 许进行跨域请求,而 script 标签的 src 属性中的链接却可以访问跨域的 js 脚本,利用这个特性,服务端不再返回 json 格式的数据,而是返回调用某个函数的 js 代码,在 src 中进行了调用,这样就实现了跨域
10、什么是 TCP 连接的三次握手
TCP 是因特网中的传输层协议,使用建立连接,完成三次握手,与服务器开始传送。
第一次握手:建立连接时,发送包(syn=j)到服务器,并进入等待状态,等待服务器确认;SYN:同步序列编号(Synchronize Sequence Numbers)。
第二次握手:服务器
第二次握手:收到 SYN 包,必须确认客户的 SYN(syn=j+1),同时自己也发送一个SYN包(syn=k),即 SYN+ACK 包,此时服务器进入等待状态;
第三次握手:客户端收到服务器器的 SYN+ACK 包,向服务器发送确认包 ACK(ack=k+1),
此包发送完毕,客户端和服务器进入(TCP 连接成功)状态,完成三次握手。
TCP 协议优点
TCP 发送的包有序号,对方收到包后要给一个反馈,如果超过一定时间还没收到反馈就自动执 行超时重发,因此 TCP 最大的优点是可靠。
11、TCP 协议缺点
很简单,就是麻烦,如果数据量比较小的话建立连接的过程反而占了大头,不断地重发也会造成网络延迟,因此比如视频聊天通常就使用 UDP,因为丢失一些包也没关系,速度流畅才是重要的。
TCP 与 UDP 的区别有哪些
什么是 TCP
TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议
什么是 UDP
UDP(User Datagram Protocol 用户数据报协议)是 OSI(Open System Interconnection,开放式 系统互联) 参考模型中一种无连接的传输层协议,提供面向事务的简单不可靠信息传送服务
区别
TCP 是面向连接的传输控制协议,而 UDP 提供了无链接的数据报服务//类似电话与短信
TCP 面向连接,提供可靠的数据服务
TCP 首部开销 20 字节,UDP 首部开销 8 字节
TCP 逻辑通信信道是全双工的可靠信道,UDP 则是不可靠信道
UDP 没有拥塞机制,因此网络出现拥堵不会使源主机的发送效率降低(有利于实时会议视频
等)
TCP 的连接只能是点到点的,UDP 支持一对一,多对一,多对多的交互通信
12、WebSocket 的实现和应用
什么是 websocket
应用场景主要是:实时
无论是多玩家网络游戏,网站在线人数等都是由于实时性的需求,才用上了websocket(后面用缩写ws)。
websocket 是一种网络通信协议,是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通信的协议,这个对比着 HTTP 协议来说,HTTP 协议是一种无状态的、无连接的、单向的应用层协议,通信请求只能由客户端发起,服务端对请求做出应答处理。HTTP 协议无法实现服务器主动向客户端发起消息,websocket 连接允许客户端和服务器之间进行全双工通信, 以便任一方都可以通过建立的连接将数据推送到另一端。websocket 只需要建立一次连接,就可以一直保持连接状态
13、说一下http:2.0
简要概括:http2.0 是基于 1999 年发布的 http1.0 之后的首次更新。
提升访问速度(可以对于,请求资源所需时间更少,访问速度更快,相比 http1.0)
允许多路复用:多路复用允许同时通过单一的 HTTP/2 连接发送多重请求-响应信息。
改善了:在 http1.1 中,浏览器客户端在同一时间,针对同一域名下的请求有一定数
量限制(连接数量),超过限制会被阻塞。
二进制分帧:HTTP2.0 会将所有的传输信息分割为更小的信息或者帧,并对他们进行二进制编码
首部压缩
服务器端推送
14、localStorage、sessionStorage、cookie 的区别
共同点:都是保存在浏览器端、且同源的
区别:
1、cookie 数据始终在同源的 http 请求中携带(即使不需要),即 cookie 在浏览器和服务器间 来回传递,而 sessionStorage 和 localStorage 不会自动把数据发送给服务器,仅在本地保 存。cookie 数据还有路径(path)的概念,可以限制 cookie 只属于某个路径下
2、存储大小限制也不同,cookie 数据不能超过 4K,同时因为每次 http 请求都会携带cookie、所以 cookie 只适合保存很小的数据,如会话标识。sessionStorage 和 localStorage虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的 cookie 过期时间之前有效,即使窗口关闭或浏览器关闭
4、作用域不同,sessionStorage 不在不同的浏览器窗口中共享,即使是同一个页面:localstorage 在所有同源窗口中都是共享的;cookie 也是在所有同源窗口中都是共享的
5、web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者
6、web Storage 的 api 接口使用更方便
15、强缓存 和 协商缓存 区别?什么时候用哪个 ?本质是?
浏览器缓存也包含很多内容:HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。浏览器缓存分为强缓存和协商缓存
强缓存
是利用 http 的返回头中的 Expires 或者 Cache-Control 两个字段来控制的,用来表示资源 的缓存时间。
Expires
缓存过期时间,用来指定资源到期的时间,是服务器端的具体的时间点。也就是说,Expires=max-age + 请求时间,需要和 Last-modified 结合使用。但在上面我们提到过,cache-control 的优先级更高。 Expires 是 Web 服务器响应消息头字段,在响应 http 请求时告诉浏览 器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。
Cache-Control
Cache-Control 是一个相对时间,例如 Cache-Control:3600,代表着资源的有效期是 3600秒。由于是相对时间,并且都是与客户端时间比较,所以服务器与客户端时间偏差也不会导致问题。Cache-Control 与 Expires 可以在服务端配置同时启用或者启用任意一个,同时启用的时候Cache-Control 优先级高。
协商缓存:
304 在第一次请求时候, 返回状态码 200, 和响应头中返回 cache-Control, 控制缓存使用的时间/方式(私有缓存和共享缓存), 在第二次发起请求时, 先查看 max-age 如果过期了, 在请求头设置 If-None-Match 等于刚刚 Etag 的值, 去后台对比, 如果 etag 值相同证明后端没更新,所以返回 304 状态, 前端提取本地的缓存继续使用. (也是协商缓存)
16、什么是CND,以及如何优化
一群朋友在一起嗑瓜子的时候(刚刚在嗑瓜子就拿这个比喻好了),大家都会从一大袋瓜子中取着吃,但是这样很麻烦。所以我们会用手先抓一把拿在手中,这样就不用每次都去大袋子中取,我们就可以很方便先吃手上的那部分。
使用CDN访问: 用户发送请求->智能DNS的解析(根据IP判断地理位置、接入网类型、选择路由最短和负载最轻的服务器)->取得缓存服务器IP->把内容返回给用户(如果缓存中有)->向源站发起请求->将结果返回给用户->将结果存入缓存服务器
它的优势有哪些?
本地Cache加速,提高了企业站点(尤其h含有大量图片和静态页面站点)的访问速度
跨运营商的网络加速,保证不同网络的用户都得到良好的访问质量
远程访问用户根据DNS负载均衡技术智能自动选择Cache服务器
自动生成服务器的远程Mirror(镜像)cache服务器,远程用户访问时从cache服务器上读取数据,减
少远程访问的带宽、分担网络流量、减轻原站点web服务器负载等功能
广泛分布的CDN节点加上节点之间的智能冗余机制,可以有效地预防黑客入侵。
17、常说的“四层”和“七层”是什么
四层
第一层叫“链接层”(link layer),负责在以太网、WiFi 这样的底层网络上发送原始数据包,工作在网卡这个层次,使用 MAC 地址来标记网络上的设备,所以有时候也叫 MAC 层。
第二层叫“网际层”或者“网络互连层”(internet layer),IP 协议就处在这一层。因为 IP 协议定义了“IP 地址”的概念,所以就可以在“链接层”的基础上,用 IP 地址取代 MAC 地址,把许许多多的局域网、广域网连接成一个虚拟的巨大网络,在这个网络里找设备时只要把 IP 地址再“翻译”成 MAC 地址就可以了。
第三层叫“传输层”(transport layer),这个层次协议的职责是保证数据在 IP 地址标记的两点之间“可靠”地传输,是 TCP 协议工作的层次,另外还有它的一个“小伙伴”UDP。
TCP 是一个有状态的协议,需要先与对方建立连接然后才能发送数据,而且保证数据不丢失不重复。而 UDP 则比较简单,它无状态,不用事先建立连接就可以任意发送数据,但不保证数据一定会发到对方。两个协议的另一个重要区别在于数据的形式。TCP 的数据是连续的“字节流”,有先后顺序,而 UDP 则是分散的小数据包,是顺序发,乱序收。
协议栈的第四层叫“应用层”(application layer),由于下面的三层把基础打得非常好,所以在这一层就“百花齐放”了,有各种面向具体应用的协议。例如 Telnet、SSH、FTP、SMTP 等等,当然还有我们的 HTTP。
MAC 层的传输单位是帧(frame),IP 层的传输单位是包(packet),TCP 层的传输单位是段(segment),HTTP 的传输单位则是消息或报文(message)。但这些名词并没有什么本质的区分,可以统称为数据包。
七层
第一层:物理层,网络的物理形式,例如电缆、光纤、网卡、集线器等等;
第二层:数据链路层,它基本相当于 TCP/IP 的链接层;
第三层:网络层,相当于 TCP/IP 里的网际层;
第四层:传输层,相当于 TCP/IP 里的传输层;
第五层:会话层,维护网络中的连接状态,即保持会话和同步;
第六层:表示层,把数据转换为合适、可理解的语法和语义;
第七层:应用层,面向具体的应用传输数据。