http请求概述

当浏览器输入网址后

  1. 浏览器首先向DNS域名解析服务器发送请求。
  2. DNS反解析：根据浏览器请求地址中的域名，到DNS服务器中找到对应的服务器外网IP地址
  3. 通过找到外网IP，向对应的服务器发请求（首先访问服务器的WEB站点管理工具：准确来说是我们先基于工具在服务器上创建很多服务，当有客户端访问的时候，服务器会匹配出具体请求那个服务）
  4. 通过url地址中的端口号，找到服务器上对应的服务，以及服务管理的项目资源文件
  5. 服务端根据请求的地址名称或问号传参或者哈希值，把客户端要的内容进行准备和处理
  6. 把准备的内容响应给客户端（如果请求的是HTML文件或者css等这样的资源文件，服务器返回的是资源文件中的源代码【不是文件本身】）
  7. 客户端浏览器接收到服务器返回的源代码，基于自己内部的渲染引擎（内核）开始进行页面绘制和渲染
  • 首先DOM结构，生成DOM TREE
  • 自上而下运行代码，加载css等资源内容
  • 根据css生成带样式的 RENDER TREE
  • 开始渲染和绘制

客户端请求

打开请求：发送请求之前的一些配置

  1. HTTP METHOD 请求方式
  • POST：向服务端推送数据（传向服务端发送的多，向服务端获取的少）
  • GET： 向服务端推送数据（传向服务端发送的少，向服务端获取的多）
  • PUT： 像服务端存放一些内容（一般是存放文件）
  • DELETE： 删除服务端的的某些内容（一般是删除一些文件）
  • HEAD： 只想获取响应头信息，不要响应主体的内容
  • OPTIONS && TRACE： 一般使用它向服务器发送一个探测性请求，如果服务器端返回信息了，说明客户端和服务器端建立了连接，我们可以继续执行其它请求了（TRACE就是干这件事的，但是axios这个AJAX类库在基于cross domain进行跨域请求的时候，就是先发送OPTIONS请求进行探测尝试，如果能连通服务器，才会发送其他请求）
  • CONNECT： 使用TCP直接去连接 的，所以不适合在网页开发中使用
  1. URL 向服务器端发送请求API（Application Programming Interface）接口地址 3.ASYNC设置AJAX同步或者异步，默认是异步（写TRUE也是异步），FALSE是同步，项目中都是用异步编程，防止阻塞后影响后部代码执行 4.USER-NAME/USER-PASS: 用户名和密码一般不设置
    // 创建AJAX实例：IE6是不兼容的，使用new ActiveXObject来实现的let xhr = new XMLHttpRequest();// 打开请求：发送请求之前的一些配置项xhr.open([HTTP METHOD], [URL], [USER-NAME], [USER-PASS])// 事件监听：一般监听的都是 READY-STATE-CHANGE 事件（AJAX状态改变事件），基于这个事件可以获取服务器返回的响应头和响应主题内容xhr.onreadystatechange=()=>{if(xhr.readyState === 4 && xhr.status === 200) {xhr.responseText;}}// 发送AJAX请求：从这步开始，当前AJAX任务开始，如果是同步的，后面代码会等待请求成功后执行，反之不会xhr.send([请求主体内容])
复制代码

常用的POST && GET请求方式

传递服务器的方式不一样 GET是URL问号传参的方式把信息传到服务器，POST是基于 请求主题把信息传到服务器。

    [GET]xhr.open('GET', '/status/list?id=100&name=zhangsan');[POSt]xhr.send('---URL---');
复制代码

区别：

  1. GET一般应用于（向服务器传递的少一些），而POST是传给服务器的多一些，如果POST是基于问号传参方式的话会出现一些问题：URL会拼接很长，浏览器对于URL的长度有最大限度（谷歌8Kb 火狐7KB IE2KB ...）超过的部分浏览器就把他截掉了，所以POST都是使用请求主题传参的，请求主体是没有限制的，项目中会做大小限制，以防请求发送数据过大会迟迟完不成。
  2. GET不安全，POST相对安全 因为GET是基于问号传参把信息传递给服务器的，容易被骇客进行URL劫持，POST是基于请求主题传递的，相对来说不容易被劫持，所以登陆注册等安全性操作，应该用POST请求
  3. GET会产生不可控的缓存，POST不会 不可控：是浏览器自主记忆的缓存，我们无法基于js控制，项目中我们会把这个缓存干掉， GET缓存产出是因为向某个页面请求多次，浏览器会把之前的数据从缓存中拿到返回，导致拿不到新的数据（post不会）
    // GET请求处理缓存的方案：在URL后面添加一个随即小数每次会获得新数据xhr.open('GET', `/status/list?id=100&name=zhangsan&_=${Math.random()}`);
复制代码

关于XMLHttpRequest常用内置方法

var xhr = XMLHttpRequest() (ie6以下是new ActiveXObject('Microsoft.XMLHTTP')) xhr.response 响应主题 xhr.responseText 响应主题内容（JSON或者XML格式字符串都可以） xhr.responseXML 响应主体内容是XML文档 xhr.status 返回HTTP状态码 xhr.statusText 状态码描述 xhr.timeout 设置请求超时的时间 xhr.withCredentials 是否允许跨域 （FALSE） xhr.abort() 强制中断AJAX请求 xhr.getAllResponseHeaders() 获取所有响应头信息

实现简易的AJAX库

    ajax({url: "", //请求地址type: "POST",//请求方式data: { name: "super", age: 20 },//请求参数dataType: "json",success: function (response, xml) {// 此处放成功后执行的代码},error: function (status) {// 此处放失败后执行的代码}});function ajax(option) {options = options || {};options.type = (options.type || "GET").toUpperCase();options.dataType = options.dataType || "json";var params = formatParams(options.data);var xhr;//创建 - 第一步if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else if(window.ActiveObject) {    //IE6及以下xhr = new ActiveXObject('Microsoft.XMLHTTP');}//连接 和 发送 - 第二步if (options.type == "GET") {xhr.open("GET", options.url + "?" + params, true);xhr.send(null);} else if (options.type == "POST") {xhr.open("POST", options.url, true);//设置表单提交时的内容类型xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send(params);}//接收 - 第三步// xhr.status状态码// 200 OK成功（只能证明服务器返回信息了，但是信息不一定是业务所需要的）// 301 Moved Permanently 永久转移（永久重定向：域名更改，访问原始域名重定向到新的域名）// 302 Move temporarily 临时转移（临时重定项：307：网站现在是基于HTTPS协议运作的，如果访问的是HTTP协议，会基于307重定向到HTTPS协议上）// 302一般用作服务器负载均衡：当一台服务器达到最大并发数的时候，会把后续访问的用户临时转移到其他服务器机组上处理// 偶尔真实项目中会把所用的图片单独放到服务器上“图片处理服务器”，这样减少主服务器的压力，当用户向主服务器访问图片的时候，主服务器都把它转移到图片服务器上处理// 304 Not Modified设置缓存：对于不经常更新的文件，例如：css/js/html/img等，服务器会结合客户端设置304缓存，第一次加载的资源会缓存到客户端了，下次在获取的时候，会从缓存中加获取，如果更新了，服务端会通过最后修改时间来强制让客户端从服务器从新拉取，基于Ctrl+F5强制刷新页面，304的缓存就没有用了。// 400 Bad Request 请求参数错误// 401 Unauthorized 无权限访问// 404 NOt Found 找不到资源（地址不存在）// 413 Request Entity Too Large 和服务器交互的内容资源超过服务器最大限制xhr.onreadystatechange = function () {if (xhr.readyState == 4) {var status = xhr.status;if (status >= 200 && status < 300 || status == 304) {options.success && options.success(xhr.responseText, xhr.responseXML);} else {options.error && options.error(status);}}}}// 拼接get方式传参?号后面urlfunction formatParams(data) {var arr = [];for (var item in data) {arr.push(item + "=" + data[item]);}arr.push(("v=" + Math.random()).replace("."));return arr.join("&");}
复制代码

转载于:https://juejin.im/post/5c8ce423518825431116c76b

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/252128.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Halcon：二维仿射变换实例探究

Halcon：二维仿射变换实例探究

二维仿射变换&#xff0c;顾名思义就是在二维平面内&#xff0c;对对象进行平移、旋转、缩放等变换的行为&#xff08;当然还有其他的变换&#xff0c;这里仅论述这三种最常见的&#xff09;。 Halcon中进行仿射变换的常见步骤如下&#xff1a; ① 通过hom_mat2d_identity算子…
阅读更多...
剑指Offer-数组中重复的数字

剑指Offer-数组中重复的数字

题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内。 数组中某些数字是重复的&#xff0c;但不知道有几个数字是重复的。也不知道每个数字重复几次。请找出数组中任意一个重复的数字。 例如&#xff0c;如果输入长度为7的数组{2,3,1,0,2,5,3}&#xff0c;那么对应的…
阅读更多...
CSS2--字体样式

CSS2--字体样式

## CSS2 字体样式 ##### font-family 字体族 - 规定元素的字体系列 - 把多个字体作为一个"回退"系统保存.保证浏览器的支持 - Microsoft YaHei, tahoma, arial, Hiragino Sans GB, sans-serif ##### font 字体类型 - 衬线字体(serif)&#xff1a;在字的笔划开始及结束…
阅读更多...
虚拟机中访问连接在物理机上的摄像机(使用桥接)

虚拟机中访问连接在物理机上的摄像机(使用桥接)

最近在使用摄像机SDK做开发&#xff0c;开发好之后物理机上没有环境&#xff0c;所以弄了个虚拟机进行测试&#xff0c;就如何在虚拟机中连接摄像机做下记录。 步骤 &#xff11;.物理机上对虚拟机的适配器和摄像机的适配器设置为相同网段并进行桥接&#xff08;注意与摄像机网…
阅读更多...
Halcon：手眼标定——眼在手外与眼在手上

Halcon：手眼标定——眼在手外与眼在手上

为什么需要九点标定&#xff1f; 为了得到机械和相机的关系&#xff0c;就好比人的手和眼的关系。我们用手将一个物体放到空间的一个位置&#xff0c;用眼看到这个物体&#xff0c;这也存在两个坐标系&#xff0c;一个是手所在的运动空间的坐标系&#xff0c;一个是视网膜上成像…
阅读更多...
grep 正则匹配

grep 正则匹配

\{0,n\}&#xff1a;至多n次 \{\ 匹配/etc/passwd文件中数字出现只是数字1次到3次 匹配/etc/grub2.cfg文件以一个空格开头匹配一个字符的文件的所有行 显示以LISTEN结尾的行 显示匹配右边以LISTEN结尾匹配一个或者多个空格的所有输出 分组及引用&#xff1a;讲一个或者多个字符…
阅读更多...
解决bash: mysql: command not found 的方法

解决bash: mysql: command not found 的方法

rootDB-02 ~]# MySQL -u root-bash: mysql: command not found 原因:这是由于系统默认会查找/usr/bin下的命令&#xff0c;如果这个命令不在这个目录下&#xff0c;当然会找不到命令&#xff0c;我们需要做的就是映射一个链接到/usr/bin目录下&#xff0c;相当于建立一个链接文…
阅读更多...
C#调用 Halcon引擎执行代码

C#调用 Halcon引擎执行代码

Halcon引擎可以直接执行halcon代码&#xff0c;把halcon程序当做&#xff23;#的一个方法来调用&#xff0c;这样可以减轻&#xff23;#这边的程序负担&#xff0c;而且可以避免内在泄露等bug的出现。还有一种好处是方便调试视觉代码&#xff0c;你只需要启动halcon&#xff0c…
阅读更多...
面试时如何优雅地自我介绍？

面试时如何优雅地自我介绍？

阅读本文大概需要 3.4 分钟。 1.题记 有读者提问&#xff1a;如何在面试当中做一个最好的自我介绍&#xff1f; 结合了一下自己面试以及面试别人&#xff08;模拟面试&#xff09;的一些经验&#xff0c;简单总结了几点&#xff0c;供大家参考。 2.为什么要自我介绍 在面试官要…
阅读更多...
Cache的一些总结

Cache的一些总结

输出缓存 这是最简单的缓存类型&#xff0c;它保存发送到客户端的页面副本&#xff0c;当下一个客户端发送相同的页面请求时&#xff0c;此页面不会重新生成&#xff08;在缓存有限期内&#xff09;&#xff0c;而是从缓存中获取该页面&#xff1b;当然由于缓存过期或被回收&am…
阅读更多...
thinkphp5.0学习（九）：TP5.0视图和模板

thinkphp5.0学习（九）：TP5.0视图和模板

原文地址&#xff1a;http://blog.csdn.net/fight_tianer/article/details/78602711 一、视图 1.加载页面 1.继承系统控制器类return $this->fetch(参数1&#xff0c;参数2&#xff0c;参数3&#xff0c;参数4);参数1&#xff08;字符串&#xff09;&#xff1a;模板渲染参数…
阅读更多...
C#中调用halcon引擎来执行hdev程序

C#中调用halcon引擎来执行hdev程序

调用halcon引擎有两个直接的好处&#xff1a; 避免C# 与halcon代码混编时可能产生的内存泄露问题 修改halcon程序时不用重新编译C# 勇哥写了一个示例&#xff0c;详细的应用感受和缺点限制勇哥会持续做相关的总结给大家分享。 对于halcon17来说&#xff0c;要运行下面的程序…
阅读更多...
Node.js Up and Runing 学习日记(八)

Node.js Up and Runing 学习日记(八)

目录 连接池基于一个简单的Socker.io服务器连接池 生产环境通常由多种资源组成: web服务器,缓存服务器和数据库服务器. 数据库服务器通常部署在web服务器之外的独立机器上,这使得面向公众的网站不必重新配置和修改复杂的数据库群就可以垂直增长了. 基于 为每一个请求创建一个甚…
阅读更多...
036有效的数独

036有效的数独

1 #include "000库函数.h"2 3 //一看&#xff0c;没想出什么好法子&#xff0c;就遍历了4 //最重要的是如何比较小九宫格的数据5 //44ms6 class Solution {7 public:8 bool isValidSudoku(vector<vector<char>>& board) {9 for (int i …
阅读更多...
WinAPI——Windows 消息

WinAPI——Windows 消息

消息值 注释 WM_NULL$0000 WM_CREATE$0001 WM_DESTROY$0002 WM_MOVE$0003 WM_SIZE$0005 WM_ACTIVATE$0006 WM_SETFOCUS$0007 WM_KILLFOCUS$0008 WM_ENABLE$000A WM_SETREDRAW$000B WM_SETTEXT$000C WM_GETTEXT$000D WM_GETTEXTLENGTH$000E WM_PAINT$000F WM_CLOSE$0010 WM_QUER…
阅读更多...
AciveMQ小结|最后有视频

AciveMQ小结|最后有视频

1 JMS 在介绍ActiveMQ之前&#xff0c;首先简要介绍一下JMS规范。 1.1 JMS的基本构件 1&#xff0e;1&#xff0e;1 连接工厂 连接工厂是客户用来创建连接的对象&#xff0c;例如ActiveMQ提供的ActiveMQConnectionFactory。 1&#xff0e;1&#xff0e;2 连接 JMS Connection封…
阅读更多...
Build 2016: 发布明天的云创新来服务今天的开发者

Build 2016: 发布明天的云创新来服务今天的开发者

每个企业和行业都在被云潜移默化地改变着。随着云计算的速度、规模和灵活性的不断增加&#xff0c;云服务带来的可能性也在不断被拓展。想象一下&#xff0c;通过监测传感器&#xff0c;一位奶农能够将他的奶牛牛奶产量提高&#xff1b;或是一家医院能够自动监测环境卫生状况&a…
阅读更多...
禁用JavaScript之后，你的网站表现如何？

禁用JavaScript之后，你的网站表现如何？

禁用JavaScript之后&#xff0c;你的网站表现如何&#xff1f;一最近要做一个新官网&#xff0c;需求评审完之后&#xff0c;考虑到官网都是纯静态页面&#xff0c;功能简单&#xff0c;操起vue-cli3几秒内创建好了项目脚手架&#xff0c;开发前&#xff0c;我打开了首页模板文…
阅读更多...
C# 使用 Windows API 操作控件： SendMessage

C# 使用 Windows API 操作控件： SendMessage

在C#中&#xff0c;程序采用了的驱动采用了事件驱动而不是原来的消息驱动&#xff0c;虽然.net框架提供的事件已经十分丰富&#xff0c;但是在以前的系统中定义了丰富的消息对系统的编程提供了方便的实现方法&#xff0c;因此在C#中使用消息有时候还是大大提高编程的效率的。定…
阅读更多...
对类的理解：

对类的理解：

在public class First 表示如果一个类的声明为public&#xff0c;要求该类的类名必须和文件保持一致。在编译 源文件时&#xff0c;让雨果源文件中定义了多个类&#xff0c;那么每个类会形成*.class 文件&#xff0c;执行是&#xff0c;通过Java类名&#xff0c;运行的的是该类…
阅读更多...
最新文章

Copyright @ 2022~2023