前后端交互Ajax

Ajax

1 服务器的基本概念

1.1 服务器

上网过程中，负责存放和对外提供资源的电脑，叫做服务器。

上网的过程中，负责获取和消费资源的电脑，叫做客户端。

1.2 URL 地址

URL（全称是UniformResourceLocator）中文叫做统一资源定位符，用于表示互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源存放位置，从而成功访问到对应的资源。

URL地址一般由三部分组成：

① 客户端与服务器之间的通信协议（http/https）

② 存有资源的服务器名称

③ 资源在服务器上具体的存放位置

1.3 资源的请求方法

客户端请求服务器时，请求的方式由很多种，最常见的两种请求方式分别为get和post请求。

• get请求通常用于获取服务器资源（向服务器要资源）
• post请求通常用于向服务器提交数据（往服务器发送资源）

2 了解Ajax

Ajax的全称是 Asynchronous JavaScript And XML (异步JavaScript和XML)

通俗的理解就是：在网页中利用

XMLHttpRequest

对象和服务器进行数据交互的方式，就是Ajax

3 接口及接口文档

使用Ajax 请求数据时， 被请求的URL地址， 就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。

接口文档，顾名思义就是对 接口的说明文档，它是我们调用接口的依据。接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

4 XMLHttpRequest的基本使用

XMLHttpRequest（简称 xhr） 是浏览器提供的JavaScript 对象，通过它，可以请求服务器上的数据资源。

请求方法：
GETPOST备注GET请求偏向于查询（获取数据…）POST请求偏向于提交数据(注册，修改，删除…)从语义去区分GET和POSTGET显示的携带参数,参数是直接拼接在请求地址之后，安全性较差，隐私性差POST隐式的携带参数，不会在请求地址上进行显示，安全性好。POST请求都是以JSON格式进行传参GET 的请求数据长度有大小限制，根据浏览器的不同，限制在2k~8KPOST请求没有限制GET请求可以被缓存POST请求不会被缓存
xhr 对象的readyState 属性：
0请求未初始化1服务器连接已建立2请求已接收3请求处理中4请求已完成，且响应已就绪

4.1 使用xhr发起get请求

步骤：

• 创建 xhr 对象
• 调用 xhr.open() 函数
• 调用 xhr.send() 函数
• 监听 xhr.onreadystatechange 事件

// 不带参数的GET请求// 1. 创建一个XMLHttpRequest对象var xhr =newXMLHttpRequest();// 2. 调用open函数// 不带参数的GET请求// xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");// 带参数的GET请求
        xhr.open("GET","http://www.liulongbin.top:3006/api/getbooks?id=1");// 3. 调用send函数
        xhr.send();// 4. 监听onreadystatechange 事件
        xhr.onreadystatechange=function(){// readyState 表示当前ajax请求所处的状态if(xhr.readyState ===4&& xhr.status ===200){
                console.log(xhr.responseText);}}

4.2 使用 xhr 发起 POST请求

步骤：

• 创建 xhr 对象
• 调用 xhr.open() 函数
• 设置 Content-Type 属性（固定写法）
• 调用 xhr.send() 函数，同时指定要发送的数据
• 监听 xhr.onreadystateChange 事件

// 1. 创建 xhr 对象var xhr =newXMLHttpRequest();// 2. 调用 open 函数
        xhr.open("POST","http://www.liulongbin.top:3006/api/addbook");// 3. 设置 Content-Type 属性
        xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8");// 4. 调用 send 函数
        xhr.send("bookname=水浒传转&author=施耐庵呀&publisher=上海图书出版社么");// 5. 监听事件
        xhr.onreadystatechange=function(){if(xhr.readyState ===4&& xhr.status ===200){
                console.log(xhr.responseText);}}

4.3 查询字符串

查询字符串（URL参数）是指在URL的末尾加上用于向服务器发送信息的字符串（变量）。

格式：将英文的 ? 放在URL的末尾，在加上参数 = 值，多个参数的话，使用 & 符号进行分割

5 使用 Axios 发起请求

Axios 是专注于网络数据请求的库。

引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"/></script>

5.1 使用Axios发起GET请求

axios 发起 get 请求的语法：

axios.get("url", {params: { /* 参数 */ }}.then(callback))

注意： Axios会返回promise对象 ，因此需要then来处理

axios.get('http://81.70.153.180:8081/api/getStudentList',{params:{sid:'s0001',sname:'王'}}).then(res=>{
    console.log('res',res);});

axios.get('http://81.70.153.180:8081/api/getStudentList?sid=s0001&sname=王').then(res=>{
    console.log('res',res);});

axios({url:'http://81.70.153.180:8081/api/getStudentList',method:'GET',params:{// GET方式，传递参数使用paramssid:'s0001',sname:'王',}}).then(res=>{
    console.log('res', res);// res.data});

5.2 使用Axios发起POST请求

axios 发起 POST 请求的语法：

axios.post("url", { /* 参数 */ }.then(callback))

axios.post('http://81.70.153.180:8081/api/login',{sid:'s0001',password:"123456"}).then(res=>{
             console.log(res);});

axios({url:'http://81.70.153.180:8081/api/login',// 请求的地址method:'POST',headers:{'Content-Type':'application/json;charset=utf-8'},// 设置请求头data:{sid:'s0001',password:"123456"}}).then(res=>{
    console.log(res);// res.data});

6 使用fetch发起请求

fetch也是前端用于发起网络请求的比较好的主流方式，ajax请求主要包括两种XML和fetch，XML可能接触的比较多。但是fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

6.1 使用 fetch 发起get请求

fetch('http://81.70.153.180:8081/api/getStudentList?sid=s0001&sname=王').then(res=>{if(res.ok){return res.json();}}).then(data=>{
    console.log(data);});

备注：get请求使用rest方式传参， 参数做为地址栏中的一部分

6.2 使用 fetch 发起post请求

fetch('http://81.70.153.180:8081/api/login',{method:'post',body:JSON.stringify({// 进行传参,需要转换为json字符串sid:'s0001',password:"123456"}),headers:{'Content-Type':'application/json'}}).then(res=>{if(res.ok){return res.json();}}).then(data=>{
        console.log(data);});