今天完成的事：稍微看了一下任务5，把任务五的登录界面稍微写了一下

明天要完成的事：起码要学会jq的ajax的请求和json格式的处理，

难题：第一个要做的就是nginx的配置，这东西之前都没用过；

收获：

10分钟配置完成：看师姐写的资料认真一点，加上之前有去试验过；

通过nginx启动一个本地http服务这个应该是刚刚用的那种

然后就是：文档：

HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包（packet）传输，主要规定了客户端和服务器之间的通信格式，默认使用80端口。

最早版本是1991年发布的0.9版。该版本极其简单，只有一个命令GET。

GET /index.html

上面命令表示，TCP 连接（connection）建立后，客户端向服务器请求（request）网页index.html。

协议规定，服务器只能回应HTML格式的字符串，不能回应别的格式。

服务器发送完毕，就关闭TCP

http 1.0版

1996年5月，HTTP/1.0 版本发布，内容大大增加。

首先，任何格式的内容都可以发送。这使得互联网不仅可以传输文字，还能传输图像、视频、二进制文件。这为互联网的大发展奠定了基础。

其次，除了GET命令，还引入了POST命令和HEAD命令，丰富了浏览器与服务器的互动手段。

再次，HTTP请求和回应的格式也变了。除了数据部分，每次通信都必须包括头信息（HTTP header），用来描述一些元数据。

其他的新增功能还包括状态码（status code）、多字符集支持、多部分发送（multi-part type）、权限（authorization）、缓存（cache）、内容编码（content encoding）等。

回应的格式是"头信息 + 一个空行（\r\n） + 数据"。其中，第一行是"协议版本 + 状态码（status code） + 状态描述"。

 Content-Type 字段

关于字符的编码，1.0版规定，头信息必须是 ASCII 码，后面的数据可以是任何格式。因此，服务器回应的时候，必须告诉客户端，数据是什么格式，这就是Content-Type字段的作用。

MIME type，每个值包括一级类型和二级类型，还可以在尾部使用分号，添加参数。客户端请求的时候，可以使用Accept字段声明自己可以接受哪些数据格式。

由于发送的数据可以是任何格式，因此可以把数据压缩后再发送。Content-Encoding字段说明数据的压缩方法。

客户端在请求时，用Accept-Encoding字段说明自己可以接受哪些压缩方法。

HTTP/1.0 版的主要缺点是，每个TCP连接只能发送一个请求。发送数据完毕，连接就关闭，如果还要请求其他资源，就必须再新建一个连接。

TCP连接的新建成本很高，因为需要客户端和服务器三次握手，并且开始时发送速率较慢（slow start）。所以，HTTP 1.0版本的性能比较差。随着网页加载的外部资源越来越多，这个问题就愈发突出了。

1997年1月，HTTP/1.1 版本发布，只比 1.0 版本晚了半年。它进一步完善了 HTTP 协议，一直用到了20年后的今天，直到现在还是最流行的版本。

1.1 版的最大变化，就是引入了持久连接（persistent connection），即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive

客户端和服务器发现对方一段时间没有活动，就可以主动关闭连接。不过，规范的做法是，客户端在最后一个请求时，发送Connection: close，明确要求服务器关闭TCP连接。

目前，对于同一个域名，大多数浏览器允许同时建立6个持久连接。

1.1 版还引入了管道机制（pipelining），即在同一个TCP连接里面，客户端可以同时发送多个请求。这样就进一步改进了HTTP协议的效率。

举例来说，客户端需要请求两个资源。以前的做法是，在同一个TCP连接里面，先发送A请求，然后等待服务器做出回应，收到后再发出B请求。管道机制则是允许浏览器同时发出A请求和B请求，但是服务器还是按照顺序，先回应A请求，完成后再回应B请求。

2015年，HTTP/2 发布。它不叫 HTTP/2.0，是因为标准委员会不打算再发布子版本了，下一个新版本将是 HTTP/3。

5.1 二进制协议

HTTP/1.1 版的头信息肯定是文本（ASCII编码），数据体可以是文本，也可以是二进制。HTTP/2 则是一个彻底的二进制协议，头信息和数据体都是二进制，并且统称为"帧"（frame）：头信息帧和数据帧。

二进制协议的一个好处是，可以定义额外的帧。HTTP/2 定义了近十种帧，为将来的高级应用打好了基础。如果使用文本实现这种功能，解析数据将会变得非常麻烦，二进制解析则方便得多。

HTTP/2 将每个请求或回应的所有数据包，称为一个数据流（stream）。每个数据流都有一个独一无二的编号。数据包发送的时候，都必须标记数据流ID，用来区分它属于哪个数据流。

另外还规定，客户端发出的数据流，ID一律为奇数，服务器发出的，ID为偶数。

客户端还可以指定数据流的优先级。优先级越高，服务器就会越早回应。

HTTP 协议不带有状态，每次请求都必须附上所有信息。所以，请求的很多字段都是重复的，比如Cookie和User Agent，一模一样的内容，每次请求都必须附带，这会浪费很多带宽，也影响速度。

HTTP/2 对这一点做了优化，引入了头信息压缩机制（header compression）。一方面，头信息使用gzip或compress压缩后再发送；另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段了，只发送索引号，这样就提高速度了。

HTTP/2 允许服务器未经请求，主动向客户端发送资源，这叫做服务器推送（server push）。

常见场景是客户端请求一个网页，这个网页里面包含很多静态资源。正常情况下，客户端必须收到网页后，解析HTML源码，发现有静态资源，再发出静态资源请求。其实，服务器可以预期到客户端请求网页后，很可能会再请求静态资源，所以就主动把这些静态资源随着网页一起发给客户端了。

具体来说，AJAX 包括以下几个步骤。

1. 创建 XMLHttpRequest 实例
2. 发出 HTTP 请求
3. 接收服务器传回的数据
4. 更新网页数据

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

var xhr = new XMLHttpRequest();

一旦新建实例，就可以使用open()方法发出 HTTP 请求。

xhr.open('GET', 'http://www.example.com/page.php', true);

然后，指定回调函数，监听通信状态（readyState属性）的变化。

ajax.onreadystatechange = handleStateChange;

function handleStateChange() {

 // ...

}

上面代码中，一旦XMLHttpRequest实例的状态发生变化，就会调用监听函数handleStateChange

一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回以下值。

• 0，表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
• 1，表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
• 2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
• 3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。
• 4，表示服务器返回的数据已经完全接收，或者本次接收已经失败。

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readyStateChange事件。

上面代码中，xhr.readyState等于4时，表明脚本发出的 HTTP 请求已经成功。其他情况，都表示 HTTP 请求还在进行中。

看到这里感觉有点吃力：先实验一下；

添加点击事件之前还要限制输入框；输入内容号码框必须为数字；密码框不知道有什么要求

HTML <input> placeholder 属性

发现了这个属性提示文字：输入时自动消失

还有这个感觉还是要的不过这个任务不搞这些花里胡巧的就没写

JS实现INPUT框输入时将之前的值替换为*，停止输入一秒后将最后的字符替换为*

然后使用js发起异步请求，将输入框的值发送给接口；这里我用的是submit本身就会提价给web服务器；所以先组织了默认操作；然后不确定要不要关联还是关联一下

发送异步请求？？？异步执行函数我倒是看过：异步接收请求刚刚也看了；异步发出请求是啥意思？？

百度：js用XMLHttpRequest发送异步请求

那异步请求倒底是发送GET请求呢？还是post请求呢？还是2个都是呢？

按照文档上说：先创建一个对象在使用open方法发出http请求

不过没看懂open后面的true是什么意思百度：

Window open() 方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

window.open(URL,name,specs,replace)

url：可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口

name：

replace“：Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。

false - URL 在浏览历史中创建新的条目。

但是我要给哪个服务器发送请求呢？？

XMLHttpRequest对象是 AJAX 的主要接口   用于浏览器与服务器之间的通信

额使用javascript发起异步请求，将输入框的值发送给接口发起异步请求了，但是这个输入框的值发送给接口？？

没看懂接口是xmlhttorequest对象啊？？

两者的区别在于代理的对象不一样：正向代理代理的对象是客户端，反向代理代理的对象是服务端

Nginx就是性能非常好的反向代理服务器，用来做负载均衡。

哇，纠结了半天还是没搞懂这个到底什么鬼？？？

把数据发送给接口，也就会通过get方法和post方法发送请求给那个界面吗？？

将ajax又过了一遍；

具体如下：

ajax是一个可以在不刷新页面的情况下，改变网页部分内容的方法：

创建为：

var xhr = new XMLHttpRuest();

主要用到open（）和send（）两个方法发送请求；

open（）用于指定HTTP请求的参数；

有五个对象：发送http的方法，有：GET,POST,PUT等；

url即发送目标的URL;

async:true or false判断其是否异步；一般为true；

user：用户名（可选）；

password：用于认证的密码；（可选）；

send（）：

用于实际发出HTTP请求；

不加参数，则表示只包含一个参数；即url