一、http协议

http协议就是前端与后端之间相互通信所遵循的协议，协议定义了传输信息的格式，信息所表示的具体的含义。

前端和后端之间沟通的信息分为两种：

前端给后端发送的信息叫做请求报文，也就是HTTP request
后端回复前端的信息叫做响应报文，也就是HTTP response

http协议最主要的内容就是定义了请求报文和响应报文的格式以及各个字段的含义。

请求报文

请求报文的结构类似下图，一共分为三个部分：请求行、首部字段、消息体。

1. 请求行

请求行占据了请求报文第一行的位置，分为三个部分：请求方法请求地址协议版本，由空格隔开：

请求方法 可以看做请求的类型，常见取值：GET、POST、PUT、DELETE
请求地址 表示的就是这个请求要往哪里发送
协议版本 协议的版本信息

2. 首部字段

一个首部字段占据一行，是以键值对的形式表示的，键与取值之间用英文冒号分隔，类似于JS当中对象属性的定义

3. 消息体

消息体和首部字段之间通过一个空行分隔开来，消息体其实就是本次请求报文当中实际包含的数据，类比于我们写信中信的内容

响应报文

响应报文分为三部分：状态行、首部字段、消息体

1. 状态行

状态行也是由三个字段通过空格分隔构成的，依次是：协议版本、状态码、状态码对应的文本描述。

前端根据状态码来判断本次请求是否成功，状态码的取值和含义都在http协议中有明确定义，eg:

二、Ajax

Ajax（Asynchronous JavaScript and XML），即异步 JavaScript 和 XML。在 Ajax 技术出现之前，只有浏览器能主动发起计算机之间的通信，而 Ajax 技术出现之后，浏览器提供了 XMLHttpRequest 这个构造函数，使Javascript 能主动发起网络请求。

XML是早期Ajax传递数据所采用的的一种数据格式，HttpRequest是http协议中的请求报文，XMLHttpRequest函数就是能让JS主动发起http请求，从而与服务器之间通过http协议来达到相互通信的目的。

XMLHttpRequest

1.open

JS 要发起一个http请求，首先要new一个 XHR 对象：

var xhr = new XMLHttpRequest();

有了 XHR 对象之后，我们需要调用open方法来“打开”这个XHR对象：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://yapi.demo.qunar.com/mock/63071/helloworld');

第一个参数：method：表示http请求的类型

第二个参数：url：表示的就是http请求的地址

调用了 open 方法之后并不会真正发送请求，而只是启动一个请求以备发送。

2. send

send方法接收一个参数，表示将要发送给服务器的信息，也就是请求报文中的消息体, 消息类型必须为字符串，如果不打算向服务器发送消息，也需要传一个null作为参数

// 创建一个XHR对象
var xhr = new XMLHttpRequest();
// 打开XHR对象，
xhr.open('POST', 'https://www.qsxqd.com/api/play/helloworld');
// 发送http请求
xhr.send('hello');

3. 获取服务器返回的数据

想要获取到服务器返回的数据，我们需要先了解下XHR对象的三个属性：

responseText：保存了服务器返回的数据
status：服务器响应报文的状态码
readyState：表示当前 XHR 对象请求/响应过程的当前活动阶段，这个属性有以下一些取值：

// 创建一个XHR对象
var xhr = new XMLHttpRequest();
console.log('刚刚创建的XHR对象：', xhr.readyState);// 打开XHR对象，
xhr.open('POST', 'https://www.qsxqd.com/api/play/helloworld');
console.log('调用open函数后的XHR对象：', xhr.readyState);// 设定XHR对象的onreadystatechange属性
xhr.onreadystatechange = function() {console.log('调用send函数后的XHR对象：', xhr.readyState);
}// 发送http请求
xhr.send('hello');

输出的信息：

刚刚创建的XHR对象：0
调用open函数后的XHR对象：1
调用send函数后的XHR对象：2
调用send函数后的XHR对象：3
调用send函数后的XHR对象：4

其中3表示接收到部分响应数据，4表示已经接收到全部数据

每当XHR对象的readyState属性发生改变时，如果onreadystatechange属性是一个函数，那么浏览器都会运行这个函数

三、实例

实例1： readyState与状态的对应关系

在readyState变为2的时候，在右侧打印出“发送”
在readyState变为3的时候，在右侧打印出“接受”
在readyState变为4的时候，在右侧打印出“完成”

// 创建一个XHR对象
var xhr = new XMLHttpRequest();
console.log('刚刚创建的XHR对象：',xhr.readyState);//打开XHR对象
xhr.open('POST','https://www.qsxqd.com/api/play/helloworld')
console.log('调用open后的XHR对象:',xhr.readyState)// 设定XHR对象的onreadystatechange属性
xhr.onreadystatechange = function(){console.log('调用send函数后的XHR对象：',xhr.readyState)if(xhr.readyState==2)console.log('发送')else if(xhr.readyState==3)console.log('接收')else if(xhr.readyState==4)console.log('完成')}
//发送消息
xhr.send('hello')

控制台的输出：

刚刚创建的XHR对象：0
调用open后的XHR对象:1
调用send函数后的XHR对象：2
发送
调用send函数后的XHR对象：3
接收
调用send函数后的XHR对象：4
完成

实例2： 向服务器发送请求，并接收到响应

// 创建一个XHR对象
var xhr = new XMLHttpRequest();
console.log('刚刚创建的XHR对象：', xhr.readyState);xhr.open('POST', 'https://www.qsxqd.com/api/play/helloworld');
console.log('调用open函数后的XHR对象：', xhr.readyState);
// 设定XHR对象的onreadystatechange属性
xhr.onreadystatechange = function() {console.log('调用send函数后的XHR对象：', xhr.readyState);// 浏览器接收完成服务器数据if (xhr.readyState === 4) {// 响应状态码有效if (200 <= xhr.status < 300 || xhr.status === 304) {console.log('接收数据：', xhr.responseText);}}
}
xhr.send('hello');

控制台的输出：

刚刚创建的XHR对象：0
调用open函数后的XHR对象：1
调用send函数后的XHR对象：2
调用send函数后的XHR对象：3
调用send函数后的XHR对象：4
接收数据：hello world!

200 <= xhr.status < 300 || xhr.status === 304：这个条件用来判断响应报文状态码的有效性，只有当状态码处于这个限定条件内，才认定这个请求返回的数据是有意义的

实例3： 向服务器发送消息，接收到响应消息后
1.在父节点里添加一个子节点
2.子节点的id设置为div1-2
3.子节点的innerHTML为服务端返回的响应消息

前端界面如下：

<html>
<head>
</head>
<body><div id='div1'><div id = 'div1-1'> div1-1</div></div>
</body>
</html>

* {margin: 0;padding: 0;}#div1 {width: 300px;height: 300px;display: flex;justify-content: space-around;align-items: center;background-color: rgba(0,122,204,0.7);}#div1 > div{width: 100px;height: 100px;display: flex;justify-content: center;align-items: center;background-color: rgba(0,122,204);}

运行前：

js代码：

var xhr = new XMLHttpRequest();
console.log('刚刚创建的XHR对象：', xhr.readyState);xhr.open('POST', 'https://www.qsxqd.com/api/play/helloworld');xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (200 <= xhr.status < 300 || xhr.status === 304) {// console.log(xhr.responseText);// 在下面补全你的代码吧var parentElement= document.getElementById('div1')var childElement = document.createElement('div')parentElement.appendChild(childElement)var result=xhr.responseTextchildElement.innerText=result}}
}// 发送http请求
xhr.send('hello');

运行后：

参考：
前端入门：https://www.zhihu.com/question/32314049/answer/713711753
然代码：https://www.qsxqd.com/

【前端笔记】三、前后端通信（http协议和Ajax）相关推荐

运维开发笔记整理-前后端分离
运维开发笔记整理-前后端分离作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.为什么要进行前后端分离 1>.pc, app, pad多端适应 2>.SPA开发式的流 ...
如何使用websocket实现前后端通信
如何使用websocket实现前后端通信 websocket通信是很好玩的,也很有用的的通信方式,使用方式如下: 第一步由于springboot很好地集成了websocket,所以先在在pom.xml ...
Vue：前端体系与前后端分离
Vue:前端体系与前后端分离概述介绍 Vue(读音/viu/,类似于 view)是一套用于构建用户界面的渐进式框架,发布干 2014 年 2 月. 与其它大型框架不同的是,Vue 被设计为可以 ...
大前端–Vue前端体系、前后端分离
大前端–Vue前端体系.前后端分离前言 Soc:关注点分离原则 HTML+CSS+JS(视图):给用户看,刷新后台给的数据网络通信:axios 页面跳转:vue-router 状态管理:vuex ...
写给刚入门的前端工程师的前后端交互指南
转自原文写给刚入门的前端工程师的前后端交互指南作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据 ...
购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端,以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NE ...
05-ET框架的前后端通信1
TIPS: 本系列贴仅用于博主学习ET框架的记录文章目录前言一.ET框架的前后端如何进行通信的? 二.前后端的通信使用 1.编写protobuf消息体 2.编写C#代码 3.运行结果总结前言 ...
06-ET框架的前后端通信2
TIPS: 本系列贴仅用于博主学习ET框架的记录文章目录前言一.IMessage是什么? 二.使用步骤 1.编写proto消息体 2.编写C#代码 3.运行结果总结前言这篇文章记录ET框架 ...
Vue：前端体系、前后端分离
1.概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue的核心库只关注视图层 ...
前后端通信跨域网络协议 DNS CDN HTTPS
本篇文章有点长,内容比较枯燥,就当作知识点的整理了. 服务在局域网中通过某些服务软件开启WEB服务功能,在该局域网中其它用户可以通过该打开服务的电脑 IP,找到该服务下web页面,默认打开的页面是i ...

【前端笔记】三、前后端通信（http协议和Ajax）

目录