web前端网络知识总结

一、计算机

1. 冯诺依曼式计算机——冯诺依曼（计算机之⽗）
2. 图灵机（计算机科学之父）
3. 运算器: CPU, GPU（显卡）
4. 存储器：
   内存（断电数据清空, 读写速度快），
   硬盘（辅存）：（数据可以持久化，读写速度，相对较慢）
5. 控制器：主板上的⼀些器件
6. 输⼊设备：键盘，鼠标，麦克风，网口
7. 输出设备：显示器，耳机，网口
   

二、IP地址

IP是相对网络来说的

1. Internet上的计算机IP是唯一的，一个IP地址对应一个计算机。
   一台计算机上面可以有好多个服务，也就是一个ip地址对应了好多个域名，即一个计算机上由好多网站。
2. IP地址的格式：
   IP地址分为四个段：xxx.xxx.xxx.xxx，每个段0~255，每个段，都是由8个0、1组成的。
3. IP地址的分类：
   ⼀个IP地址分为两个部分：网络ID，主机ID
4. A类：0.0.0.0 ~ 127.255.255.255（⼀个网络能有1600+万台）
5. B类：128.0.0.0 ~ 191.255.255.255（172.16.0.0 ~ 172.31.255.255）
6. C类：192.0.0.0 ~ 223.255.255.255（192.168.xxx.xxx）
7. D类：（多播地址）
8. E类：
   

三、域名与DNS

域名是相对网站来说的：www.baidu.com

1. DNS（Domain name system）则是关联IP和域名的域名系统，可以将域名映射到IP地址。
2. 问：能通过域名直接访问到⼀台机器吗？
   答：不可以的。
3. 用域名和IP形成对应关系。
   首先，计算机是不知道域名对应的IP的。
   问路由器，如果路由器认识这个域名，就返回⼀个IP，然后计算机访问这个IP。
   如果路由器不认识，他就问上⼀层路由器。
   如果问到了城市这个级别的路由器的时候，DNS服务器。
   如果DNS服务器不认识这个域名，继续向上级DNS服务器查找。
4. 互联网建立的时候，13台总的DNS服务器。

四、访问网页

当向浏览器的地址栏中输入⼀个url按回⻋之后，网络中都会发⽣什么？
⽐如输⼊的是123.xyz

1. 当输入域名时,首先找的不是DNS服务器而是本地的一个文件C:\Windows\System32\drivers\etc\hosts 查看有无对应关系，如果有，就直接使用，若没有再去找DNS服务器。可以通过更改本机文件中的对应关系，屏蔽一些网站。
2. 家里路由器
3. 上级路由、城市的DNS服务器
4. 继续向上级的DNS服务器找。
5. gDNS服务器。

五、网络模型

六、GET和POST区别

1. 是基于什么前提的？如果什么前提都没有，不使⽤任何规范，只考虑语法和理论上的
   HTTP协议。
   GET和POST几乎没有什么区别，只有名字不⼀样。
2. 如果是基于RFC规范的。
   （1）理论上的（Specification）：GET和POST具有相同语法的，但是有不同的语义。
   get是用来获取数据的，post是用来发送数据的，其他方面没有区别。
   （2）实现上的（Implementation）：各种浏览器，就是这个规范的实现者。
   常见的那些不同：
   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历史参数会被保留在浏览器⾥，psot不会保存在浏览器中的。
   7）GET只允许ASCII.post没有编码限制，允许发⼆进制的。
   8）GET与POST相比，GET安全性较差，因为所发的数据是URL的⼀部分。

七、Cookie和Session

1. 如果我们⽤JS的变量来存数据，那么在⻚⾯关闭的时候，数据就消失了。
2. 保持登录状态是怎么做到的呢？
   按照正常的HTTP协议来说，是做不到的。
   因为HTTP协议，上下⽂⽆关协议。
3. 所以说前端页面上，有可以持久化存储数据的东⻄。⼀旦登录成功，我就记载在这个里面（cookie）。
   Cookie是有限制的，自己只能网自己域名下注cookie。
   Cookie是存在浏览器里的，不是存在某个页面上的。是可以长期存储的。Cookie即使是保存在浏览器⾥，不同cookie存放在不同的域名下的。

1.Cookie

1. 初始状态：没有登录
2. 访问百度的登录，输⼊用户名，密码。
3. 如果用户名和密码是正确的。百度的后端会向这个域名下，设置⼀个Cookie。写⼊用户的基本信息（加密的）。
4. 以后每⼀次向百度发送请求，浏览器都会自动带上这些Cookie。
5. 服务端（后端）看到了带有ID的cookie，就可以解析这个加密的ID，来获取到这个用户本身的ID。
6. 如果能获取到本身的ID，那么就证明这个用户已经登录过了。所以后端可以继续保留⽤户的信息。
   缺点：如果某个坏⼈，复制了我浏览器里的cookie，他就可以在他的电脑上登录我的账号了。

2.Session

数据存在Session上也有缺点
在⽤户量很⼤的时候，服务器端很耗资源的。
因为后端可能不止⼀台服务器，用户的登录信息，⼀般只存在⼀台服务器上。
因为用户的登录操作，在哪台机器上执⾏的，就⼀般存在哪台机器上。
需要通过反向代理。（轮询，IP哈希。）

八、端系统通信方式

B/S结构 C/S结构
Client/Server——Client（app、软件）只负责内容的展示，Server负责提供内容。
Browser/Server——Browser（页面）只负责内容的展示，Server负责提供内容。

1. index.html 页面的本质是什么？ 页面的本质就是⼀个字符串。带有HTML格式的字符串。
2. 浏览器 向服务器 请求⼀个⻚⾯的本质是什么？
   （1）www.baidu.com
   （2）服务器接收到这个请求后，服务器想要把这个页面的内（HTML格式的字符串）返回给浏览器。
   （3）页面的字符串存在哪⾥呢？存在HTML文件里。例如：index.html
   （4）服务器端要读取⽂件。
   （5）将读取出来的内容返回给浏览器。
3. 最后返回的是⼀个字符串，这个字符串的来源可能是⽂件，可能是缓存，可能来自于数据库。
4. 服务器：严格的说，服务器是⼀台计算机，这台计算机，只提供服务。（不是用户用的）
5. 但是，我们常说的这个服务器，指的是服务容器，不是服务器。
6. 服务容器：是⼀个程序。程序可以监听⼀个端口。读取⽂件，并且返回。
7. 如果我们想通过访问服务器（服务容器）的方式，来访问我们自己写的页面。我们就得装⼀个服务容器的程序。

九、网络请求

1. 在浏览器中直接输入网址（无法用代码控制）
2. location.href=“url”,可以发出网络请求，但是页面会发生跳转。(页面会跳转)
3. 带有src属性的标签()。请求是可以发出的，服务端是可以处理的也是可以返回的。但是返回之后，能否被应用，还要看浏览器。(页面无法处理返回结果)
4. 带有href属性的标签()。请求是可以发出的，服务端是可以处理的也是可以返回的。但是返回之后，能否被应用，还要看浏览器。（页面无法处理返回结果）
5. 带有action属性的标签。例如form表单，也可以向后端发出请求。但是form表单发出请求之后，也会页面跳转。（页面会跳转）
   希望有一种方式，可以用代码控制，页面不会跳转，服务端返回的结果我可以用js继续处理。
6. ajax

//创建HTTP请求对象
var xhr = null;
if (window.XMLHttpRequest) {
	xhr = new XMLHttpRequest();
} else {
	xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//(1)请求方式，get,post
//(2)必须有url
xhr.open("get", "http://developer.duyiedu.com/edu/testAjaxCrossOrigin");
xhr.send();//发送ajax请求提示跨域访问

十、跨域访问资源

哪些东西属于资源？
js⽂件算吗？js⽂件肯定是算资源的，但是js⽂件是允许被跨域请求的。
css⽂件，jpg,png等。src属性的资源都是可以被跨域请求的。href资源⼤部分都是可以被
跨域请求的。
哪些资源算跨域请求的资源？

1. 后端接口的数据。
2. 其它域的cookie
3. 其它域的缓存
   什么是其它的域？怎么样算跨域？
   页面本身：有协议（http/https）,域名，端口
   要请求的数据：http://www.baidu.com:80
   协议，域名，端口这三个，有任意⼀个不⼀样就算跨域。
   跨域这个行为，发生在哪⾥？
   答案：
4. 即使跨域了（协议，域名，端⼝号有不⼀样的），请求也可以发出。
5. 服务器端也是可以接收的。
6. 服务器端也是可以正常处理的。
7. 服务器端也是可以正常返回数据。
8. 浏览器也能接收到这些数据。
9. 接收到之后，发现当前页面的域和请求的域不同，所以判定为跨域。
10. 我们的代码在这等着结果呢，但是因为浏览器判定跨域了，不会把结果传递给我们的代码。
    虽然跨域了，但是我们依然需要这个数据，怎么办？
    解决跨域问题：
11. 后端（别⼈家的）配合我们进⾏跨域。
    pan.baidu.com ——> zhidao.baidu.com，即使都是百度，也算跨域。
    （1）JSONP（正常的情况，返回的数据都是JSON格式。JSONP是⼀种特殊的格式。）
    （2）后端设置Access-Control-Allow-Origin属性以⽀持跨域。（知识较深，需要了解nodejs）
12. 后端不配合我们进行跨域。
    （3）iframe（只能显示，不能控制）
    （4）通过后端代理（自己的后端）（需要nodejs）

十一、原生js发送ajax请求

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHttp");
}
xhr.open("get","http://developer.duyiedu.com/edu/testAjaxCrossOrigin"，true);
//true表示异步，即网页逻辑的家在问题
//该接口设置了Access-Control-Allow-Origin属性
xhr.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    //readyState存有 XMLHttpRequest的状态
    	document.getElementsByTagName("body")[0].innerHTML=xhr.responseText;
    	var data = JSON.parse(xhr.responseText);//转换成json格式
  	};
};//可以接收数据了
xhr.send();//将send放在onreadystatechange后面，确定状态发生变化执行该方法后

上述代码的onreadystatechange的解析：

在计算机的世界里，异步与同步和现实世界中是相反的。
在计算机的世界里，同步表示串行。异步表示同时进行。可以理解为同线程和异线程。

十二、JSONP使用与原理

1.jsonp使用

jsonp格式哪里特殊？

1. 发送的时候，会带上一个参数callback
2. 返回的结果不是json格式
3. 返回callback的名 + ( + json + );

$.ajax({//提前引入jq文件
    url: "http://developer.duyiedu.com/edu/testJsonp",
    type: "post",
    dataType: "jsonp",
    success: function (data) {
        console.log(data);
    }
});

4. jsonp跨域，只能使用get方法，如果我们设置的是post方法，jquery会自动转为get方法。
5. 是不是在jsonp里面我只能使用get方法？是不是我设置的post方法都会转为get方法？不是。
6. jquery会先判断是否同源，如果同源，那么设置的是get就是get，设置的post就是post如果不是同源，无论设置的什么，都改为get。
   

2.jsonp原理

1. 如果我想从一个接口获取一个数据，不过这个接口和当前页面不是同源的（也就是跨域了）。且这个接口是支持JSONP的。
   联系九、网络请求中提到的知识
   a）script标签，有src属性，所以可以发出网络请求
   b）script标签，虽然可以引用其他域的资源，浏览器不限制，但是，浏览器会将返回的内容，作为js代码执行。

<script src="http://developer.duyiedu.com/edu/testJsonp?callback=asd"></script>
<script>
    function asd(){
        console.log(123);
    };
</script>

asd({“status”:“ok”,“msg”:“Hello! There is DuYi education!”})，相当于调用了asd方法，传入了一个json对象作为参数。

JSONP原理：
2. 判断请求与当前页面的域，是否同源，如果同源则发送正常的ajax，就没有跨域的事情了。
3. 如果不同源，生成一个script标签
4. 生成一个随机的callback名字，还得创建一个名为这个的方法。
5. 设置script标签的src，设置为要请求的接口。（例如通过标签的src、href等属性发送请求都是get请求，且可以跨域）
6. 将callback作为参数拼接在后面。
以上是前端部分
7. 后端接收到请求后，开始准备要返回的数据
8. 后端拼接数据，将要返回的数据用callback的值和括号包裹起来
例如：callback=asd123456，要返回的数据为{“a”:1, “b”:2},
就要拼接为：asd123456({“a”:1, “b”:2});
9. 将内容返回。
以上是后端部分
10. 浏览器接收到内容，会当做js代码来执行。
11. 从而执行名为asd123456的方法。这样我们就接收到了后端返回给我们的对象。

3.jsonp实现

var $ = {
	ajax: function (options){
		var url = options.url;
		var type = options.type;
		var dataType = options.dataType;
		//判断是否同源（协议，域名，端口号）
        //获取目标url的域
        var targetProtocol = "";//目标接口的协议
        var targetHost = "";//目标接口的host，host是包涵域名和端口的
        //如果url不带http，那么访问的一定是相对路径，相对路径一定是同源的。
        if(url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
        	//
            var targetUrl = new URL(url);//创建url对象
            targetProtocol = targetUrl.protocol;
            targetHost = targetUrl.host;
        }else{
            targetProtocol = location.protocol;
            targetHost = location.host;
        };
        //首先判断是否为jsonp，因为不是jsonp不用做其他的判断，直接发送ajax
        if(dataType == "jsonp"){
            //要看是否同源
            if (location.protocol == targetProtocol && location.host == targetHost) {//表示同源
            	//此处省略。因为同源，jsonp会当做普通的ajax做请求
            }else{//不同源，跨域
                //随机生成一个callback
                var callback = "cb" + Math.floor(Math.random() * 1000000);
                //给window上添加一个方法,成功后执行success回调
                window[callback] = options.success;
                //生成script标签。
                var script = document.createElement("script");
                if(url.indexOf("?") > 0) {//表示已经有参数了
                    script.src = url + "&callback=" + callback;
                }else{//表示没有参数
                    script.src = url + "?callback=" + callback;
                }
                script.id = callback;
                document.head.appendChild(script);
            };
        };
    };
};