HTTP和AJAX重点知识

时间  2019-12-04
标签 http ajax 重点 知识 栏目 HTTP/TCP 繁體版
原文   原文链接

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

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

什么是全栈开发工程师？

全栈（全站）开发工程师(FULL-STACK)：先后端均可以本身独立完成开发

[前端]javascript

HTML（5）+ CSS（3）php

JAVASCRIPT（JQ，VUE，REACT）html

[后端]前端

Java (JSP)java

Pythonnode

Nodemysql

PHPlinux

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

Cnginx

...

[数据库]

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 单页面开发）
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程