前端网络必须知道的点

1、ajax:async javascript and json = =》封装ajax函数，ajax用来请求资源，可以使用页面
局部刷新。
封装的ajax函数如下：
function ajax(url, type, data, success, flag) {
var xhr = null;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status = = 200) {
success(JSON.parse(xhr.responseText));
}
}
}
if(type = = ‘GET’) {
xhr.open(type, url + ‘?’ + data, flag);
xhr.send();
} else if( type = = ‘POST’) {
xhr.open(type, url, flag);
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xhr.send();
}
jsonp**的使用：
$.ajax({
url: ‘网址’,
type: ‘请求方法get/post等等’,
dataType: ‘jsonp’,
success: function(data) {
console.log(data);
}
});
2、网络基础知识
（1）、五层网络模型
物理层 --》数据链路层 --》网络层 --》传输层 --》应用层
可细分为七层网络模型
应用层：网络服务与最终用户的一个接口，协议有：HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP
表示层：数据的表示、安全、压缩。（在五层模型里已经合并到了应用层）格式有JPEG、ASCII、DECOIC、加密格式等
会话层：建立、管理、终止会话（在五层模型里已经合并到了应用层）
对应主机进程，指本地主机与远程主机正在进行的会话
（2）、 同源策略
浏览器提出的安全机制 规定 协议域名端口号均相同的资源 可以相互之间通信
如果在不同源的位置去交互的话需要认证
源： 协议+域名+端口号
（3）、三次握手 和 四次挥手 发生在传输层 TCP/IP协议 TCP 和 UDP
（4）、GET(获取数据的时候会用到) POST（新建数据保存的时候用到） HEAD PUT（修改数据的时候会用到） DELETE（删除数据的时候会用到）
（5）、get和post区别：
1、是基于什么前提的，如果什么前提都没有，不适用任何规范，只考虑语法和理论上的HTTP协议。get和post几乎煤业什么区别，只有名字不一样。
2、如果是基于RFC规范的。
①理论上的：get和post具有相同语法的。但是又不同的语义。get是用来获取数据的，post是用来发送数据的，其他方面没有区别。
②实践上的（Implementtation)：各种浏览器就是这个规范的实现者。
常见的那些不同：
1)GET的数据在URL是可见的。POST请求是不显示在URL中。
2)GET请求对长度是有限制的，POST长度是无限制的。
3)GET请求的数据可以收藏为书签，POST请求到的数据不可收藏为书签
4)GET请求后，按后退、刷新按钮无影响，POST数据会被重新提交。
5)GET的编码类型：application/x-www-form-url,POST的编码类型：有很 多。比如encodeapplication/x-www-form-urlencoded、 multipart/form-data等
6)GET历史参数会被保留在浏览器里，post不会保存在浏览器中的。
7)GET只允许ASCII,POST没有编码限制，允许发二进制的。
8)GET与POST相比，get安全性较差，因为所发的数据是URL的一部分。
（6）、请求方法
①GET请求指定的页面信息，并返回实体主体。
②HEAD类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
③POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
④PUT 从客户端向服务器传送的数据取代指定的文档的内容。
⑤DELETE 请求服务器删除指定的页面。
⑥CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代 理服务器。
⑦OPTIONS 允许客户端查看服务器的性能。
⑧TRACE 回显服务器收到的请求，主要用于测试或诊断。
⑨PATCH 是对 PUT 方法的补充，用来对已知资源进行局部更新
（7）、状态码：
2xx 请求成功返回
3xx 重定向 301永久性重定向 302临时性重定向 304资源未修改
4xx 客户端错误 404没有找到（检查地址） 403没有权限 400参数有错误
5xx 服务器端错误 500服务器内部错误
（8）、http和https的区别
https是在http的基础上运用了ssl加密，运用的加密算法rsa，默认端口号443
http：超文本传输协议，端口号80
非对称和对称
（9）客户端和服务器端的跨域：
<1> jsonp —》 不是w3c标准里的
原理： script标签身上的src属性是不受同源策略的限制的
src=“http://www.baicu.com?”
<2> 服务器代理
<3> iframe
iframe + window.name —》 父页面请求子页面的数据 儿子给父亲数据
iframe + location.hash ----》 子页面请求父页面的数据 父亲给儿子数据
iframe + window.postMessage —》 双向请求
<4> CORS —》cross-origin resource sharing 跨域资源共享
后端来设置一个响应头 access-control-allow-origin: ‘http://www.duyiedu.com’
浏览器先发出请求到服务器 返回的过程中 判断是否是同源的
如果不是同源的会去看响应报文的响应头是否有 access-control-allow-origin: * / 当前页面的域名
3c标准里面提出的
<5> document.domain —》 基础域名相同的页面 可以跨域
浏览器将 CORS 请求分成两类：
简单请求和非简单请求，只要同时满足下面两个条件就属于简单请求
( 1 ) 请求的方法只能是 HEAD，GET，POST
( 2 ) HTTP 的头信息不超出以下几种字段
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain
只要不满足以上两个条件就属于非简单请求，浏览器对于非简单请求会进行一次预检
对于简单请求
非简单请求
预检请求
非简单请求指的是对服务器有特殊要求，比如请求方法为 PUT 或 DELETE，或者 Content-Type 字段的类型是 application/json。
非简单请求的 CORS 请求会在通信之前，增减一次 HTTP 查询的请求，成为 “预检”。
浏览器会先询问服务器，当前网页所在的域名是否在服务器许可的名单之中，
以及可以使用哪些 HTTP 请求和头部字段。如果通过服务器的校验，才会发起正式的 XMLHttpRequest 请求，否则就报错
非简单请求的响应头里面必须含有以下字段：
Allow-Control-Access-Origin 必需，表示可以请求的源。
Access-Control-Allow-Methods 必需，表示支持的所有方法，以逗号分隔
Access-Control-Allow-Headers 如果浏览器请求包括 Access-Control-Req方法，以逗号分隔
Access-Control-Allow-Headers 如果浏览器请求包括 Access-Control-Request-Headers 字段，则 Access-Control-Allow-Headers 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段。
HTTP请求的发出经历了什么