HTTP和AJAX重点知识

成为栈开发工程师需要掌握的技术栈

如何成为一名初级全栈开发工程师

什么是全栈开发工程师？

全栈（全站）开发工程师(FULL-STACK)：前后端都可以自己独立完成开发

[前端]

HTML（5）+ CSS（3）

JAVASCRIPT（JQ，VUE，REACT）

[后端]

Java (JSP)

Python

Node

PHP

C#（.net->dot net） (ASP.NET)

C

...

[数据库]

mysql

sql server

oracle

mongodb （和node结合紧密的）

...

[自动化]

git / svn

webpack(基于NODE运行的)

服务器部署工具（iis/Apache/nginx...）

linux操作系统

https://insights.stackoverflow.com/survey/2018

真实项目的部署流程(以及一点职业发展建议)

前端和后端是如何通信的？

前端：客户端

后端：服务器端

所谓的全栈，其实就是自己可以实现客户端和服务端程序的编写，而且还可以实现两端之间的通信

职业规划建议：

培养自己的人脉圈，建立自己的影响力

1. 壮大自己的综合能力
2. 经常参加一些活动
3. 开放分享（做讲师分享自己的智慧，写自己的个人博客做技术分享）

4. 自己做一个技术博客

   • 本地开发（当前项目可以在本地预览）
   • 部署到服务器上，让别人可以通过域名或者外网访问
   • 1. 购买一台服务器（阿里云独立主机，虚拟服务器等）https://wanwang.aliyun.com
     2. 购买域名
     3. 把自己做的项目传到服务器上
     4. 让域名和服务器关联(DNS解析：域名解析)
     5. 在服务器上发布或部署我们的项目（iis，nginx，apache...）
   • 做一些推广（SEO推广，友情链接交换，技术文章持续更新）

     使用FileZilla进行FTP上传

     

客户端和服务器端是如何通信的？

经典面试题：当我们在浏览器地址中输入一个URL地址，到最后看到页面，中间都经历了哪些事情？

[Request 请求阶段]

1. 首先根据客户端输入的域名，到DNS服务器上进行反解析（通过服务器找到对应外网IP）
2. 通过找到的外网IP，找到对应的服务器
3. 通过在地址栏中输入的端口号（没输入是因为不同协议有自己的默认端口号），找到服务器上发布的对应的项目

   [Response 响应阶段]

4. 服务器获取到请求资源文件的地址，例如：/books/index.html,把资源文件中的源代码找到
5. 服务器端会把找到的源代码返回给客户端（通过HTTP等传输协议反回的）

   [浏览器自主渲染]

6. 客户端接收到源代码后，会交给浏览器的内核（渲染引擎）进行渲染，最后有浏览器绘制出对应的页面

客户端和服务器端交互(通信)模型

HTTP等传输协议讲解

URL，URI，URN

URI：统一资源标识符

URL：统一资源定位

URN： 统一资源名称

URI = URL + URN

一个完整的URL包含很多部分：

例如：https://www.haiyang.com/stu/index.html?name=hy&age=6#good

第一部分：传输协议

• 传输协议是用来完成客户端和服务端数据（内容）传输的，类似于快递小哥，负责把客户和商家的物品来回传递
• 1. 客户端不仅可以向服务器发送请求，而且还可以把一些参数传递给服务器

  2. 服务器端也可以把内容返回给客户端

     客户端和服务器端传输的内容总称为HTTP报文，这些报文信息都是基于传输协议完成传输的，客户端传递给服务器叫做请求（Request），服务器端返回给客户端叫做响应（Response），request+response两个阶段统称为一个HTTP事务（事务：一件完整的事情）

     HTTP事务：

     1. 当客户端向服务器端发送请求。此时客户端和服务器端会建立一个传输通道（链接通道），传输协议就是基于这个通道把信息进行传输的
     2. 当服务器端接收到请求信息，把内容返回给客户端后，传输通道会自动关闭

 传输协议分类：

 http:超文本传输协议（客户端和服务器端传输的内容除了文本以外，还可以传输图片，音频，视频等文件流【二进制编码/BASE64码】，以及传输XML格式的数据等），是目前市场上应用最广泛的传输协议

 https: http ssl，他比http更加安全，因为数据内容的传输通道是经过ssl加密的（他需要在服务器端进行特殊的处理），所以涉及资金类的网站一般都是https协议的

 ftp:资源文件传输协议，一般用于客户端把资源文件（不是代码）上传到服务器端，或者从服务器端下载一些资源文件（一般ftp传输的内容会比http这类协议传输的内容多）

HTTP报文的一些核心知识

HTTP报文

1. 起始行

   请求起始行

   响应起始行

2. 首部（头）

   请求头：内置请求头，自定义请求头

   响应头：内置响应头，自定义响应头

   通用头：请求和响应都有的

3. 主体

   请求主体

   响应主体

请求xxx都是客户端设置的信息，服务端获取这些信息

响应xxx都是服务器端设置的信息，客户端用来接收这些信息

在谷歌浏览器控制台Network选项中，我们可以看见当前客户端和服务器端交互的全部信息

总结：

客户端传递给服务器端数据

1. URL问号传递参数
2. 设置请求头
3. 设置请求主体

服务器端返回给客户端内容

1. 设置响应头（例如服务器时间）
2. 设置响应主体

第二部分：域名

设置域名其实就是给不好记忆的服务器外网ip设置了一个好记的名字

一级域名（顶级域名）：qq.com

二级域名：www.qq.com，sports.qq.com，。。。

三级域名：kkk.sports.qq.com

第三部分：端口号

在服务器发布项目的时候，我们可以通过端口号区分当前服务器上的不同项目

一台服务器的端口号取值范围：0-65535之间，如果电脑上安装了许多程序，有一些端口号就是被占用了

一个IP地址的端口可以有65536（2^16）个，端口号只有整数，范围是从0 到65535（2^16-1）。

端口有三个类型：

1. 公认端口（Well Known Ports）是众所周知的端口号，范围从0到1023。

2. 动态端口（Dynamic Ports）范围是从49152到65535。之所以称为动态端口，是因为它 一般不固定分配某种服务，而是动态分配。

3. 注册端口（RegisteredPorts）范围是从1024到49151，分配给用户进程或应用程序。这些进程主要是用户选择安装的一些应用程序，而不是已经分配好了公认端口的常用程序。这些端口在没有被服务器资源占用的时候，可以用用户端动态选用为源端口。

HTTP: 默认端口号80

HTTPS：默认端口号443

FTP：默认端口号21

对于上述三个端口号其实是很重要的，如果被其他程序占用，我们就不能使用了，所以在服务器上一般是禁止安装其他程序的

第四部分：请求资源的文件路径名称

/boos/index.html

在服务器中发布项目的时候，我们一般都会配置一些默认文档，用户即使不输入请求文件的名称，服务器也会找到默认文档（一般默认文档都是 index/default ...）

我们通常为了做SEO优化，会把一些动态页面的地址（xxx.py，xxx.jsp，xxx.php ...）进行伪URL重写（需要服务器处理的）

例如：https://item.jd.com/342535.html

不可能 有一个商品就写一个详情页，肯定是同一个详情页做不同的处理

1. 第一种方案：

   由后台语言根据详情页模板动态生成具体的详情页面

2. 第二种方案：

   当前页面就是一个页面，例如：detail.html/detail.php，我们做详情页面的时候，开发是按照detail.html?id=787878来开发的。但是这种页面不方便做SEO优化，此时我们把真实的地址进行重写，重写为我们看到的787878.html

第五部分：问号传参

?name=hy&age=6

把一些值通过xxx=xxx的方式，放在一个URL的末尾，通过？传递参数

【作用】

1. 在AJAX请求中，我们可以通过问号传递参数的方式，客户端把一些信息传递给服务器，服务器根据传递信息的不一样，返回不同的数据

// $.ajax(url,{});
// $.get(url,function(){});对于AJAX请求的特殊写法，原理还是基于AJAX方法实现的  $.post / $.script

$.ajax({
    url: 'getPersonInfo?id=11'
    ...
});

// 当前案例，我们传递给服务器的编号是多少，服务器就会把对应编号的人员返回

1. 消除AJAX请求中GET方式缓存

$.ajax({
    url: 'xxx?_=0.3434',
    method: 'get'
});
// 我们会在请求URL末尾追加一个随机数 _=随机数，保证每一次请求的URL地址都是不一样的，以此来消除GET请求遗留的缓存问题

1. 通过URL传递参数的方式，可以实现页面之间信息的通信，例如：我们有两个页面A/B，A是列表页面，B是详情页面，点击A中的某一条信息，进入到唯一的详情页B，如何展示不同的信息，这种操作就可以基于URL问号传递参数来实现

例如：

http://sports.qq.com/kbsweb/g...:123

http://sports.qq.com/kbsweb/g...:125

在进入到game.html页面的时候，我们可以获取URL传递的参数值，根据传递参数值的不一样，从服务器端获取不同的数据展示

在列表页面进行页面跳转的时候，我们需要记住的是跳转的同时传递不同的参数值

<a href='game.html?mid=xxx'

第六部分：HASH值

/#xxx

URL末尾传递的#号就是HASH值（）哈希值

【作用】

1. 页面中锚点定位
2. 前端路由（SPA 单页面开发）