文章目录
HTTP
我们在实际应用中请求数据离不开HTTP,那么HTTP是什么?
- HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)
- HTTP是基于客户端/服务端(C/S)的架构模型,通过一个可靠的链接来交换信息,是一个无状态的请求/响应协议。
客户端发送一个HTTP请求到服务器的请求消息包括以下格式:请求行(request line)
、请求头部(header)
、空行
和请求数据
四个部分组成,下图给出了请求报文的一般格式。
消息结构
图一 | 图二 |
---|---|
请求方法
HTTP1.0 定义了三种请求方法: GET, POST 和 HEAD方法,如图所示两图的请求方式均为GET 方法
方法 | 描述 |
---|---|
GET | 请求指定的页面信息,并返回实体主体。 |
POST | 向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。 |
HEAD | 类似于 GET 请求,只不过返回的响应中没有具体的内容,用于获取报头 |
readystate
类型 | 含义 |
---|---|
0 | 请求未初始化 |
1 | 服务器连接已建立 |
2 | 请求已接收 |
3 | 请求处理中 |
4 | 请求已完成,且响应已就绪 |
status code
- 200 - (GET方式/POST方式)请求成功
- 201 - (POST方式)201 Created 是一个代表成功的应答状态码,表示请求已经被成功处理,并且创建了新的资源。
- 301 - 资源(网页等)被永久转移到其它URL
- 304 - 对客户端有缓存情况下服务端的一种响应
- 404 - 请求的资源(网页等)不存在
- 500 - 内部服务器错误
content-type
- content-type 包含在 header 里面,是 header
- 这个属性在POST请求中尤为重要:用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件。
常见的媒体格式类型如下
:
- text/html : HTML格式
- text/plain :纯文本格式
- text/xml : XML格式
- image/gif :gif图片格式
- image/jpeg :jpg图片格式
- image/png:png图片格式
以application开头的媒体格式类型
:
- application/xhtml+xml :XHTML格式
- application/xml: XML数据格式
- application/atom+xml :Atom XML聚合格式
- application/json: JSON数据格式
如果使用这种编码方式,那么传递到后台的将是序列化后的json字符串
- application/pdf:pdf格式
- application/msword : Word文档格式
- application/octet-stream : 二进制流数据(如常见的文件下载)
XMLHttpRequest
- XMLHttpRequest 对象用于在后台与服务器交换数据。
创建 XMLHttpRequest 对象的语法:
所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) | 老版本的 Internet Explorer (IE5 和 IE6) |
---|---|
var xhr = new XMLHttpRequest(); | var xhr=new ActiveXObject("Microsoft.XMLHTTP"); |
XMLHttpRequest 包括了很多的方法,以下只是一小部分的列举。
"https://developer.mozilla.org/zhCN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" 内有更多参数详解
ajax
GET方法
// 1.创建新对象
var xhr = new XMLHttpRequest;
// 2. 建立open,url指的是请求接口(可自定义), true代表异步进行
xhr.open("GET", url, true);
// 3. 发送请求
xhr.send();
// 4. 返回数据,这里用到了箭头函数
xhr.onreadystatechange = () => {
if (xhr.readyState === 4){
if (xhr.status === 200 || xhr.status === 304)
console.log(xhr.responseText)
}
//4.返回数据的第二种方法
xhr.onload = () => {
if (xhr.states == 200 && xhr.readystate == 4)
console.log(xhr.responseText)
}
GET方式万变不离其宗,按4步走的方式 :创建对象→ 建立open → 发送请求 → 返回数据
其中在返回数据的步骤里面有两种方法:
onload | onreadychange |
---|---|
只可以监听到 readystate = 4 的状态码 | 可监听到 readystate = 2, 3, 4 的状态码 |
其中
POST方式
Json.parse(data) //将Json字符串转化为JS对象
Json.stringity(data) //将 JS对象转化为Json字符串
// 编写JS对象(要发送到服务器的内容)
var data = {
name = "Jack",
sex = "male"
};
// 创建新对象
var xhr = new XMLHttpRequest();
// 建立open, url指的是请求接口,可以自定义
xhr.open("POST", url, true)
// 设置请求头 区别于get , 以JSON数据格式传送并读取
xhr.setRequestHeader('content-type', 'application/json')
// 发送请求
xhr.send(JSON.stringify(data));
POST方式也有固定的套路: 创建对象→ 建立open → 设置请求头 → 发送请求
axios
- axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
- axios 目前是比较常用的方法,相对 ajax而言,数据处理方面有比较大的优势,而且
提供了一些并发请求的接口
,自动转换JSON数据
。 - 在使用axios时,我们比较常用的方法是引入他的 cpn,如下也就相当于引入了一个axios 库。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
http://jsonplaceholder.typicode.com/ 里面的一些网址可以作为接口使用
这里面有许多的数据可以获取,也可以进行POST传值, PUT/PATCH更新,但是不会将结果显示,需要我们通过控制台打印出来。
箭头函数(es6)
因为下面的代码运用到了 有关箭头函数的内容,所以在这里先跟大家介绍一下。
- 箭头函数表达式的语法比普通函数表达式更简洁。
var way = function(){
console.log("箭头函数")
}
//可以简化为
var way = () => {console.log(箭头函数)}
-其实箭头函数就是把 function
去掉,改写成 =>
,然后再补齐括号内参数的内容
。补齐的时候要注意 :
1. 括号内没有参数的话括号不能够省去
2.括号内只有一个参数的时候括号可以省去
GET方法
function get(){
axios
.get("http://jsonplaceholder.typicode.com/todos")
.then(data =>console.log(data))
.catch(err => console.log(err))
}
POST方法
function post(){
axios
const data = {
name : "Jack",
age : 18,
sex : "male"
}
axios
.post('http://jsonplaceholder.typicode.com/todos', data)
.then( res => console.log(res))
.catch( err => console.log(err))
}
PUT方法
put方法应用在更新数据,所以我们在使用put方法的时候一定要给出具体的原数据
function put(){
axios
const data_1 = {
"title": "JZY",
"completed": true
}
axios
// http://jsonplaceholder.typicode.com/todos/1 包含了id='1'的数据,大家可以copy到浏览器试一下
.post('http://jsonplaceholder.typicode.com/todos/1', data)
.then( res => console.log(res))
.catch( err => console.log(err))
}
PATCH方法
patch方法与put方法类似,不过返回值有区别。
function patch(){
const data_2 = {
"title": "JZY_lo",
"completed": true
}
axios
.patch('http://jsonplaceholder.typicode.com/todos/1', data_2)
.then( res => console.log(res))
.catch( err => console.log(err))
}
举个例子:原数据中有 name, age, stu三个属性
put | patch |
---|---|
只更改了name, age属性,那么返回的只是更改后name,age的值 | 只更改了name, age属性,返回的是name,age,stu三个属性的值 |
本文部分参考:“https://www.runoob.com/http/http-tutorial.html”
翻译过来就是状态码
,当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求。 ↩︎