Ajax计算机网络

什么是 Ajax，Ajax 的原理，Ajax 都有哪些优点和缺点？

什么是 Ajax
Ajax 是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页
开发技术。沟通客户端与服务器，可以在不必刷新整个浏览器的情况下，与服务器进 行
异步通讯的技术
Ajax 的原理
通过 XMLHTTPRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript
来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。
XMLHTTPRequest 是 Ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的
技术。 简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。
达到无刷新的效果。
Ajax 的优点
1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理， 减
轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax 的原则是“按
需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
Ajax 的缺点
1、Ajax 不支持浏览器 back 按钮。
2、安全问题 Ajax 暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。

常见的 HTTP 状态码以及代表的意义

5 种常见的 HTTP 状态码以及代表的意义
200（ OK）：请求已成功，请求所希望的响应头或数据体将随此响应返回。
400（ Bad Request）：请求格式错误。
1) 语义有误，当前请求无法被服务器理解。除非进行 修改，否则客户端不应该重
复提交这个请求；

2) 请求参数有误。
404（ Not Found）：请求失败，请求所希望得到的资源未被在服务器上发现。
500（ Internal Server Error）：服务器遇到了一个未曾预料的状况，导致了它无法完成对请
求的处理。

请解释一下 JavaScript 的同源策略

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

为什么会有跨域的问题出现，如何解决跨域问题

什么是跨域
指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的,是浏览器对
javascript 施加的安全限制，防止他人恶意攻击网站
比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户
名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输入
的内容,这样用户名和密码就轻松到手了。
解决方式
1、jsonp
原理：动态创建一个 script 标签。利用 script 标签的 src 属性不受同源策略限制。因为所有
的 src 属性和 href 属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤
1.1）去创建一个 script 标签
1.2）script 的 src 属性设置接口地址
1.3）接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
1.4）通过定义函数名去接收后台返回数据

Get 和 Post 的区别以及使用场景

区别
1、Get 使用 URL 或 Cookie 传参。而 Post 将数据放在 body 中
2、Get 的 URL 会有长度上的限制，则 Post 的数据则可以非常大
3、Post 比 Get 安全，因为数据在地址栏上不可见
最本质的区别
基于 http 协议进行请求， 其实 GET 和 POST 无区别， 只是请求时的方式不同， 都可以携
带请求体， 也可以在 URL 带参数
区别来自于浏览器对 URL 长度的限制， 请求体大小来源于服务器的限制
还有语义的区别：
GET 是获取， POST 是提交
Get 是用来从服务器上获得数据，而 post 是用来向服务器上传递数据

Get/Post 使用场景
若符合下列任一情况，则 Post 方法：
1、请求的结果有持续性的作用，例如：数据库内添加新的数据行
2、若使用 Get 方法，则表单上收集的数据可能让 URL 过长
3、要传送的数据不是采用 ASCII 编码
若符合下列任一情况，则用 Get 方法：
1、请求是为了查找资源，html 表单数据仅用来搜索
2、请求结果无持续性的副作用
3、收集的数据及 html 表单内的输入字段名称的总长不超过 1024 个字符

HTTP 与 HTTPS 的区别

1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证
书较少，因而需要一定费用。(以前网易官网是 HTTP，而网易邮箱是 HTTPS 。)
2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输
协 议
3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者
是 443
4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加
密 传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输
和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

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 接口使用更方便

简述 web 前端 Cookie 机制，并结合该机制说明会话保持原理？

Cookie 是进行网站用户身份，实现服务端 Session 会话持久化的一种非常好方式。
1、为什么需要 Cookie
HTTP 是一种无状态的协议，客户端与服务器建立连接并传输数据，数据传输完成后，连接
就会关闭。再次交互数据需要建立新的连接，因此，服务器无法从连接上跟踪会话，也无
法知道用户上一次做了什么。
例如：在网络有时候需要用户登录才进一步操作，用户输入用户名密码登录后，浏览 了
几个页面，由于 HTTP 的无状态性，服务器并不知道用户有没有登录
Cookie 是解决 HTTP 无状态性的有效手段，服务器可以设置或读取 Cookie 中所包含的信息。
当用户登录后，服务器会发送包含登录凭据的 Cookie 到用户浏览器客户端，而浏览器对该
Cookie 进行某种形式的存储（内存或硬盘）。用户再次访问该网站时，浏览器会发送该 Cookie
（Cookie 未到期时）到服务器，服务器对该凭据进行验证，合法时使用户不必输入用户名和密码
就可以直接登录
本质上讲，Cookie 是一段文本信息。客户端请求服务器时，如果服务器需要记录用户状态，
就在响应用户请求时发送一段 Cookie 信息。客户端浏览器保存该 Cookie 信息，当用户再次
访问该网站时，浏览器会把 Cookie 做为请求信息的一部分提交给服务器。服务器检查 Cookie
内容，以此来判断用户状态，服务器还会对 Cookie 信息进行维护，必要时会对 Cookie 内容 进
行修改
2、 Cookie 的类型
Cookie 总时由用户客户端进行保存的（一般是浏览器），按其存储位置可分为：内存式 Cookie
和硬盘式 Cookie。
内存式 Cookie 存储在内存中，浏览器关闭后就会消失，由于其存储时间较短，因此也被称
为非持久 Cookie 或会话 Cookie。
硬盘式 Cookie 保存在硬盘中，其不会随浏览器的关闭而消失，除非用户手工清理或到了过
期时间。由于硬盘式 Cookie 存储时间是长期的，因此也被称为持久 Cookie。
3、Cookie 的实现原理
Cookie 定义了一些 HTTP 请求头和 HTTP 响应头，通过这些 HTTP 头信息使服务器可以与客户
进行状态交互。
客户端请求服务器后，如果服务器需要记录用户状态，服务器会在响应信息中包含一个
Set-Cookie 的响应头，客户端会根据这个响应头存储 Cookie 信息。再次请求服务器时，客
户端会在请求信息中包含一个 Cookie 请求头，而服务器会根据这个请求头进行用户身份、
状态等较验。

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

DNS 缓存->根域名服务器)
2、浏览器向 Web 服务器发送一个 HTTP 请求（TCP 三次握手）
3 服务器 301 重定向（从 HTTP://example.com 重定向到 HTTP://www.example.com）
4、浏览器跟踪重定向地址，请求另一个带 www 的网址
5、服务器处理请求（通过路由读取资源）
6、服务器返回一个 HTTP 响应（报头中把 Content-type 设置为 'text/html'）
7、浏览器进 DOM 树构建
8、浏览器发送请求获取嵌在 HTML 中的资源（如图片、音频、视频、CSS、JS 等）
9、浏览器显示完成页面
10、浏览器发送异步请求

HTTP 缓存机制

浏览器缓存也包含很多内容：
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 状态, 前端提取本地的缓存继续使用. (也是协商缓存)