前端--请求数据

HTTP

我们在实际应用中请求数据离不开HTTP，那么HTTP是什么？

1. HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）
2. 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”

---

1. 翻译过来就是状态码，当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。 ↩︎