# HTTP面试题
# 1.什么是跨域，以及如何解决跨域问题？
跨域是相对于同源策略而言的。
同源策略是一种约定，它是浏览器最核心最基本的安全功能。
所谓同源策略是指：协议、域名、端口号都相同，就是同源，否则就是跨越。
同源策略带来的影响
在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据 但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的 这时如果再通过Ajax请求数据就会拿不到跨域数据
跨域解决方案
- 现在主流跨域解决方案是jsonp
- JSONP让网页从跨域的地址那获取资料，即跨域读取数据
JSONP实现跨域访问的原理
- 在同一界面中可以定义多个script标签
- 同一个界面中多个script标签中的数据可以相互访问
- 可以通过script的src属性导入其它资源, 通过src属性导入其它资源的本质就是将资源拷贝到script标签中
- script的src属性不仅能导入本地资源, 还能导入远程资源
- 由于script的src属性没有同源限制, 所以可以通过script的src属性来请求跨域数据
JSONP优化
- 在开发中通过JSONP来获取跨域的数据，一般情况下服务器返回的都不会是一个变量, 而是一个函数的调用。所以JSONP的第一个优化就是让服务器返回函数调用。
但是这样会导致当前服务器返回的函数调用名称写死了,服务器返回函数叫什么名称, 我们本地就必须定义一个什么名称的函数
- 解决方案:通过URL参数的方式来动态指定函数名称
如：script标签的URL为https://www.jd.com?name=test，（假设服务端语言是php）服务端可以通过
$name = $_GET['name']获取到客户端传递过来的参数，然后通过echo $name."(666);";返回字符串的拼接后的数据。- 由于script标签默认是同步, 前面的script标签没有加载完数据, 后面的script标签就不会被执行
所以请求数据的script标签必须放到后面
解决方案:
通过JS动态创建script标签, 因为JS动态创建的script标签默认就是异步的, 不用等到前面的标签加载完就可以执行后面的script标签jQuery中JSONP使用
jQuery也考虑到我们有可能需要获取跨域数据，所以在jQuery中也能获取跨域数据。
1、使用jQuery封装好的ajax方法
2、在ajax方法中新增一个键值对dataType: "jsonp"，作用是告诉jQuery需要请求跨域的数据
3、在请求服务端文件的时候jQuery会自动在链接后面加上?callback=回调函数名称，服务端就可以通过callback拿到回调函数的名称$name = $_GET["callback"],然后还是一样可以通过字符串拼接的回调函数返回数据echo $name.("666");
4、在jQuery中不需要定义一个对应名称的函数，jQuery会自动将回调函数中的数据取出来传给success方法
5、还可以设置jsonp: "回调函数名称"来告诉jQuery服务器在获取回调函数名称的时候需要用什么key来获取。
6、回调函数的名称也可以由我们自己来指定，只需要设置jsonpCallback：回调函数的名称即可
# 2. HTTP和HTTPS的区别
- HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
- HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密
- HTTP 的端口号是 80，HTTPS 是 443
- HTTPS 需要到 CA 申请证书，一般免费证书很少，需要交费
- HTTP 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。
# 3. HTTP的状态码说一下
- 100-199 用于指定客户端应响应的某些动作
- 200-299 用于表示请求成功
- 300-399 用于已重定向的文件
- 400-499 用于指出客户端的错误
- 400：语义有误，当前请求无法被服务器理解
- 401：当前请求需要用户验证
- 403：服务器已经理解请求，但是拒绝执行它
- 404：请求的内容不存在。
- 500-599 用于指出服务器错误
- 503：服务不可用
# 4. get和post的区别
提交数据存储位置不同
- GET请求会将数据放到URL后面
- POST请求会将数据放到请求体中
对提交的数据大小限制不同
- GET请求的参数只能是ASCII码，所以中文需要URL编码
- POST请求传参没有这个限制
应用场景不同
- GET请求用于提交非敏感数据和小数据，POST请求用于提交敏感数据和大数据
- get请求可以被缓存，post不可以被缓存
- get后退不会有影响，post后退会重新进行提交
- get请求的记录会留在历史记录中，post请求不会留在历史记录
# 5. Cookie、SessionStronge、LocalStronge的区别
在同一浏览器下生命周期不同
- Cookie生命周期: 默认是关闭浏览器后失效, 但是也可以设置过期时间
- SessionStorage生命周期: 仅在当前会话(窗口)下有效，关闭窗口或 浏览器后被清除, 不能设置过期时间
- LocalStorage生命周期: 除非被清除，否则永久保存
容量不容
- Cookie容量限制: 大小(4KB左右)和个数(20~50)
- SessionStorage和LocalStorage容量限制: 大小(5M左右)
网络请求不同
- Cookie网络请求: 每次都会携带在HTTP请求头中，如果使用cookie保存过多数据会带来性能问题
- SessionStorage和LocalStorage网络请求: 仅在浏览器中保存，不参与和服务器的通信
应用场景不同
- Cookie: 判断用户是否登录
- sessionStorage: 表单数据
- LocalStorage: 购物车
需要注意的是：无论通过哪种方式存储的数据, 都不能将敏感数据直接存储到本地
# 6. Ajax的优缺点和四个步骤
ajax简单来说是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
ajax的优点
- 最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
- 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
- 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求。
- 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
ajax的缺点
- ajax对浏览器后退机制造成了破坏，也就是说用户无法通过浏览器的后退按钮回到前一次操作的页面。虽然有些浏览器解决了这个问题，但它也并不能改变ajax的机制，它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。
- 安全问题。技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。
- 另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
- 一些手持设备（如手机、PDA等）现在还不能很好的支持ajax。
# 7. 前端对后端返回的数据如何处理
前端通过javascript对后端返回的json或者xml进行格式化处理
JSON:
var jsonObj = JSON.parse(后端返回的json字符串);
var result = JSON.stringify(jsonObj, null, 2);//格式化
XML：
先使用 xml2json转化为JSON格式，然后再JSON.parse再JSON.stringfy进行格式化
# 8 . 从输入 URL 到页面加载完成的过程中都发生了什么
- 浏览器会进行DNS域名解析，拿到域名对应的服务器ip地址，再用该ip去访问web服务器
- 然后会和web服务器进行tcp的三次握手建立tcp连接
- 连接建立成功后，浏览器会发送http的get请求
- 服务器收到请求并给予响应，返回请求的数据
- 浏览器拿到数据并进行解析、渲染
- 浏览器和服务器进行tcp的四次挥手，断开连接