网络应用.pdf

不知到 ip 的话，默认打到本机上 —> 0.0.0.0
本机 host 不会缓存

06—简述HTTP协议

get方式请求的最大特点：请求查询的参数都在 url 里
http是一种明文协议，无论是get还是post在网络传输中都是危险的

HTTP协议
请求：Request
请求头
数据体
请求⽅式 url 协议版本
POST /path?a=1&b=2 HTTP1.1
Host：www.baidu.com
Connection: keep-alive
User-Agent：asdasdasd
Cookie
传⽂件的⼀些信息。
GET/POST——HEAD,PUT,DELETE
响应：Response
响应头
数据体
协议版本状态码 message
属性：值

07—GET和POST区别

1.是基于什么前提的？如果什么前提都没有，不使用任何规范，只考虑语法和理论上的HTTP协议。
GET和POST几乎没有什么区别，只有名字不一样。
2.如果是基于RFC规范的。
(1) 理论上的 (Specification)：GET和POST具有相同语法的，但是有不同的语义‘get是用来获取数据的，post是用来发送数据的，其他方面没有区别
(2) 实现上的 (Implementation)：各种浏览器，就是这个规范的实现者。
常见的那些不同：
1）GET的数据在URL是可见的。POST请求不显示在URL（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只允许ASCLL，post没有编码限制，允许发二进制的。
8）GET与POST相比，GET安全性较差，因为所发的数据是URL的一部分（所以尽量发送post请求，如果有密码什么的最好发https加密的协议）。

08—Cookie与Session

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

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

缺点：如果某个坏⼈，复制了我浏览器⾥的cookie，他就可以在他的电脑上登录我的账号了。

XSS注入攻击 —— 用来攻击 cookie
————————————————————————————
数据存在Session上也有缺点 ——（登录信息存在服务器端，相对比较安全）
如果⽤户量⾮常⼤，上亿的⽤户。
在⽤户量很⼤的时候，服务器端很耗资源的。

因为后端可能不⽌⼀台服务器，⽤户的登录信息，⼀般只存在⼀台服务器上。
因为⽤户的登录操作，在哪台机器上执⾏的，就⼀般存在哪台机器上。
需要通过反向代理。（轮询，IP哈希【相同的IP地址会打在相同的服务器上，以此来保证你登录的信息是时刻存在的，由同一台机器处理】）

09—页面的正确打开方式

B/S结构 C/S结构
Client/Server——Client(某一个app)只负责内容的展示，Server负责提供内容。
Browser/Server——Browser(浏览器里的页面)只负责内容的展示，Server负责提供内容。

www.baidu.com
index.html
页面的本质是什么？页面的本质就是⼀个字符串。带有HTML格式的字符串。
浏览器向服务器请求⼀个⻚⾯的本质是什么？
（1）www.baidu.com
（2）服务器接收到这个请求后，服务器想要把这个页面的内容（HTML格式的字符串）返回给浏览器。
（3）页面的字符串存在哪⾥呢？存在HTML⽂件里。例如：index.html
（4）服务器端要读取文件。
（5）将读取出来的内容返回给浏览器。

最后返回的是⼀个字符串，这个字符串的来源可能是文件，可能是缓存，可能来自于数据库。
—————————————————————————————————————

服务器：严格的说，服务器是⼀台计算机，这台计算机，只提供服务。（不是用户用的）

但是，我们常说的这个服务器，指的是服务容器，不是服务器。

服务容器：是⼀个程序。程序可以监听⼀个端口。读取文件，并且返回。

如果我们想通过访问服务器（服务容器）的方式，来访问我们自己写的页面。

我们就得装⼀个服务容器的程序。

09—页面的正确打开方式

Sublime Text
//install
//Sublime Server
Visual Studio Code
Live Server

11—发送网络请求

  1. <-- Test.html -->
  2. <html>
  3.     <head>
  4.         <script>
  5.             //1. 在浏览器中直接输入网址（无法用代码控制）
  6.             //2. location.href="url",可以发出网络请求，但是页面会发生跳转。(页面会跳转)
  7.             //3. 带有src属性的标签。请求是可以发出的，服务端是可以处理的也是可以返回的。但是返回之后，能否被应用，还要看浏览器。(页面无法处理返回结果)
  8.             //4. 带有href属性的标签。请求是可以发出的，服务端是可以处理的也是可以返回的。但是返回之后，能否被应用，还要看浏览器。（页面无法处理返回结果）
  9.             //5. 带有action属性的标签。例如form表单，也可以向后端发出请求。但是form表单发出请求之后，也会页面跳转。（页面会跳转）
  10.             // 希望有一种方式，可以用代码控制，页面不会跳转，服务端返回的结果我可以用js继续处理。
  11.             //6. ajax
  13.             //要素
  14.             //(1)请求方式，get,post
  15.             //(2)url
  16.             var xhr = null;
  17.             if (window.XMLHttpRequest) {
  18.                 xhr = new XMLHttpRequest();
  19.             } else {
  20.                 xhr = new ActiveXObject("Microsoft.XMLHttp");
  21.             }
  22.             xhr.open("get", "http://developer.duyiedu.com/edu/testAjaxCrossOrigin");
  23.             xhr.send();
  24.         </script>
  25.     </head>
  26.     <body>
  27.         hello, world
  28.         <!--<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563046187297&di=794ad62636c333887ea40fd5b0e2142f&imgtype=0&src=http%3A%2F%2Fs08.lmbang.com%2FM00%2FB8%2FBF%2FecloD1viwF-AZvtDAABcsRk2Fzw797.jpg">-->
  29.         <!--<iframe src="http://www.baidu.com"></iframe>-->
  30.     </body>
  31. </html>

12—跨域

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

哪些资源算跨域请求的资源？
1.后端接⼝的数据。
2. 其它域的cookie
3. 其它域的缓存

什么是其它的域？怎么样算跨域？
页面本身：有协议（http/https）,域名，端⼝
要请求的数据：http://www.baidu.com:80 //默认端口号 — 80
协议，域名，端⼝这三个，有任意⼀个不⼀样就算跨域。

跨域这个⾏为，发⽣在哪⾥？
答案：
1.即使跨域了（协议，域名，端⼝号有不⼀样的），请求也可以发出。
2.服务器端也是可以接收的。
3.服务器端也是可以正常处理的。
4.服务器端也是可以正常返回数据。
5.浏览器也能接收到这些数据。
6.接收到之后，发现当前页面的域和请求的域不同，所以判定为跨域。
7.我们的代码在这等着结果呢，但是因为浏览器判定跨域了，不会把结果传递给我们的代码。

虽然跨域了，但是我们依然需要这个数据，怎么办？
解决跨域问题：

  1. 后端（别人家的）配合我们进行跨域。

pan.baidu.com ——> zhidao.baidu.com //二级域名
（1）JSONP（正常的情况，返回的数据都是JSON格式。JSONP是⼀种特殊的格式。） //jsonp必须传一个参数callback
（2）后端设置Access-Control-Allow-Origin属性以⽀持跨域。（聊天机器⼈课讲，因为需
要nodejs）

  1. 后端不配合我们进⾏跨域。

（3）iframe（只能显示，不能控制）
（4）通过后端代理（自己的后端）（后面聊天机器人讲，因为需要nodejs）

13—原生JS发送Ajax

  1. <-- Test2.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  8. </head>
  9. <body>
  10.     <div id="test"></div>
  12.     <script>
  13.         var xhr = null;
  14.         if (window.XMLHttpRequest) {
  15.             xhr = new XMLHttpRequest();
  16.         } else {
  17.             xhr = new ActiveXObject("Microsoft.XMLHttp");
  18.         }
  19.         xhr.open("get", "http://developer.duyiedu.com/edu/testAjaxCrossOrigin", false);
  20.         xhr.onreadystatechange = function () {
  21.             //readyState == 4表示请求完成，已经接收到数据。
  22.             //status == 200  网络请求，结果都会有一个状态码。来表示这个请求是否正常
  23.             //200表示请求成功
  24.             // http状态码
  25.             //2**表示成功
  26.             //3**表示重定向
  27.             //4**表示客户端错误,404页面没找到。
  28.             //5**表示服务端错误
  29.             if (xhr.readyState == 4 && xhr.status == 200) {
  30.                 // 显示在页面
  31.                 document.getElementById("test").innerText = xhr.responseText;
  32.                 // 转化为json
  33.                 var data = JSON.parse(xhr.responseText);
  34.                 console.log(data);
  35.             }
  36.         }
  37.         xhr.send();
  38.         //如果open第三个参数传true，或者不传，为异步模式。如果传false，为同步模式。
  39.         //false会先打印对象，然后输出console.log
  40.         console.log("====");
  41.         console.log("+++");
  43.         // 在计算机的世界里，异步与同步和现实世界中是相反的。
  44.         // 在计算机的世界里，同步表示串行。异步表示同时进行。可以理解为同线程和异线程。
  45.     </script>
  46. </body>
  47. </html>

14—JOSNP的使用与特性

  1. <-- Test3.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <script src="jquery.js"></script>
  8.     <script>
  9.         //jsonp格式哪里特殊？
  10.         //发送的时候，会带上一个参数callback
  11.         //返回的结果不是json
  12.         //callback的名 + ( + json + );
  13.         $.ajax({
  14.             url: "http://developer.duyiedu.com/edu/testJsonp",
  15.             type: "post",    //get
  16.             dataType: "jsonp",
  17.             success: function (data) {
  18.                 console.log(data);
  19.             }
  20.         });
  21.     </script>
  22. </head>
  23. <body>
  25. </body>
  26. </html>

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

15—JSONP原理

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

  1. <-- TestJsonp.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  8.     <script>
  9.         //因为我想从一个接口获取一个数据
  10.         //但是这个接口和当前页面不是同源的。（也就是跨域了）
  11.         //但是这个接口是支持JSONP的。
  13.         //script标签，有src属性，所以可以发出网络请求
  14.         //script标签，虽然可以引用其他域的资源，浏览器不限制。
  15.         //但是，浏览器会将返回的内容，作为js代码执行。
  17.         //asd({"status":"ok","msg":"Hello! There is DuYi education!"})
  18.         //相当于调用了asd方法，传入了一个json对象作为参数。
  20.         var $ = {
  21.             ajax: function (options) {
  22.                 var url = options.url;
  23.                 var type = options.type;
  24.                 var dataType = options.dataType;
  25.                 //判断是否同源（协议，域名，端口号）
  26.                 //获取目标url的域
  27.                 var targetProtocol = "";//目标接口的协议
  28.                 var targetHost = "";//目标接口的host，host是包涵域名和端口的
  29.                 //如果url不带http，那么访问的一定是相对路径，相对路径一定是同源的。
  30.                 if (url.indexOf("http://") == 0 || url.indexOf("https://") == 0) {
  31.                     var targetUrl = new URL(url);
  32.                     targetProtocol = targetUrl.protocol;
  33.                     targetHost = targetUrl.host;
  34.                 } else { //同源
  35.                     targetProtocol = location.protocol;
  36.                     targetHost = location.host;
  37.                 }
  38.                 //首先判断是否为jsonp，因为不是jsonp不用做其他的判断，直接发送ajax
  39.                 if (dataType == "jsonp") {
  40.                     //要看是否同源
  41.                     if (location.protocol == targetProtocol && location.host == targetHost) {//表示同源
  42.                         //此处省略。因为同源，jsonp会当做普通的ajax做请求
  43.                     } else {//不同源，跨域
  44.                         //随机生成一个callback               随机数
  45.                         var callback = "cb" + Math.floor(Math.random() * 1000000);
  46.                         //给window上添加一个方法
  47.                         window[callback] = options.success;
  48.                         //生成script标签。
  49.                         var script = document.createElement("script");
  50.                         if (url.indexOf("?") > 0) {//表示已经有参数了
  51.                             // 多加一个参数
  52.                             script.src = url + "&callback=" + callback;
  53.                         } else {//表示没有参数
  54.                             script.src = url + "?callback=" + callback;
  55.                         }
  56.                         script.id = callback;
  57.                         document.head.appendChild(script);
  58.                     }
  59.                 }
  60.             }
  61.         }
  63.         //http://developer.duyiedu.com/edu/testJsonp?callback
  65.         $.ajax({
  66.             url: "http://developer.duyiedu.com/edu/testJsonp",
  67.             type: "get",
  68.             dataType: "jsonp",
  69.             success: function (data) {    //成功之后的回调函数
  70.                 // 处理参数是用户自己写的
  71.                 console.log(data);    //date --> json
  72.             }
  73.         });
  74.     </script>
  75. </head>
  76. <body>
  78. </body>
  79. </html>