js知识梳理十三

发表于 | 分类于

一：减少HTTP请求的次数及请求内容的大小

  1. URL/URN/URI
    URI=URL+URN
    URI：统一资源标识符
    URL：统一资源定位符
    URN：统一资源名称

  2. http://www.zhufengpeixun.cn:80/stu/index.html?name=xxx&age=25#teacher

传输协议

用来传输客户端和服务器端交互的信息的（类似于快递小哥）

  • HTTP：超文本传输协议（除了传递普通的文本，还可以传递文件流或者进制编码等信息），是目前最常用的WEB传输协议
  • HTTPS：基于SSL（Secure Sockets Layer 安全套接层）加密的HTTP传输协议，比HTTP更加的安全（涉及支付的网站一般都是基于HTTPS完成的）
  • FTP：文件传输协议，一般用来实现资源文件在服务器上的上传下载

[域名] Domain Name

一级域名（顶级域名）  www.qq.com
二级域名   sports.qq.com
三级域名   kbs.sports.qq.com

.com 供商用的国际域名
.cn 供商用的中文域名
.net 用于网络供应服务商（系统类的经常使用NET域名）
.org 用于官方组织
.edu 用于教育院校
.gov 用于政府机构

端口号

用来区分同一台服务器上不同服务的标识（基于WEB服务管理器创建服务的时候可以指定），不同服务之间一般是不能使用相同的端口号的

  • HTTP =>默认端口号80
  • HTTPS =>默认端口号443
  • FTP =>默认端口号21

  • 如果当前网站服务，采用的是协议对应的默认端口管理，那么当用户输入网址的时候可以不指定端口号，浏览器会默认把用户把默认的端口传递给服务器

    一台服务器上的端口号范围：0~65535之间

    WEBSTORM预览页面：WS把自己的电脑当做服务器，在服务器上创建一个服务，端口号是63342，自己电脑上的浏览器预览自己电脑上的服务，属于本机服务请求，用localhost(127.0.0.1)本地域名即可
    http://localhost:63342/201802LESSON/WEEK7/0522DAY1/1.html

    服务器上安装一款应用都可能会作为一个服务，占用一个端口号

请求路径名称

例如：/stu/info 这种没有任何后缀信息，一般都不是用来请求资源文件的，而是用于AJAX数据请求的接口地址（如果后缀是.json类的，也是同理），但是有一种除外 /stu/info/ 这种的很可能不是接口地址，而是没有指定请求的资源名称，服务器会请求默认的资源文件，一般都是index.html/default.html…

DHTML

动态页面，泛指当前页面中的内容不是写死的而是动态绑定的，例如.jsp/.php/.aspx…这些页面中的数据都是基于AJAX或者是后台编程语言处理，由服务器端渲染，最后把渲染后的结果返回给客户端呈现的

问号传参及哈希值

  • ?xxx=xxx&…#xxx

在HTTP事务中，问号传参是客户端把信息传递给服务器的一种方式(也有可能是跳转到某一个页面，把参数值传递给页面用来标识的)

  • 哈希值一般都跟客户端服务器交互没啥关系，主要用于页面中的锚点定位和HASH路由切换

HTTP报文

1
2
3
4
5
6
7
8
9
10
起始行：请求起始行、响应起始行
首部（头）：请求头、响应头、通用头
主体：请求主体、响应主体

General 通用头

`Request URL`:
 http://www.zhufengpeixun.cn/  请求地址
Request Method: GET  请求方式:GET/POST/DELETE/PUT/HEAD/OPTION...
Status Code: 304 Not Modified   响应的

HTTP状态码

Remote Address: 125.39.174.137:80 主机地址(服务器外网IP地址)
Referrer Policy: no-referrer-when-downgrade

1
2

Request Headers 请求头 [客户端设置，服务器接收]

  • GET / HTTP/1.1 =>起始行(描述当前请求的一些基本信息：用的是1.1版本传输协议进行内容传输的)
  • Host: www.zhufengpeixun.cn
  • Connection: keep-alive
  • Cache-Control: max-age=0
  • Upgrade-Insecure-Requests: 1
  • User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) - Chrome/66.0.3359.139 Safari/537.36
  • Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8
  • Accept-Encoding: gzip, deflate
  • Accept-Language: zh-CN,zh;q=0.9
  • Cookie: … =>cookie信息一般都是放到头文件中实现和服务器端的数据通信的
  • If-Modified-Since: Sun, 06 May 2018 10:02:42 GMT

Response Headers 响应头 [服务器端设置，客户端获取]

1
2
3
4
5
6
7
HTTP/1.1 304 Not Modified  =>响应起始行（HTTP状态码）
Date: Tue, 22 May 2018 09:18:56 GMT  =>服务器响应内容时候的“服务器端时间”（客户端获取这个时间的时候已经和真实的时间产生误差了，因为服务器返回内容到客户端接收到，也是需要时间的），并且这个时间是格林尼治时间（比北京时间慢8小时，北京时间是GMT+0800）
Connection: keep-alive
ETag: "700a6f-17f43-56b86a77513d3"
Vary: Accept-Encoding,User-Agent
Server: yunjiasu-nginx  //=>管理WEB服务的工具
CF-RAY: 41ee32c192db66b8-TSN

Response [响应主体]

1
服务器返回的是啥就是啥

Request Payload / Form Data [请求主体]

1
客户端传递给服务器的内容

HTTP报文开发和BUG调试至关重要

以后涉及到交互功能（前端<=>后台）出现问题，都按照如下方式查找问题原因

  • 打开控制台，在NET-WORK中找到当前交互的请求地址，点击进去看详情
  • 如果是传递给服务器的参数或者方式错误 [前端问题]
  • 如果服务器返回的信息有错误或者和API接口文档规定的内容不一样 [后台问题]
  • 如果返回数据是对的，但是展示有问题 [前端问题]
  • 确定是自己前端的问题后，基于断点(或者代码中的debugger)或者控制台输出等方式，开始逐步调试即可

客户端和服务器端信息交互的方式

[客户端传递给服务器]
A:问号传参
请求的URL地址末尾通过问号传参方式，把一些信息传递给服务器
/stu/info?id=12&lx=man

B:设置请求头
 客户端把需要传递给服务器的内容设置到请求头信息中（自定义请求头）,服务器可以通过接收请求头信息把内容得到

C:设置请求主体
 xhr.send([AJAX SEND中传递的内容，就是客户端设置的请求主体内容，服务器端可以接收到这些信息的]);

[服务器返回给客户端]
A:设置响应头信息
例如把服务时间通过响应头返回给客户端，客户端通过获取响应头信息得到这个时间（响应头返回的速度是优先于响应主体的）

B:设置响应主体
 主要的返回信息都在响应主体中
-------------本文结束感谢您的阅读-------------